| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 |
- 자바스크립트 prototype
- php
- 다크웹
- 자바스크립트 기본 문법
- 보안뉴스한줄요약
- 자바스크립트 API
- 자바스크립트 element api
- python
- numpy
- 보안뉴스 한줄요약
- GIT
- 보안뉴스요약
- 보안뉴스
- 자바스크립트
- Oracle SQL
- ES6
- oracle
- 자바스크립트 jQuery
- 카카오프로젝트
- 카카오프로젝트 100
- 파이썬
- 보안뉴스 요약
- 자바스크립트 객체
- 깃허브
- javascript
- 오라클
- 랜섬웨어
- oracle db
- 카카오프로젝트100
- 자바스크립트 node
- Today
- Total
FU11M00N
[ JavaScript ] JS 캡처링(Capturing), 버블링(Bubbling) 본문
생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅입니다.
- 캡처링(Capturing)
HTML 태그는 중첩되어 있습니다.
특정한 태그에서 발생하는 이벤트는 중첩되어 있는 태그들 모두가 대상이 되는 경우가 생깁니다.
이럴때 중첩된 태그들의 이벤트는 어떻게 처리가 되어 출력이 되는지 보겠습니다.
- 예제
<html>
<head>
<style>
html{border:5px solid red;padding:30px;}
body{border:5px solid green;padding:30px;}
fieldset{border:5px solid blue;padding:30px;}
input{border:5px solid black;padding:30px;}
</style>
</head>
<body>
<fieldset>
<legend>event propagation</legend>
<input type="button" id="target" value="target">
</fieldset>
<script>
function handler(event){
var phases = ['capturing', 'target', 'bubbling']
console.log(event.target.nodeName, this.nodeName, phases[event.eventPhase-1]);
}
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);
</script>
</body>
</html>
위의 예제 코드에서, 제일 안쪽에 존재하는 id 가 target 인 버튼을 누르면 아래와 같이 출력됩니다.
그러면 이벤트가 부모에서부터 시작되어 자식으로 전파되는 식으로 출력이 됩니다.
부모에서 자식으로 전파되는 방식이 캡쳐링(capturing) 이라고 합니다.
하지만 ie 낮은 버전에서는 작동하지 않기 때문에 잘 사용하지는 않습니다.
- 버블링(Bubbling)
예제와 함께 알아보겠습니다.
- 예제
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);
예제가 아까의 코드에서 addEventListener 의 세번째 인자가 false 로 변경되었습니다.
세번재 인자에 true가오면 캡쳐링방식 false가오면 버블링방식입니다.
기본적으로 세번째 인자를 비워두면 false이기때문에 버블링 방식으로 동작합니다.
캡처링의 케이스와 달리 순서가 반대로 되었습니다.
이렇게 자식부터 부모로 이벤트가 전파되는 것을 버블링(bubbling) 이라고 합니다.
- 이벤트 전파 중단
이벤트 전파를 중간에 멈출 수도 있습니다.
코드를 다음과 같이 변경해보도록 하겠습니다.
function handler(event){
var phases = ['capturing', 'target', 'bubbling']
console.log(event.target.nodeName, this.nodeName, phases[event.eventPhase-1]);
}
function stophandler(event){
var phases = ['capturing', 'target', 'bubbling']
console.log(event.target.nodeName, this.nodeName, phases[event.eventPhase-1]);
event.stopPropagation();
}
document.getElementById('target').addEventListener('click', handler, false);
document.querySelector('fieldset').addEventListener('click', handler, false);
document.querySelector('body').addEventListener('click', stophandler, false);
document.querySelector('html').addEventListener('click', handler, false);
HTML 까지 이벤트 전파가 되지 않은것을 확인할 수 있습니다.
이처럼 이벤트 전파를 막기위해서는 일반적으로 event.stopPropagation() 속성을 사용합니다.
ie9 이전의 브라우저에서는 이벤트 전파를 막기 위해서 event.cancelBubble 프로퍼티를 사용합니다.
SUA 정보보안 멘토링에 참여하고 있습니다.
