롸?
자바스크립트 이벤트 핸들링 본문
1. DOM Level 0 이벤트 핸들링 모델
1-1. 전통적 모델
function () {
alert('Hello, Event!');
return false;
}전통적 모델에서는 스크립트로 이벤트 핸들러를 추가하거나 제거할 수 있다.
이 때, 각 이벤트는 하나의 이벤트 핸들러만 등록할 수 있다.
1-2. 인라인 모델
<button onclick="alert('Hello, Event!'); return false;">Click</button>태그의 속성으로 추가, JavaScript 엔진이 onclick속성의 내용을 포함하는 익명 함수를 생성하며, <button>의 onclick 핸들러는 다음 익명 함수에 바인드된다.
2. DOM Level 2에서의 이벤트 핸들링 모델
addEventListener를 통해 이벤트 대상에 이벤트 리스너를 등록할 수 있으며, removeEventListener를 통해 이벤트 리스너를 제거할 수 있다. DOM Level 0와 달리 동일한 이벤트에 대해 여러 이벤트 핸들러를 등록할 수 있으며, 다양한 옵션들을 사용할 수 있다.
<button>add one item</button>
var button = document.querySelector('button');
button.addEventListener('click', addItem);
function addItem(event) {
console.log(event);
}
3. 이벤트 흐름
3-1. 이벤트 버블링
이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소(HTML 트리 구조상 한 단계 위에 있는 요소)들로 전달되어 가는 특성을 의미합니다
<body>
<div class="one">
<div class="two">
<div class="three">
</div>
</div>
</div>
</body>
var divs = document.querySelectorAll('div');
divs.forEach(function(div) {
div.addEventListener('click', logEvent);
});
function logEvent(event) {
console.log(event.currentTarget.className);
}
세 개의 div 태그 모두 클릭 이벤트를 등록 후, 클릭 시 logEvent함수를 실행 시키는 코드이다.
여기서 div태그 중 "three"를 클릭하면 three, two, one 전부 이벤트가 발생하게 된다. 이는 브라우자가 특정 화면 요소에서 이벤트가 발생했을 때 그 이벤트를 최상위 화면 요소까지 전파시키기 때문이다.
3-2. 이벤트 캡처링
이벤트 캡쳐는 버블링의 반대 방향으로 이벤트가 전파된다.
var divs = document.querySelectorAll('div');
divs.forEach(function(div) {
div.addEventListener('click', logEvent, {
capture: true // default 값은 false입니다.
});
});
function logEvent(event) {
console.log(event.currentTarget.className);
}
이벤트 캡쳐를 구현하기 위해서는 다음과 같이 addEventListener() 객체에서 capture:true로 설정해주면 된다.
참고
1. https://wonism.github.io/event-bubbling-capturing/
2. https://joshua1988.github.io/web-development/javascript/event-propagation-delegation/
'WEB > JavaScript & jQuery' 카테고리의 다른 글
| 자바스크립트 화살표 함수 (0) | 2020.03.12 |
|---|---|
| jQuery (0) | 2020.03.12 |
| 자바스크립트 스코프 호이스팅 (0) | 2020.03.10 |
| 일급 함수 (0) | 2020.03.02 |
| 함수형 프로그래밍 (0) | 2020.03.02 |