티스토리 뷰
속성 | 설명 |
버블링(bubbling) | - 기본값 - 이벤트가 발생하면, 가장 최상단의 조상 요소를 만날 때까지 요소 각각에 할당된 핸들러가 동작한다. (안쪽 => 바깥쪽) |
캡처링(capturing) | - 버블링의 반대되는 개념 (바깥쪽 => 안쪽) |
// 버블링
elem.addEventListener('이벤트타입', handler) //false가 기본값이다.
// 캡처링
elem.addEventListener('이벤트타입', handler, true)
캡처링
# 03:13
이벤트 1개 호출
document.getElementById('target').addEventListener('click', handler, true);
# 03:42
이벤트 2개 호출
document.getElementById('target').addEventListener('click', handler, true);
document.querySelector('fieldset').addEventListener('click', handler, true);
# 04:29
아래와 같이 출력되는 이유 설명
# 05:16
this에 대한 설명
# 06:11
event.target에 대한 설명
# 07:38
이벤트 4개 호출
document.getElementById('target').addEventListener('click', handler, true);
document.querySelector('fieldset').addEventListener('click', handler, true);
document.querySelector('body').addEventListener('click', handler, true);
document.querySelector('html').addEventListener('click', handler, true);
버블링
document.getElementById('target').addEventListener('click', handler, false);
document.querySelector('fieldset').addEventListener('click', handler, false);
document.querySelector('body').addEventListener('click', handler, false);
document.querySelector('html').addEventListener('click', handler, false);
# 01:55
캡처링, 버블링 설정하는 방법
// 버블링
elem.addEventListener('이벤트타입', handler) //false가 기본값이다.
// 캡처링
elem.addEventListener('이벤트타입', handler, true)
# 07:07
이벤트 전파를 막는 방법
event.stopPropagation();
*Propagation: 전파
[공부 좌표]
[예제]
codepen.io/millfeel/pen/LYZNJPE
[기본 지식]
'이론 > JS' 카테고리의 다른 글
[JS] className, classList (0) | 2021.02.18 |
---|---|
[JS] this, event.currentTarget, event.target의 차이 (0) | 2021.02.18 |
[JS] 생성자 함수와 class의 차이 (0) | 2021.02.12 |
[JS] class 선언문 - 이론 (0) | 2021.02.12 |
[JS] class - 강의 (0) | 2021.02.11 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- 부등 연산자
- 동치 연산자
- property
- __proto__
- 프로퍼티
- offsetHeight
- 점 표기법
- innerHeight
- scrollHeight
- clientHeight
- scrollTop
- offsetTop
- clinetTop
- 일치 연산자
- outerHeight
- 링크막기 #a링크막기
- 대괄포 표기법
- [[Prototype]]
- 동등 연산자
- prototype 프로퍼티
- 불일치 연산자
- javascript class
- 객체의 프로퍼티
- constructor
- @font-face
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
글 보관함