이벤트가 상위 요소로 전달되는 특성
<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
*/
클릭한 요소의 이벤트만 발생시키고 이벤트가 전달 되는 것을 막는다.
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
}
요소의 여러 이벤트가 등록됐을 때 다른 이벤트의 실행을 막는다.
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
*/
기본으로 정의된 이벤트를 작동하지 않도록 막는다.
<a href="https://www.youtube.com/@officialbtob">btob youtube</a>
document.querySelector('a').addEventListener('click', e => {
e.preventDefault(); // 링크 이동을 막음
});