[JS] onclick과 addEventListener

 

 

 

 

 

 

자바스크립트에서 이벤트를 사용할 때 onclick과 addEventListener를 사용한다.

 

 

1. onclick

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

 

※ onclick은 html 태그에 인라인 방식으로 넣을 수 있지만 남발하면 코드가 지저분해지므로 주의해서 사용한다.

<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');
}

 

 

 

2. addEventListener

addEventListener는 하나의 요소에 클릭 이벤트를 누적해서 걸어줄 수 있고, 이벤트가 누적되어 작동된다.

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');
});

 

또한, addEventListener은 이벤트 캡쳐링(true)과 이벤트 버블링(false)을 설정할 때 사용하면 좋다. 

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