티스토리 뷰
[JS] 이벤트 캡처링(capturing)과 버블링(bubbling)
JoonPyo-Hong 2021. 7. 16. 14:35반응형
버블링은 안쪽 요소 부터 이벤트가 발생한다.
<style>
body{
width:30%;
text-align:center;
padding:5px;
border: 1px solid blue;
}
#parent{
padding:5px;
border: 1px solid black;
}
#child{
padding:5px;
border: 1px solid red;
}
</style>
<body>
<div id="parent">
<div id="child">
클릭
</div>
</div>
<script>
const body = document.querySelector('body');
const parent = document.querySelector('#parent');
const child = document.querySelector('#child');
body.addEventListener('click', () => {
alert('body');
});
parent.addEventListener('click', () => {
alert('parent');
});
child.addEventListener('click', () => {
alert('child');
});
</script>
</body>
클릭 버튼을 누르면
child -> parent -> body 가 alert 출력된다.
event.stopPropagation() 함수를 사용해서 버블링 중단을 할 수 있다.
<body>
<div id="parent">
<div id="child" onclick="event.stopPropagation()">
클릭
</div>
</div>
</body>
child 가 alert 출력된다.
캡처링은 바깥 요소 부터 이벤트가 발생한다.
<script>
body.addEventListener('click', () => {
alert('body');
},true);
parent.addEventListener('click',() => {
alert('parent');
},{capture: true});
</script>
{capture: true} 또는 true 를 사용해서 캡처링을 사용할 수 있다.
body -> parent -> child 가 alert 출력된다.
반응형
'[JS]' 카테고리의 다른 글
[JS] disabled, readonly 사용법과 차이점 (8) | 2021.07.28 |
---|---|
[JS] jQuery is not defined, $ is not defined 오류 (1) | 2021.07.27 |
[JS] 문자열 공백 제거하기 (trim, replace, 정규식) (0) | 2021.07.25 |
[JS] 태그 속성값 (attr, prop) (0) | 2021.07.19 |
[JS] 동적으로 생성된 태그 이벤트 (2) | 2021.07.17 |
댓글
반응형