1. DOM 요소 기본 동작 중단: event.preventDefault()
이벤트 객체의 preventDefault 메서드는 DOM 요소의 기본 동작을 중단시킨다.
2. 이벤트 전파 방지: event.stopPropagation()
이벤트 객체의 stopPropagation 메서드는 이벤트 전파를 중지시킨다.
<!DOCTYPE html>
<html>
<head>
<style>
#fruits {
display: flex;
list-style-type: none;
padding: 0;
}
#fruits li {
width: 100px;
cursor: pointer;
}
#fruits .active {
color: red;
text-decoration: underline;
}
</style>
</head>
</head>
<body>
<ul class="container">
<button class="btn1">Button 1</button>
<button class="btn2">Button 2</button>
<button class="btn3">Button 3</button>
</ul>
<script>
// 이벤트 위임
// 클릭된 하위 버튼 요소의 color을 변경한다.
document.querySelector('.container').onclick = ({target}) => {
if (!target.matches('.container > button')) return;
target.style.color = 'red';
}
// btn2 요소는 이벤트를 전파하지 않으므로 상위 요소에서 이벤트를 캐치할 수 없다.
document.querySelector('.btn2').onclick = e => {
e.stopPropagation(); // 이벤트 전파 중단
e.target.style.color = 'blue';
}
</script>
</body>
</html>위의 예제는 상위 DOM 요소인 container 요소에 이벤트를 위임했다. 따라서 하위 DOM 요소에서 발생한 클릭 이벤트를 상위 DOM 요소인 container 요소가 캐치하여 이벤트를 처리한다. 하지만 하위 요소 중 btn2 요소는 자체적으로 요소를 처리한다.
btn2 요소는 이벤트를 전파하지 않기에 상위 요소에서 이벤트를 캐치하지 못해 위임할 수 없는 것이다. 그래서 자신에게 바인딩된 이벤트 핸들러만을 실행한다.
이처럼 stopPropagation 메서드는 하위 DOM 요소 이벤트를 개별적으로 처리하기 위해 이벤트 처리를 중단시킨다.
지식은 누가 origin인지 중요하지 않다.