onclick, addEventListener 차이

onclick은 하나의 이벤트 리스너만 등록할 수 있다.

두개 이상 등록하면 마지막에 등록한 리스너만 작동한다.

addEventListener는 이벤트 리스너를 여러개 등록할 수 있다.

 

아래와 같은 버튼이 있다고 하자.

<button class="event">
버튼
</button>

 

버튼에 onclick과 addEventListener를 등록하자.

let click = document.querySelector('.event');

click.onclick = function() {
    console.log('onclick1');
}
click.onclick = function() {
    console.log('onclick2');
}
click.addEventListener('click', function(){
    console.log('addEventListener1');
})
click.addEventListener('click', function(){
    console.log('addEventListener2');
})
click.addEventListener('click', function(){
    console.log('addEventListener3');
})

// onclick은 두개, addEventListener는 세개를 등록했다.

 

결과는 다음과 같다.

 

즉, 하나의 dom에 onclick을 여러개 등록하면 안된다.

 

보통 개발자들이 권장하는 방법은 addEventListener이다.