[JS] 04. onclick VS addEventListener

자바스크립트를 사용하다보면 버튼이나 어떤 요소에 클릭을 했을 때 이벤트를 주고 싶은 경우가 참많다.

 

나도 교육을 받으면서 다양한 이벤트들이 있지만 사실 클릭이벤트를 거의 10중에 9를 썼던 것 같다.

keyup 이나 keydown은 배우기만 했지 사실 프로젝트를 하면서 맡은 부분이 없으면 쓸 일이 크게 없기 때문에 대부분은 클릭이벤트를 쓰게 됐었다.

 

그런데 onclick을 inline 방식으로 사용을 하던 어떤 방식으로 사용하던 가끔 가다가 분명 문법에도 오류가 없고 어떠한 문제 없이 코드를 작성했는데 작동하지 않는 것을 js를 사용하다보면 누구든지 겪었을 거라고 생각한다.

 

나도 교육 중에는 onclick만 사용했지만, 프로젝트를 하는 중 결국 onclick만으로는 해결되지 않는 문제가 많기 때문에 

수많은 구글링 결과 최근에는 addEventListner를 더 사용하게 되었다.

 

그렇다면 과연 여기서 이 두개의 차이가 무엇일까? 

 

1. onclick

onclick은 결론적으로 말하자면 덮어쓰기라고 생각하면 편하다.

어떻게 완벽한 문법을 지켜가면서 아무리 작성해도 버튼하나에 onclick을 여러개 작성하게 되면 제일 마지막에 작성한 onclick 이벤트만 작동하게 된다.

 

버튼을 눌렀을 때 과연 1이 나올지 2가 나올지 3이 나올지 다음과 같은 코드로 확인해보자.

<button id="clickEvent1">1 or 2 or 3</button>

<script>
    btn1 = document.getElementById('clickEvent1')

    btn1.onclick = function() {
        alert('1')
    }

    btn1.onclick = function() {
        alert('2')
    }

    btn1.onclick = function() {
        alert('3')
    }
</script>

코드와 같이 버튼 하나에 onclick이벤트로 함수를 3개 만들었다.

 

결과는 다음 버튼으로 확인해보자

당연히 마지막인 3이 alert 메시지로 출력되는 것을 확인할 수 있다.

 

2. addEventListener

그렇다면 똑같은 코드에 addEventListener를 썼을 경우엔?

 

바로 코드로 확인해보자

<button id="clickEvent2">1 or 2 or 3</button>

<script>
    btn2 = document.getElementById('clickEvent2')

    btn2.addEventListener('click', function() {
        alert('1')
    })

    btn2.addEventListener('click', function() {
        alert('2')
    })

    btn2.addEventListener('click', function() {
        alert('3')
    })
</script>

버튼을 누르면 1이 떴다가 확인을 누르면 2, 3이 순차적으로 뜨는 것을 확인할 수 있다.

 

결론적으로 addEventListener로 어떤 이벤트 인지 (ex. click, change...) 를 사용하면 제일 마지막에 작성한 코드가 실행되는 게 아닌 모든 코드가 실행되는 것을 확인할 수 있다.

 

사실 알려면 다들 알 수 있는 내용이었지만, 코드를 간단하게 짜려는 습관 때문에 이벤트 핸들러에 대한 개념이 부족했어가지고 이런 기능을 정말 늦게 알게 되었다.

 

만약 onclick이벤트로 실행된 이벤트에 파생된 기능이 있다면 onclick으로 쓰면서 왜 실행이 안됨? 이러는 거보다 addEventListener를 한번쯤 생각하는 게 여러분의 속을 덜 타게 할 것이다.

 

왜냐면 F12를 눌러도 어떤 에러 메시지도 출력되지 않기 때문..