#
5.이벤트조작
#
목차
1. EVENT 2. 주요이벤트 3. 문법 3.1. html 속성으로 설정 3.2. dom 프로퍼티로 설정 3.3. addEventListener메서드로 설정
4. 예제 4.1. html 속성으로 설정 4.2. dom 프로퍼티로 설정 4.3. addEventListener메서드로 설정
예제2
#
1. EVENT
웹사이트는 사용자의 컴퓨터에 로딩되면서 화면에 표시된다. 사용자는 원하는 정보를 얻기 위해 입력장치를 조작(마우스 이동, 클릭, 키보드 조작 등)하는 등의 일련의 과정 속에 이벤트를 발생시키게 된다. 이러한 이벤트 중에서 특정요소를 클릭하거나 데이터를 입력하는 등의 **특정 이벤트에 대해 원하는 동작을 부여할 수 있도록 연결하는 것을 이벤트핸들러(또는 이벤트리스너)**라고 한다.
#
2. 주요이벤트
#
3. 문법
#
3.1. html 속성으로 설정
< 태그 onclick="함수명(인수)">
#
3.2. dom 프로퍼티로 설정
Element.onclick=function(){}
#
3.3. addEventListener 메서드로 설정
Element.addEventListener('클릭',funtion(){})
#
4. 예제
#
4.1. html 속성으로 설정
html
html
<button onclick="bgChange()">click</button>function bgChange() {
document.body.style.backgroundColor = `rgb(${Math.ceil(Math.random() * 255)},${Math.ceil(Math.random() * 255)},${Math.ceil(Math.random() * 255)} ) `;
}
#
4.2. dom 프로퍼티로 설정
html
html
<button>click</button>const btn = document.querySelector('button');
btn.onclick = function () {
document.body.style.backgroundColor = `rgb(${Math.ceil(Math.random() * 255)},${Math.ceil(Math.random() * 255)},${Math.ceil(Math.random() * 255)} ) `;
};
#
4.3. addEventListener 메서드로 설정
html
html
<button>click</button>const btn = document.querySelector('button');
btn.addEventListener('click', function () {
document.body.style.backgroundColor = `rgb(${Math.ceil(Math.random() * 255)},${Math.ceil(Math.random() * 255)},${Math.ceil(Math.random() * 255)} ) `;
});
#
예제2
버튼을 클릭하면 클릭한 위치에 가로 100px, 세로 100px크기의 사각형을 생성하자. 사각형의 배경색은
Math.random()메서드를 이용해 무작위로 변경되게 한다.
js
document.addEventListener('click', function (e) {
const box = document.createElement('div');
box.style.position = 'absolute';
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = `rgb(${Math.ceil(Math.random() * 255)},${Math.ceil(Math.random() * 255)},${Math.ceil(Math.random() * 255)})`;
box.style.top = `${e.clientY - 50}px`;
box.style.left = `${e.clientX - 50}px`;
document.body.appendChild(box);
});