자바스크립트 addEventListener() Method

• 이벤트리스너 를 추가하는 자바스크립트 메소드
• 기존에 있던 이벤트리스너 도 작동된다

<button id='btn-greet'>인사</button>
<script>
document.getElementById('btn-greet').addEventListener('click', function() {
    console.log('안녕 친구들');
});
</script>

이벤트리스너 가 2개이면 두개 모두 발생한다.

<button id='btn-greet'>인사</button>
<script>
document.getElementById('btn-greet').addEventListener('click', function() {
    console.log('안녕 친구들 #1');
});
document.getElementById('btn-greet').addEventListener('click', function() {
    console.log('안녕 친구들 #2');
});
</script>

출처 : https://zetawiki.com/wiki/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8_.addEventListener()_%EB%A9%94%EC%86%8C%EB%93%9C

onclick과의 차이점

onclick

1. 하나의 콜백 만 지정가능
2. onclick 이벤트 핸들러를 두 번 이상 사용하는경우 기존 이벤트 핸들러를 덮어쓴다
3. 그래서 가장 아래에 추가한 핸들러만 제대로 작동한다
4. 초기 DOM Level-0에서 제공하던 기능 → 구형 브라우저에서 지원된다

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

btn.onclick = function() { alert('onclick-1'); }
btn.onclick = function() { alert('onclick-2'); }

addEventListener

1. 여러 개의 이벤트 리스너를 추가가능
2. addEventListener는 기존 이벤트 핸들러를 덮어 쓰지 않고 얼마든지 계속해서 핸들러를 추가해도 모든 핸들러가 정상적으로 작동한다
3. DOM Level-2에서 추가된 기능 → 구형 브라우저에서 지원되지 않는다

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

btn.addEventListener('click', function() {
  alert('addEventListener-1');
});

btn.addEventListener('click', function() {
  alert('addEventListener-2');
});

출처 : https://jess2.github.io/2018/05/15/JavaScript/JS-onclick%EA%B3%BC-addEventListener-%EB%B9%84%EA%B5%90/