JS event / eventHandler / eventListener

event

브라우저에서 event란 말 그대로 사용자가 어떤 사건을 일으켰을 때를 의미한다. 클릭을 했을 때, 키를 눌렀을 때, 스크롤을 했을 때 등.

이벤트의 종류는 정말 많다.

https://developer.mozilla.org/ko/docs/Web/Events

이벤트 참조 | MDN

내가 자주 쓸만한 것들을 정리해 보자면 다음과 같다.

keydown	키를 눌렀을 때
keyup	키를 뗐을 때
keypress	키를 누르고 있을 때
click	엘리먼트를 클릭했을 때(눌렀다 뗐을 때)
dbclick	엘리먼트를 더블클릭했을 때
mouseover	엘리먼트에 마우스를 올렸을 때
mouseout	엘리먼트에서 마우스가 나갔을 때
mousedown	엘리먼트에 마우스를 눌렀을 때
mouseup	엘리먼트에 마우스를 뗐을 때
mousemove	엘리먼트에서 마우스를 움직였을 때
contextmenu	오른쪽 마우스를 눌렀을 때
focus	엘리먼트가 포커스 되었을 때(선택되거나 탭 키로 이동했을때 등)
blur	엘리먼트가 포커스에서 벗어났을 때
change	엘리먼트 값이 변경되었을 때
submit	submit 버튼을 눌렀을 때
reset	reset 버튼을 눌렀을 때
select	텍스트를 드래그하여 선택했을 때
resize	엘리먼트 사이즈가 변경되었을 때
scroll	스크롤했을 때
load	페이지 로딩이 완료되었을 때
unload	페이지가 다른 곳으로 이동될 때
abort	이미지 로딩이 중단되었을 때
online	브라우저가 네트워크에 연결됐을 때
offline	브라우저가 네트워크에 연결되지 않았을 때
copy	선택한 내용이 클립보드로 복사되었을 때
paste	선택한 내용이 붙여넣어졌을 때
cut	선택한 내용이 잘라내어진 후 클립보드로 복사되었을 때
dragstart	사용자가 엘리먼트나 텍스트를 드래그하기 시작할 때
drag	드래그되고 있을 때(350ms마다 연속적으로 실행됨)
dragend	드래그가 끝났을 때
dragenter	드래그된 엘리먼트나 텍스트가 유효한 드랍 대상에 들어왔을 때
dragover	엘리먼트나 텍스트가 유효한 드랍 대상위로 드래그되었을 때(350ms 마다 연속적으로 실행됨)
dragleave	드래그된 엘리먼트나 텍스트가 유효한 드랍 대상에서 나갈 때
drop	엘리먼트가 유효한 드랍 대상에 드랍되었을 때

 

 

사용자가 웹 페이지의 내용을 바꾸었을 때 처리를 하는게 개발자의 일일 것이다. 이벤트를 처리하는 방법에는 두 가지가 있는데, 이벤트 핸들러와 이벤트 리스너다. 핸들러와 리스너 둘 다 사용자가 이벤트를 발생시킬 때를 기다렸다가 미리 작성된 코드를 실행시킨다.

 

eventHandler

위의 이벤트 이름에 on을 붙여 사용한다. click 이벤트를 예로 들어보자면

const button = document.querySelector(".btn")

button.onclick = () => {
  console.log("clicked");
};

이렇게 사용한다.

하나의 엘리먼트에는 하나의 이벤트 핸들러만 적용된다. 따라서

const button = document.querySelector(".btn")

button.onclick = () => {
  console.log("first");
};

button.onclick = () => {
  console.log("second");
};

위의 코드를 실행한 후 버튼을 클릭하면 콘솔에는 "second"만 나타나게 된다. 이게 이벤트 핸들러와 이벤트 리스너의 가장 큰 차이점이다.

 

eventListener

이벤트 리스너를 객체에 추가해 사용하는 방식이다. 첫번째 인자로 이벤트 이름을 그대로 사용한다. 역시 click 이벤트를 예로 들어보자면

const button = document.querySelector(".btn")

button.addEventListener("click", (e) => {
  console.log("clicked");
})

이렇게 사용한다.

이벤트 리스너는 하나의 엘리먼트에 여러 개 추가할 수 있다. 따라서

const button = document.querySelector(".btn")

button.addEventListener("click", (e) => {
  console.log("first");
})

button.addEventListener("click", (e) => {
  console.log("second");
})

위의 코드를 실행한 후 버튼을 클릭하면 콘솔에는 "first"와 "second"가 모두 나타난다.

 

하나의 엘리먼트에 여러 이벤트를 추가해야 하는 경우가 더 많을 것이다. 처음에는 아니더라도 기능을 추가하다 보면 그럴 확률이 높다. 따라서 일반적으로 이벤트 리스너를 사용하는 것이 좋다.