자바스크립트에서는 엘리먼트에 클릭 이벤트를 발생시킬 때 onclick()과 addEventListener('click', function(){}) 이 두 가지 방식을 사용한다. 둘 다 클릭 이벤트를 발생시킨다는 점에선 동일하지만 각각 차이점이 존재한다. 두 방법의 차이점에 대해 정리해보려고 한다.
1. 이벤트 덮어쓰기 vs 이벤트 누적
onclick은 이벤트를 여러 개 적용하는 것이 불가능하다. 만일 onclick 이벤트 핸들러를 이미 사용한 상태에서 새로운 onclick 이벤트를 추가한다면 이후에 추가된 이벤트가 기존의 이벤트를 덮어쓴다.
addEventListener를 사용할 경우 여러 이벤트를 추가하더라도 누적되어 모든 이벤트가 동작된다.
클릭버튼을 이용하여 간단하게 예제를 만들어보았다. 버튼을 클릭했을 때의 이벤트 리스너를 onclick으로 두 번, addEventListener로 두 번 동작하게 하고 버튼을 클릭해보았다.
onclick 이벤트의 경우 덮어쓰기되어 가장 마지막에 등록된 이벤트 핸들러만 동작하고, addEventListener는 누적된 이벤트가 모두 실행됨을 확인할 수 있다.
<body>
<button id="clickButton">클릭</button>
</body>
<script>
let clickButton = document.querySelector("#clickButton")
// onclick - 이벤트가 덮어써짐
clickButton.onclick = function() {
console.log('onClick 1')
}
clickButton.onclick = function() {
console.log('onClick 2')
}
// addEventListener - 이벤트가 누적됨
clickButton.addEventListener('click', function() {
console.log('addEventListener 1')
})
clickButton.addEventListener('click', function() {
console.log('addEventListener 2')
})
</script>
2. 브라우저 호환성
onclick 이벤트는 모든 브라우저에서 호환이 가능하다.
addEventListener는 IE 6,7,8 버전에서는 호환되지 않는다. 만일 오래된 브라우저를 지원해야 할 경우 onclick이벤트를 사용하는 것이 좋다.
3. 버블링 / 캡쳐링
addEventListener는 세 번째 파라미터로 이벤트가 발생할 때 버블링으로 작동될 지 캡쳐링으로 작동될지 지정할 수 있다.
세 번째 파라미터가 true일 경우 캡처링을 사용하고, false일 경우 버블링을 사용한다.
clickEvent.addEventListener('click', 이벤트 리스너, 버블링/캡쳐링)
마지막으로, addEventListener의 특징을 정리해보았다.
- 이벤트에 하나 이상의 핸들러를 등록할 수 있다.
- HTML 요소 뿐만 아니라 모든 DOM 요소에 대해 동작한다.
- 캡쳐링/버블링과 같은 이벤트 리스너에 대한 옵션을 지정하여 더욱 세밀한 제어가 가능하다.
'프론트엔드' 카테고리의 다른 글
| [트러블 슈팅] base 64 image to Javascript File (Feat. Naver Smart Editor 2.0) (3) | 2022.01.19 |
|---|---|
| [트러블 슈팅] 페이지 길 때만 top 버튼 보이기(feat. window.onload, $(document).ready 차이) (0) | 2022.01.17 |
| [Javascript] Dayjs 사용법 정리 (Date Format, 날짜 계산하기 등) (1) | 2021.08.20 |
| [Javascript] 자바스크립트 Date 기간 조회하는 법 (+ 주의사항) (3) | 2021.08.12 |
| [Javascript] 데이터 불변성(Immutability) (0) | 2021.07.09 |
댓글