DOM&EVENT, 이벤트 핸들러(Event Handler) _ 코딩앙마

유튜브 코딩앙마 영상을 보고 정리한 내용입니다.

마우스를 클릭하거나 키보드를 입력하면 이벤트가 발생합니다. 이때 특정 함수를 할당해서 실행할 수 있는데, 이것을 핸들러라고 합니다.

//html
<button id="btn"></button>

//script
function sayHello() {
	alert("Hello");
}

const el = document.getElementById('btn')
el.onclick = sayHello; 
// 이때 함수에 괄호가 없어야 함. 괄호가 있다면 반환값이 할당

el.addEventListener("click", sayHello); 
// 이런 식으로 addEventListener(감지하는 이벤트, 실행할 함수) 를 활용해 작성을 많이 함

el.addEventListener("click", ()=>{
	alert("hi");
}); 
// 함수를 직접 작성할 수도 있음

문서 로드가 완료되었을 때 이벤트 DOMcontentLoaded 는 아래 처럼 작성해야 동작합니다.

document.addEventListener('DomcontentLoaded', ()=>{
	document.body.style.backgroundColor = 'red'
});

자주 사용하는 이벤트를 살펴보면 더블클릭, dblclick 과 키를 눌렀다 땔 때 keyup 이 있습니다.

모든 이벤트는 이벤트 값들을 객체의 모양으로 반환합니다. 아래처럼 콘솔을 찍어보면 확인할 수 있습니다.

input.addEventLietener("keyup", event => {
	console.log(event);
});

아래처럼 event.key 를 하면 해당 이벤트의 key 에 해당하는 값이 반환됩니다.

input.addEventLietener("keyup", event => {
	console.log(event.key);
});

focus 는 인풋창에 포커스가 되었을 대 blur 는 포커스를 잃었을 때 사용합니다. 마우스 무브 이벤트로 mousemove 는 해당 영역에서 마우스가 이동할 때마다 값이 찍힙니다. clientX 와 clientY 값을 사용하면 현재 마우스 위치 확인할 수 있습니다.

box.addEventListener('mousemove', event => {
	circle.style.top = '${event.clientY}px'(백틱);
	circle.style.left = '${event.clientX}px'
});
// box 위에 마우스가 움직일 때 circle 이 마우스 이벤트로 위치값을 받아서 같이 움직인다. box 와 circle 은 position 으로 연결되어 있어서 top, left 값으로 조정한 것

윈도우 리사이즈 이벤트는 아래처럼 적용할 수 있습니다.

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