🍰 지금도 더워서 선풍기 틀고 버티는데, 더 더워지면 어떡하나 걱정이다. 작년에 너무 더워서 의욕도 안 생기고... 나태해지고(원래도 그랬을지도.)...
🍴 버블링
: 이벤트가 발생한 요소에서 시작하여 최상위 요소까지 전달되는 방식
- 이벤트는 트리의 하단에서 시작하여 점차 올라감
- 다음 순서로 진행됨
- 실제 이벤트가 발생한 요소
- 중간의 부모 요소들
- <body>
- <html>
- document
- window
🍴 캡처링
: 최상위 요소에서 시작하여 이벤트가 발생한 실제 요소까지 전달되는 방식
- 진행되는 순서
- window
- document
- <html>
- <body>
- 중간의 부모 요소들
- 실제 이벤트가 발생한 요소
🍴 중단하기
: 버블링, 캡처링 중단하도록 명령 => event.stopPropagation() 사용
element.addEventListener('click', function(event) {
event.stopPropagation(); // 여기서 전파 중단
console.log('Event propagation stopped');
});🍴 정리
<div id="outer">
<div id="inner">
Click me!
</div>
</div>버블링 단계
(inner에서 이벤트 발생 가정) inner > outer > body > html > document > window
캡처링 단계
window > document > html > body > outer > inner
🍴 이벤트 위임
: 부모 요소에 이벤트 리스너를 설정하여 자식 요소에서 발생하는 이벤트를 처리하는 기법
- 많은 자식 요소 각각에 이벤트 리스너를 설정하는 대신
- 하나의 상위 요소에 리스너를 설정하면
- 효율성 높이고 코드의 유지보수에 용이함
/* HTML */
<ul id="parent">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
/* JavaScript */
document.querySelector('#parent').addEventListener('click', (event) => {
if (event.target.tagName === 'LI') {
console.log(event.target.textContent);
}
});- event.target은 이벤트가 실제로 발생한 요소 가리킴 => li 요소
- event.target.tagName === 'LI' 조건문 사용 => 불필요한 요소에서 발생한 이벤트 무시
'회고 > Techit Frontend School 10기' 카테고리의 다른 글
| [멋쟁이 사자처럼 프론트엔드 스쿨] 40일차 TIL - AJAX, 동기/비동기, REST API (0) | 2024.06.30 |
|---|---|
| [멋쟁이 사자처럼 프론트엔드 스쿨] 39일차 TIL - jQuery, Swiper, 계산기 만들기, 모듈화 (0) | 2024.06.30 |
| [멋쟁이 사자처럼 프론트엔드 스쿨] 37일차 TIL - DOM, querySelector, closest, textContent (0) | 2024.06.22 |
| [멋쟁이 사자처럼 프론트엔드 스쿨] 36일차 TIL - try...catch, BOM (0) | 2024.06.21 |
| [멋쟁이 사자처럼 프론트엔드 스쿨] 35일차 TIL - 배열, 큐, 스택, 배열 메서드 (1) | 2024.06.17 |