addEventListener 와 onclick

결론 부터 말하자면 addEventListener가 더 나은 방식입니다. addEventListener를 사용하세요.

두 개의 메소드는 아래와 같이 사용합니다.

 

document.querySelector('.btn').onclick = () => {
	alert('click!');
}

document.quertSelector('.btn').addEventListener('click', () => {
	alert('click!');
), false);

 

1. 여러 이벤트 overwrite

 

onclick는 한번에 하나의 이벤트만 할당할 수 있습니다. 그에 반해 addEventListener는 여러개의 이벤트를 overwrite할 수 있습니다. 아래의 예시를 봅시다.

 

let eventHandler1 = () => {
	alert('first');
}
let eventHandler2 = () => {
	alert('second');
}

document.querySelector('#btn1').onclick = eventHandler1;
document.querySelector('#btn1').onclick = eventHandler2;

document.querySelector('#btn2').addEventListener('click', eventHandler1, false);
document.querySelector('#btn2').addEventListener('click', eventHandler2, false);

 

위의 코드 결과 btn1을 누를시 second만 출력되지만 btn2를 누르면 first -> second 순으로 동작합니다.

onclick에서 addEventListener와 같이 작동 되려면 한개의 이벤트 핸들러 함수에 모든 기능을 다 넣어야합니다.

 

2. capturing, bubbling 선택 가능

 

또한, 이벤트가 bubbling으로 동작할지 capturing으로 동작할지 설정할 수 있습니다. addEventListener의 3번째 파라미터를 보면 false로 되어있습니다. 저 의미는 해당 이벤트를 capturing하지 않겠다는 의미입니다. 즉 ture는 capturing하고 false는 bubbling하겠다는 의미입니다. (※ 3번째 파라미터의 default 값은 false입니다.)

addEventListener( "type", eventHandler, ture(Capturing) or false(defalut, Bubbling) ) 

 

3. 여러 타입의 이벤트를 쉽게 바인딩 가능

let btn = document.querySelector('#btn');
let eventHandler = () => {
	alert('click or hover');
}

btn.onclick = eventHandler;
btn.onmouseover = eventHandler;

['mouseover', 'click'].map((e) => {
	btn.addEventListener(e, eventHandler);
});

 

※결론

onclick 을 사용하여도 되지만 addEventListener가 좀 더 유연하고 많은 장점을 가지고 있다.

 

 

참조

hanjungv.github.io/2018-01-21-1_JS_onclick_vs_addEventListener/

developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick