이벤트 흐름
표준 DOM 이벤트에서 정의한 이벤트 흐름엔 3가지 단계가 있다.
- 캡처링 단계 – 이벤트가 하위 요소로 전파되는 단계
- 타깃 단계 – 이벤트가 실제 타깃 요소에 전달되는 단계
- 버블링 단계 – 이벤트가 상위 요소로 전파되는 단계
이벤트 버블링
: 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성
div 태그 한 개만 클릭했을 뿐인데 3개의 이벤트가 발생되는 이유는 브라우저가 이벤트를 감지하는 방식 때문이다.
브라우저는 특정 화면 요소에서 이벤트가 발생했을 때 그 이벤트를 최상위에 있는 화면 요소까지 이벤트를 전파시킨다.
focus 이벤트를 포함한 몇몇 이벤트를 제외하고 거의 모든 이벤트는 버블링 된다.
이벤트 캡쳐링
: 이벤트 캡쳐는 이벤트 버블링과 반대 방향으로 진행되는 이벤트 전파 방식이다. (이벤트 리스너를 등록할 때 capture : true를 설정)
위 그림처럼 특정 이벤트가 발생했을 때 최상위 요소인 body 태그에서 해당 태그를 찾아 내려간다.
var divs = document.querySelectorAll('div');
divs.forEach(function(div) {
div.addEventListener('click', logEvent, {
capture: true // default 값은 false입니다.
});
});
function logEvent(event) {
console.log(event.currentTarget.className);
}
이벤트 중단
- e.preventDefault()
: element 태그 고유의 동작(ex) a태그의 페이지 이동, submit태그의 form태그 안의 input 전송)을 중단.
<html>
</head>
<script type="text/javascript">
function stopDefaultAction(e) {
e.preventDefault();
}
</script>
</head>
<body>
<a href="https://ifuwanna.tistory.com" onclick="stopDefaultAction(event);">페이지이동</a>
</body>
</html>
- e.stopPropagation()
: 상위, 하위 엘리먼트들로의 이벤트 전파를 중단시킴. 즉, 버블링, 캡쳐링을 막는 함수
<html>
<head>
<script>
function alertInnerDiv(e){
e.stopPropagation(); //주석 처리시 부모엘리먼트(outerDiv)로 이벤트가 전파되어 alertOuterDiv()까지 호출
alert("click InnerDiv");
}
function alertOuterDiv(){
alert("click outerDiv");
}
window.onload = function() {
var innerDiv = document.getElementById("innerDiv");
var outerDiv = document.getElementById("outerDiv");
innerDiv.addEventListener("click", alertInnerDiv, false);
outerDiv.addEventListener("click", alertOuterDiv, false);
}
</script>
</head>
<body>
<div id="outerDiv">
<div id="innerDiv">innerDiv</div>
</div>
</body>
</html>
- e.stopImmediatePropagation()
: 한 요소의 특정 이벤트를 처리하는 핸들러가 여러 개인 상황에서 버블링을 멈추고, 요소에 할당된 다른 핸들러의 동작도 막는 함수.
이 메서드를 사용하면 요소에 할당된 특정 이벤트를 처리하는 핸들러 모두가 동작하지 않는다.
--- 참고 사이트
- [JavaScript] 이벤트 버블링, 캡쳐링, 위임
- [개념잡기] e.preventDefault()와 stopPropagation()의 차이
- 버블링과 캡쳐링
- Does stopPropgation stop the event from propagating in the capture phase?
- Event Bubbling and Capturing in JavaScript
'JavaScript' 카테고리의 다른 글
| 스코프와 렉시컬 스코프 (0) | 2022.05.11 |
|---|---|
| 이벤트 위임 (event delegation) (0) | 2022.05.10 |
| 이벤트 루프 (Event Loop) (0) | 2022.02.08 |
| [리팩터링 2판 : 4장] 테스트 구축하기 (0) | 2022.01.24 |
| 표준 내장 객체 Intl (0) | 2021.10.28 |
