[DOM&EVENT] 05. 이벤트 핸들러(Event Handler)

마우스를 클릭하거나 키보드를 누르거나 하는 행동들을 이벤트라고 하는데요. 이외에도 인풋 창에 포커스가 되거나 문서에 로드가 완료되면 이벤트가 발생합니다. 이때 특정 함수를 할당해서 실행해 줄 수 있는데 이것을 핸들러라고 합니다.

<button onclick="alert('click')">클릭1</button>
<button onclick="sayHello()">클릭2</button>
<button id="btn">클릭3</button>

on 다음에 이벤트 타입을 적어줍니다. 

onclick 내부에 함수 명을 적어줍니다.

function sayHello(){
 alert("Hello")
}

const el = document.getElementById('btn');
el.onclick = sayHello; // 이때 괄호는 없어야 함. 
// 괄호가 있으면 함수의 반환값이 할당됨. 지금은 undefined

const el2 = document.getElementById('btn2');
el2.addEventListener("click", sayHello);
el2.addEventListener("click", ()=>{
 alert("hi");
});

addEventListener는 특정 이벤트가 발생하면 (지금은 클릭) 전달된 함수, 즉 핸들러를 실행합니다. 함수를 작성하지 않고 직접 작성하는 것도 가능합니다. addEventListener를 사용하면 HTML과 JavaScript를 분리할 수 있습니다. 

document.addElementListener('DOMContentLoaded', ()=>{
	document.body.style.backgroundColor = 'red';
}) // 작동함
document.onDOMContentLoaded = ()=>{
	document.body.style.backgroundColor = 'red';
} // 작동하지 않음

문서 로드가 완료되었을 때 발생합니다. addElementListener는 작동하지만 onDOMContentLoaded는 작동하지 않습니다. 그래서 가급적이면 addElementListener로 통일하는 것이 좋습니다. 

document.removeEventListener("DOMContentLoaded",()=>{
	document.body.style.backgroundColor = "red";
})

removeEventListener는 이미 할당 된 핸들러를 삭제할 때 사용합니다. 

const el = document.getElementById("btn");
el.addEventListener("dbclick", sayHello);

dbclick은 한 번 클릭하면 아무 반응이 없고 더블 클릭했을 때 이벤트가 실행됩니다.

<input id="txt" type="text"/>

const input = document.getElementById("txt");
input.addEventListener("keyup", (event)=>{
	console.log(event);
})

자주 사용하는 키 이벤트에는 keydown과 keyup이 있습니다. 말 그대로 누를 때와 뗄 때 발생하는 이벤트입니다. 핸들러는 이벤트 객체를 인수로 받습니다. 인수로 event를 적고 event를 console.log로 찍어보면 KeyboardEvent라고 찍히고 type은 keyup, 어떤 글자를 입력했는지 등 여러가지 정보들을 볼 수 있습니다. event.key를 찍어보면 입력하는 글자들이 찍힙니다.

const input = document.getElementById("txt");
input.addEventListener("focus", ()=>{
	input.style.backgroundColor = "rgba(255,0,0,0.2)"
});
input.addEventListener("blur", ()=>{
	input.style.backgroundColor = null;
});

focus는 인풋 창에 focus가 가면 발생하고 blur는 포커스를 잃을 때 발생합니다. focus가 됐을 때 배경색을 바꿔주고 focus를 잃으면 초기화 시켜줍니다. 키보드로 접근해도 잘 동작합니다.

<div
id="box"
sylte="position:relative; width: 100px; height: 100px; border: 2px solid red"
>
	<div
    id="circle"
    style="
    position:absolute;
    width: 10px;
    height: 10px;
    background-color: #000;
    border-radius: 50%;
    "
    ></div>
</div>

const box = document.getElement("box");
const circle = document.getElementById("circle");
box.addEventListener("mousemove", event => {
	circle.style.top = `${event.clientX}px`;
    circle.style.left = `${event.clientY}px`;
})

mousemove event는 마우스를 움직일 때 마다 발생하는 이벤트 입니다.

이렇게 작성하면 box 내부에서 마우스를 움직일 때마다 이벤트가 찍힙니다.

clientX와 clientY가 있는데 이것을 이용하면 현재 마우스 포인터 위치를 알 수 있습니다.

clientX와 clientY로 position을 이용해 top, left값을 변경해주면 마우스의 움직임에 따라 원이 같이 움직이도록 할 수 있습니다.

window.addEventListener("resize", ()=>{
	document.body.innerText = `현재 창 크기는 ${window.innerWidth} x ${window.innerHeight}`;
})

resize를 사용하여 이렇게 하면 창 크기가 바뀔 때 마다 너비와 높이값을 업데이트 해 줄 수 있습니다.