2020. 3. 26. 00:57ㆍJavaScript
* 이벤트 버블링
- 이벤트 발생시 그 상위 요소까지 전파되는 것을 말함
- 이벤트는 document의 맨 꼭대기까지 전파됨 ( bottom -> top 형태 )
<body class="body">
<div class="one">
<div class="two">
<div class="three"></div>
</div>
</div>
</body>
const divs = document.querySelectorAll("div");
function logText(e) {
console.log(this.classList.value);
}
divs.forEach(div => div.addEventListener("click", logText));
- 가장 바깥쪽 div를 클릭했을 때의 결과는: one
- 가운데 div를 클릭했을 때의 결과는: two one
- 가장 안쪽 div를 클릭했을 때의 결과는: three two one
function logText(e) {
e.stopPropagation();
console.log(this.classList.value);
}
divs.forEach(div => div.addEventListener("click", logText));
- 만일 이벤트 버블링을 멈추고 싶다면 event.stopPropagation( ) 을 이용
- 가장 바깥쪽 div를 클릭했을 때의 결과는: one
- 가운데 div를 클릭했을 때의 결과는: two
- 가장 안쪽 div를 클릭했을 때의 결과는: three
* 이벤트 캡쳐
- 이벤트 발생시 그 하위요소들까지 이벤트 전파
- top -> bottom 형태
- 이벤트 캡쳐를 구현하기 위해서는 addEventListener의 세번째 인자로 캡쳐 관련된 인자를 넘겨 주면 된다.
<body class="body">
<div class="one">
<div class="two">
<div class="three"></div>
</div>
</div>
</body>
const divs = document.querySelectorAll("div");
function logText(e) {
console.log(this.classList.value);
}
divs.forEach(div => div.addEventListener("click", logText, {
capture: true // capture의 기본값은 false
}));
- 가장 바깥쪽 div를 클릭했을 때의 결과는: one
- 가운데 div를 클릭했을 때의 결과는: two one
- 가장 안쪽 div를 클릭했을 때의 결과는: three two one
function logText(e) {
e.stopPropagation();
console.log(this.classList.value);
}
divs.forEach(div => div.addEventListener("click", logText, {
capture: true
}));
- 이벤트 캡쳐링에서도 event.stopPropagation( ) 을 사용 가능
- 가장 바깥쪽 div를 클릭했을 때의 결과는: one
- 가운데 div를 클릭했을 때의 결과는: one
- 가장 안쪽 div를 클릭했을 때의 결과는: one
* Once
- 해당 이벤트가 한 번만 실행되게 해 준다.
- addEventListener의 세번째 인자로 once 관련된 인자를 넘겨 주면 구현할 수 있다.
<button class="button">BUTTON</button>
function logText(e) {
console.log(this.classList.value);
}
button.addEventListener("click", logText, {
once: true // once의 기본값은 false
});
// result: button
- 한 번 button을 클릭했을 때에는 결과값으로 button이 잘 나오지만, 두번째부터는 콘솔창에 결과값이 출력되지 않게 된다.
'JavaScript' 카테고리의 다른 글
| Object Oriented Programming (0) | 2020.05.08 |
|---|---|
| Closure (0) | 2020.04.28 |
| function method, this (0) | 2020.03.18 |
| rest parameter, arguments, spread 연산자 (0) | 2020.03.03 |
| template 태그 & fragment (0) | 2020.03.01 |