[자바스크립트] 이벤트 전파

멤오장·2023년 4월 20일
0

이벤트 전파

버블링

이벤트가 상위 요소로 전달되는 특성

<div class="three">
    <div class="two">
        <div class="one">냥냥</div>
    </div>
</div>
document.querySelectorAll('div').forEach(div => {
  div.addEventListener('click', logEvent);
});
function logEvent(event) {
  console.log(event.currentTarget.className);
}
/*
	one
    two
    three
*/

캡쳐링

이벤트가 하위 요소로 전달되는 특성

document.querySelectorAll('div').forEach(div => {
   div.addEventListener('click', logEvent, true);
// div.addEventListener('click', logEvent, { capture: true });  
});
function logEvent(event) {
  console.log(event.currentTarget.className);
}
/*
	three
    two
    one
*/

이벤트 전파 중단

event.stopPropagation()

클릭한 요소의 이벤트만 발생시키고 이벤트가 전달 되는 것을 막는다.

document.querySelectorAll('div').forEach(div => {
  div.addEventListener('click', logEvent);
});
function logEvent(event) {
  event.stopPropagation(); // 버블링 막음
  console.log(event.currentTarget.className); // one
}
document.querySelectorAll('div').forEach(div => {
  div.addEventListener('click', logEvent, true);
});
function logEvent(event) {
  event.stopPropagation(); // 캡쳐링 막음
  console.log(event.currentTarget.className); // three
}

event.stopImmediatePropagation()

요소의 여러 이벤트가 등록됐을 때 다른 이벤트의 실행을 막는다.

document.querySelector('.one').addEventListener('click', (e) => {
  console.log('1', e.currentTarget.className);
});
document.querySelector('.one').addEventListener("click", () => {
  console.log('2', event.currentTarget.className);
});
/* 
	1 one
	2 one
*/
document.querySelector('.one').addEventListener("click", () => {
  event.stopImmediatePropagation();
  console.log('1', event.currentTarget.className);
});
document.querySelector('.one').addEventListener("click", () => {
  console.log('2', event.currentTarget.className);
});
/* 
	1 one
*/

event.preventDefault()

기본으로 정의된 이벤트를 작동하지 않도록 막는다.

<a href="https://www.youtube.com/@officialbtob">btob youtube</a>

document.querySelector('a').addEventListener('click', e => {
  e.preventDefault(); // 링크 이동을 막음
});
profile
일단 적기

0개의 댓글