자바스크립트 이벤트리스너

document를 이용하여 자바스크립트에서 태그들의 이벤트리스너를 추가 할 수 있다.

 

방법은 두가지가 있는데 HTML body에 hello란 div 태그 내부에 h1 태그가 있다는 걸 가정하고 작업을 한다면,

 

첫번째는 addEventListener를 이용하는 것인데,

addEventListener 함수는 인자로 감지할 이벤트와 실행할 함수를 받는다.

const h1 = document.querySelector(".hello h1");

function handleMouseEnter() {
	console.log("Mouse Enter!");
}

h1.addEventListener("mouseenter", handlerMouseEnter);

-> 해당 태그에 마우스가 닿으면 콘솔에 Mouse Enter라고 출력한다.

 

두번째는 태그가 가지고있는 이벤트 함수를 사용하는 것이다.

태그에서 해당 이벤트 함수에다 우리가 만들어준 함수를 넣어주면된다.

const h1 = document.querySelector(".hello h1");

function handleTitleClick() {
	h1.style.color = "blue";
}

h1.onclick = handleTitleClick;

-> 해당 태그를 클릭시 태그의 색상을 파랑색으로 변경한다.

 

두가지 방법에서 addEventListener를 사용하는 것에 조금 이점이 있는데,

addEventListener 는 추후에 필요시 removeEventListner를 통해서 이벤트리스너를 필요 시점에

없애 줄 수 있다는 것이다.

 

window 오브젝트가 가지고 있는 Event들이 재밌는 것들이 많은데,

 

window.addEventListner("resize",handleWindowResize);
window.addEventListner("copy",handleWindowCopy);
window.addEventListner("offline",handleWindowOffline);
window.addEventListner("online",handleWindowOnline);

사이즈가 조절되거나, 우리가 복사를 할때나

밑에 두개는 현재 클라이언트가 online됬을때, offline 됬을때를 handling 해줄 수 있다.

 

Event는 굉장히 많은데, webApi 라는 사이트를 통해 정보를 얻을 수도 있고,

아니면 간단하게, console.dir 를 이용하여 오브젝트 내부에서 직접 확인 할수 있다.

 

const h1 = document.querySelector(".hello h1");

console.dir(h1);

on이 들어간 요소들이 이벤트이며, addEventListener를 이용할때는 on을 제거하고 이벤트 이름을 붙여주면되고,

onclick를 이용할때 처럼 직접 사용시에는 그대로의 요소에 함수를 넣어주면 된다.