자바스크립트 addEventListener() Method
9396 단어 코드라이언JavaScriptJavaScript
이벤트리스너
를 추가하는 자바스크립트 메소드- 기존에 있던
이벤트리스너
도 작동된다
<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>
onclick과의 차이점
onclick
- 하나의
콜백
만 지정가능 - onclick 이벤트 핸들러를 두 번 이상 사용하는경우 기존 이벤트 핸들러를 덮어쓴다
- 그래서 가장 아래에 추가한 핸들러만 제대로 작동한다
- 초기 DOM Level-0에서 제공하던 기능 → 구형 브라우저에서 지원된다
var btn = document.getElementById('btn');
btn.onclick = function() { alert('onclick-1'); }
btn.onclick = function() { alert('onclick-2'); }
addEventListener
- 여러 개의 이벤트 리스너를 추가가능
- addEventListener는 기존 이벤트 핸들러를 덮어 쓰지 않고 얼마든지 계속해서 핸들러를 추가해도 모든 핸들러가 정상적으로 작동한다
- DOM Level-2에서 추가된 기능 → 구형 브라우저에서 지원되지 않는다
var btn = document.getElementById('btn');
btn.addEventListener('click', function() {
alert('addEventListener-1');
});
btn.addEventListener('click', function() {
alert('addEventListener-2');
});
Author And Source
이 문제에 관하여(자바스크립트 addEventListener() Method), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@beanlove97/자바스크립트-addEventListener-Method저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)