이벤트 핸들러를 사용하여 DOM(Document Object Model)을 다루다 stopPropagation이 메소드를 알게 되었습니다.
Progagation의 사전적 의미이며 이는 HTML 요소에 이벤트 핸들러를 적용했을 경우, 그 이벤트가 부모 요소까지 전파되는 것을 의미합니다. 이런 현상을 'Bubble Up' 이라고 합니다.
우선 다음과 같이 클래스 이름이 'content'인 div 요소를 만들고 부모 요소로 감싸주었습니다.
<div class="container">
<ul class="ul">
<li class="li">
<div class="content">CONTENT</div>
</li>
</ul>
</div>CSS를 적용하여 다음과 같이 구간을 나누어 주었습니다.
그리고 HTML 요소 마다 클릭 이벤트를 적용시켰습니다.
const container = document.querySelector(".container");
const content = document.querySelector(".content");
const li = document.querySelector(".li");
const ul = document.querySelector(".ul");
content.addEventListener("click", function (event) {
console.log(event.target);
console.log("click");
});
li.addEventListener("click", function (event) {
console.log(event.target);
console.log("li");
});
li.addEventListener("click", function (event) {
console.log(event.target);
console.log("ul");
});
container.addEventListener("click", function (event) {
console.log(event.target);
console.log("contaioner");
});그리고 클래스 이름이 'content'인 영역을 클릭 해보았습니다. 개발자 도구의 console 창에 다음과 같이 출력이 됩니다. event.target은 분명 content 박스인데 이벤트가 부보인 li요소로 전파되고 다시 ul요소, container 요소까지 전파가 되는 것을 알 수 있습니다. 이러한 현상은 예측할 수 없는 기능의 오류를 만들어 낼 수 있습니다. 이런 상황에서 부모 요소로 이벤트가 전파되지 않게 막기 위해서 stopPropagation 메소드를 사용합니다.
content 부분의 코드에서 event에 stopProgation 메소드를 하고 다시 클릭해보면, 아래와 같이 부모 요소로의 전파가 발생하지 않는 것을 알 수 있습니다.
content.addEventListener("click", function (event) {
event.stopPropagation();
console.log(event.target);
console.log("click");
});
정리
오늘은 이벤트의 전파를 막는 stopPropagation에 대해서 정리해보았습니다. 그 외에도 브라우저의 새로고침 preventDefault 메소드와 같이 event로 인해 발생할 수 원하지 않는 현상들을 잘 컨트롤 할 수 있도록 관련된 메소드를 더 깊게 공부해야겠다는 생각을 하게 되었습니다.
