Onclick vs AddEventListener 어떤 것을 사용해야 할까?

Onclick과 AddEventListener 라는 비슷한 메소드 중 어떤 것을 사용해야 할까?

 

우선 Onclick() 메소드는 다음과 같이 사용할 수 있다. 

 

element.attachEvent('onclick', function() { /* do stuff here*/ });

 

attachEvent() 메소드를 통해 붙여진 Onclick 메소드는 말 그대로 element를 '클릭'시 function을 실행시키는 기능이다.

 

하지만 AddEventListener는?

 

element.addEventListener('click', function() { /* do stuff here*/ }, false);

 

이런 식으로 AddEventListener를 통해 click 시 function을 실행시키는 메소드이다.

 

두 메소드의 공통점은 '클릭' 이벤트가 발동할 시 function을 구현한다는 점인데, 두 메소드의 차이점은 무엇이 있을까?

 

 

 

 

Onclick 메소드와 AddEventListner 메소드의 차이

 

1. 브라우저의 호환성

 

우선 브라우저의 호환성 면에서, Onclick 메소드는 모든 브라우저와 버전에서 호환되는데 비해

 

AddEventListener는 IE 6,7,8 에서는 호환되지 않는다는 점이 있다. 여기서 AddEventListener의 호환 여부를

 

확인할 수 있다. 자신의 웹이 정말 옛날 버전의 IE에서도 동작하기를 원한다면,

 

혹은 호환성에 신경쓰고 싶지 않다면 OnClick 메소드를 사용하는 것이 바람직하다.

 

 

https://caniuse.com/#search=addeventlistener

Can I use... Support tables for HTML5, CSS3, etc

 

 

 

 

2. 버블링, 캡쳐링 설정 가능 여부

 

메소드가 받는 파라미터를 보면, Onclick 메소드는 구현할 기능인 function()만 받는데 비해 

 

AddEventLister는 3번째 파라미터로 버블링, 캡쳐링 동작 여부를 정할 수 있다.

 

3번째 파라미터 "type"을 true로 설정하면 버블링, false로 설정하면 캡쳐링으로 동작하게 한다.(default는 false)

 

이 설정을 통해 동작을 버블링으로 설정해 중첩된 Event가 발생했을 때 Element로부터 window까지

 

이벤트를 전파할지, 혹은 캡쳐링으로 설정해 window부터 Element까지 전파할지 설정할 수 있다.

 

 

 

 

3. 여러 이벤트들의 관리 방식

 

 

var element = document.getElementById('testing');
element.onclick = function () { alert('did stuff #1'); };
element.onclick = function () { alert('did stuff #2'); };

 

위와 같이 여러 개의 onClick 메소드를 구현했다고 가정하자. 실제로 element를 '클릭'하면 'did stuff #2'만

 

보일 것이다. 이처럼 onClick 메소드는 첫번째 이벤트를 두번째 이벤트가 overwrite 함으로서 첫번째 이벤트

 

('did stuff #1')가 구현되지 못하게 한다.

 

하지만 AddEventListener는

 

 

element.addEventListener('click', function() {alert('did stuff #1')}, false);
 
element.addEventListener('click', function() {alert('did stuff #2')}, false);

 

위와 같이 구현해서 두 이벤트가 전부 구현된다. 

 

 

 

 

 

그렇다면 두 메소드 중 어떤 것을 사용해야 할까?

 

위의 답은 이미 본문에 나와있다. 

 

자신의 웹이 브라우저의 호환성에 관계없이 동작하게 하고싶다, 혹은 구 버전의 IE에서도 동작해야 한다면

 

OnClick메소드를 사용해야 한다. 하지만 그것이 아닌 모든 경우에는 AddEventListenr 메소드를 사용하는 것

 

이 바람직하다. 현재 AddEventLister는 더 모던한 자바스크립트 기능으로 쓰이고 있는 추세이다. 

 

자신이 미래를 더 생각한다면, 더 감각적인 웹 개발자가 되고 싶다면 AddEventListern를 사용하는 것이 

 

기능적으로 더 나은 선택인 것이다.