Kevin Powell - Community•3mo ago

Event bubbling in JS

Hello guys, sorry to disturb you all; in order to stop an event from propagating to its parent element, we can use the following code:

const container = document.querySelector('#container');
const output = document.querySelector('#content');
const btn = document.querySelector('button');

function handleClick(e){
    // e.stopPropagation();
    output.textContent += `You clicked on the ${e.currentTarget.tagName} element!\n`;
    // e.stopPropagation();
}

document.body.addEventListener('click', handleClick);
container.addEventListener('click', handleClick);
btn.addEventListener('click', handleClick);

const container = document.querySelector('#container');
const output = document.querySelector('#content');
const btn = document.querySelector('button');

function handleClick(e){
    // e.stopPropagation();
    output.textContent += `You clicked on the ${e.currentTarget.tagName} element!\n`;
    // e.stopPropagation();
}

document.body.addEventListener('click', handleClick);
container.addEventListener('click', handleClick);
btn.addEventListener('click', handleClick);

My question is, does the order in which we write the line e.stopPropagation(); matters please

7 Replies

Jochem•3mo ago

no, it can be anywhere as long as it's executed before the end of the codeblock

glutonium•3mo ago

tho i would say putting at the beginning makes more sense. that's more intuitive imo

Jochem•3mo ago

Gaming

Programming

Event bubbling in JS