Todo의 완료 처리 및 삭제 구현과정에서 이벤트 캡쳐와 버블링에 대해 정확한 지식이
정리가 되어 있지 않다는 것을 깨닫고 아래와 같이 정리했습니다.
이벤트 등록
웹 애플리케이션에서 사용자의 입력을 받기위해 필요한 기능입니다.
참고로 addEvenetListener() 웹 API는 화면에서 동적인 기능을 추가하기 위해 사용된 기능입니다.
이벤트 캡쳐 - Event Capture
이벤트 캡쳐는 이벤트 버블링과 반대 방향으로 진행되는 이벤트 전파 방식입니다.
특정 이벤트가 발생 했을 때 최상위 요소인 태그에서 해당 태그를 찾아 내려갑니다.
<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, {
capture: true // default 값은 false입니다.
// 해당 이벤트를 감지하기 위해 이벤트 버블링과 반대 방향으로 탐색합니다.
});
});
function logEvent(event) {
console.log(event.currentTarget.className);
}
따라서, <div class="three"></div>를 클릭해도 one two three 와 같은 결과가 나타납니다.
이벤트 버블링 - Event Bubbling
이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면
요소들로 전달되어 가는 특성을 의미합니다.
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 class="three"></div>를 클릭하면 three two one와 같은 결과가 나옵니다.
브라우저는 특정 화면 요소에서 이벤트가 발생했을 때 그 이벤트를 최상위에 있는 화면 요소까지
이벤트를 전파시킵니다.
event.stropPropagation()
stopPropagation() 웹 API를 사용하여 해당 이벤트가 전파되는 것을 막습니다.
이벤트 위임 - Event Delegation
아이템이 많아질수록 이벤트 리스너를 다는 작업 자체가 번거롭기에 이를 해결 할 수 있는 방법으로 사용됩니다. 하위요소에서 각각 이벤트를 붙이지 않고, 상위요소에서 하위요소 이벤트를 제어하는 방식입니다.
참고:
이벤트 버블링, 이벤트 캡처 그리고 이벤트 위임까지
(기본) 이벤트 버블링, 이벤트 캡처링, 그리고 이벤트 위임까지 이벤트 전달 방식과 관련된 모든 것을 파헤쳐 봅니다.
joshua1988.github.io
'프론트엔드 개발을 위한 자바스크립트_프로그래머스 스쿨' 카테고리의 다른 글
| 파일마다 EOL(End Of Line)을 왜 넣어야 할까 (0) | 2021.03.28 |
|---|---|
| import문 사용을 위한 준비 (0) | 2021.03.25 |
| 자바스크립트 this란? (0) | 2021.03.23 |
