[Javascript] 이벤트 : onclick() ? addEventListener() ?

자바스크립트 코드를 작성하며

클릭 이벤트에 이벤트 리스너(핸들러)를 등록하고 싶을 때

• onclick과 같은 이벤트 핸들러로 처리를 할 수 도 있고,
• addEventListener()와 같은 메소드로 이벤트 리스너를 연결할 수도 있다!

 

그렇다면 둘의 차이는 무엇일까?

👇🏻

'on~ 이벤트 핸들러'의 경우,

하나의 이벤트에 하나의 콜백 이벤트만 발생시킬 수 있다.

 

'addEventListener() 메소드'의 경우,

하나의 이벤트에 여러개의 콜백 이벤트를 발생시킬 수 있다.

 

---

 

 

예시로 화면 어디든 클릭할 경우 이벤트로 alert()를 띄워주고싶을 때!

를 가정하고 코드를 작성해보자.

 

 

 

 

형식은 둘 다 비슷하다.

 

이벤트 리스너를 연결할 대상 + 어떤 이벤트에 반응할 것인지 + 콜백 함수 순서로 정의했다.

 

위의 경우,

window 객체에서 클릭 이벤트가 발생했을 때 "Hello!"를 띄워주는 이벤트 리스너를 연결했다.

코드를 실행해보면 화면을 클릭 시 두 코드 모두 순차적으로 잘 실행되는 것을 확인할 수 있다.

 

여기까지만 보면 둘의 기능은 차이가 없어보인다.

이제 onclick과 addEventListener로 대상에 각각 두개의 이벤트 리스너를 연결해보자.

 

//onclick
window.onclick = (event) => { alert("Hello!"); }
window.onclick = (event) => { alert("friends."); }

//addEventListener()
window.addEventListener("click", (event) => { alert("Hello! _from addEventListener"); } );
window.addEventListener("click", (event) => { alert("friends. _from addEventListener"); } );

 

onclick의 경우 마지막에 작성된 이벤트만 실행된 것을 확인할 수 있고,

addEventListener의 경우 두 이벤트 모두 실행되는 것을 확인할 수 있다.

 

 

이렇듯 

'onclick의 경우'

하나의 이벤트에 ➡️ 하나의 콜백 이벤트만 발생시킬 수 있다.

 

'addEventListener()의 경우'

하나의 이벤트에 ➡️ 여러개의 콜백 이벤트를 발생시킬 수 있고,

하나 이상의 이벤트 리스너를 연결할 수 있다.

또한 캡처링 단계와 버블링 단계 중 핸들러가 동작하는 시점을 설정할 수 있다.

 

onclick 이벤트는 addEventListener()가 추가되기 이전부터 존재하던 기능으로

 

addEventListener()의 경우 이벤트 제어에 있어 더욱 유용하지만

IE8 이하의 브라우저에서는 작동하지 않을 수 있다고 한다!

그럴 땐 onclick을 사용하면 된다!

 

 

+)

또 다른 방법으로 html에서 직접 이벤트 리스너를 연결할 수도 있지만,

권장하지 않는 방법이다.

 

html 코드와 js 코드가 얽혀 유지보수가 어려워진다 ㅠㅠ

역할에 따라 코드를 분리하는데는 이유가 있다...!

 

---

EventTarget.addEventListener() - Web API | MDN

GlobalEventHandlers - Web API | MDN

 

 

⚠️ 아래 내용은 모두 개인적인 참고 / 기록을 위한 용도입니다. 참고해주시고 편안하게 봐주세요 :)  ⚠️
***    혹시라도 잘못된 정보가 있다면  언제든지 알려주시면 감사하겠습니다  !    ***