[Javascript] onclick vs addEventListener의 차이점을 알아보자

이번 포스팅은 onclick과 addEventListener의 차이점에 대해 알아보겠습니다.

 

자바스크립트에서 클릭이벤트를 사용할 때 onclick과 addEventListener를 사용할 수 있습니다.

 

차이점을 알아보기 전에 다음과 같은 예시를 보고 가겠습니다.

<input type="button" value="클릭" class="btn">

var btn = document.querySelector('.btn');

btn.onclick = function() {
    console.log('100');
}

btn.onclick = function() {
    console.log('200');
}

btn.onclick = function() {
    console.log('300');
}

'클릭' 버튼을 누르면 콘솔 탭에 어떤 값이 출력이 될까요?

'300'만 출력이 됩니다.

 

그렇다면 다음과 같은 코드의 결과값은 어떨까요?

var btn = document.querySelector('.btn');

btn.onclick = function() {
    console.log('100');
}

btn.onclick = function() {
    console.log('200');
}

btn.onclick = function() {
    console.log('300');
}

btn.addEventListener('click', function() {
    console.log('100');
});

btn.addEventListener('click', function() {
    console.log('200');
});


btn.addEventListener('click', function() {
    console.log('300');
});

결과는 '300', '100', '200', '300'이 출력됩니다.

 

어떤 차이가 있는지 눈치채셨나요?

 

onclick과 addEventListener의 차이는 덮어쓰기 vs 누적입니다. 

 

onclick은 하나의 요소에 클릭 이벤트를 걸어줄 때마다 기존에 걸려있던 클릭 이벤트가 덮어쓰여집니다.

그렇기 때문에 처음 100, 200의 클릭 이벤트가 실행되지 않고 마지막 클릭 이벤트만 실행된 것입니다.

 

반면에 addEventListener는 하나의 요소에 클릭 이벤트를 누적해서 걸어줄 수 있습니다.그래서 모든 클릭 이벤트가 실행되어 100, 200, 300의 값을 출력한 것입니다.

---

그럼 둘 중에 무엇을 사용하는 것이 좋을까요?

 

제 생각은 케바케라고 생각합니다. 

 

가령 html을 작업하는 도중 급하게 어떤 버튼을 클릭했을 때 이벤트가 실행되는지 확인하고 싶다면 onclick을 사용하시면 됩니다.

<div onclick="location.href='www.naver.com'">
</div>

onclick은 html 태그에 인라인 방식으로 넣을 수 있습니다.

잠깐 테스트 용으로 사용하는 것이 좋으며 이를 남발한다면 코드가 많이 지저분할 것입니다.

 

addEventListener은 이벤트 캡쳐링과 버블링을 설정할 때 사용하면 좋습니다.

addEventListener('click', function() {}, false);

세 번째 인자에 이벤트 캡쳐링을 사용할지 안할지 판단을 하고 false, true로 설정해주시면 됩니다.

 

초기값은 false이기 때문에 이벤트 버블링이 기본적으로 설정되어 있습니다.

 

그리고 addEventListener는 인터넷익스플로러(IE) 8 버전 이하에서는 작동을 하지 않기 때문에 해당 버전을 고려해서 개발을 하신다면 attachEvent를 사용하셔야 합니다.

 

 

 

결론을 말하면 onclick보다 addEventListener를 사용함으로써 얻는 장점이 더 많다고 생각합니다.