1. preventDefualt()
브라우저의 기본 이벤트 동작 취소! 가끔 필요 없는 기능을 중지할 때 사용한다.
가장 쉽게 생각할 수 있는 예시는 우클릭 금지!
단! 이벤트의 동작을 취소할 뿐, 이벤트 흐름 자체를 막지 X
EX)
<img src='주소' alt = '푸린'>
const img = document.querySelector('img');
img.addEventListener('contextmenu',() => {
alert('우클릭 멈춰! (σ｀д′)σ');
event.preventDefault();
})
2. stopPropagation()
이벤트 흐름 전파 자체를 막는다
자기 뒤로 오는 이벤트들을 막는다. 작성하는 위치는 자기 영역 내에서 크게 상관 없다. 실행 자체를 막는 게 아니기 때문이다. 그래서 웬만한 위치에서 정상적으로 이벤트가 실행된다.
📌 이벤트 흐름
일단 이벤트 흐름에 대해서 다시 공부해야 한다. 앞서 DOM 정리글에 이벤트 흐름을 언급한 바 있다.
순서) 캡처링 -> 버블링
정리하자면 먼저 이벤트가 실행되면 윈도우 > HTML,body > target 순으로 이벤트가 실행된 타겟까지 찾아가 기능을 실행한다. 이것이 캡쳐링! 그다음 거꾸로 타겟에서부터 부모요소들을 타고 올라서 다시 이벤트를 실행하는 데 이것을 버블링!
캡처링은 함수 끝에 true를 붙이고, 버블링은 false값을 갖는다.(false값이 초기값이다.)
<form action="">
<button type="submit" class="submit">제출</button>
</form>
<script>
//캡처링과 버블링 순서 (true인 캡처링 다 찍고 버블링)
const submit = document.querySelector('.submit');
submit.addEventListener('click', (event) => {
console.log('clicked');
event.stopPropagation();
// 이벤트 전파를 막음!! (실행을 막는 게 아님)
// 자기 이후로 오는 순서를 스탑
},true);
document.body.addEventListener('click', () => {
console.log('event still alive!');
});
</script>submit - 캡처링, body - 버블링
submit 버튼에 true 값으로 설정하여 캡처링이 되었기 때문에 콘솔에 'clicked'라고 찍히게 된다. 그리고 event.stopPropagation()때문에 그 뒤로 오는 버블링 body는 실행 X
캡처링 이후 버블링이 오는 순서를 차근차근 따지면 쉽게 생각할 수 있다.
