Javascript y Eventos. Todo lo que necesitas saber

Resumen de cómo funcionan los eventos en Javascript y su propagación por el DOM

¿Qué son los eventos?

¿Cómo se propagan los eventos?

<div id="container">
<div id="dataList">
<div id="clickedData"></div>
</div>
<button id="dataSender">Add new data</button>
</div>
const button = document.querySelector('#dataSender');
button.addEventListener('click', function(event) {
console.log('button clicked');
});
const body = document.querySelector('body');
const container = document.querySelector('#container');
const button = document.querySelector('#dataSender');
body.addEventListener('click', function(event) {
console.log('body clicked');
});
container.addEventListener('click', function(event) {
console.log('container clicked');
});
button.addEventListener('click', function(event) {
console.log('button clicked');
});
"button clicked""container clicked""body clicked"
button.addEventListener('click', function(event) { 
console.log('button clicked (one)');
}, true);
const button = document.querySelector('#dataSender');
button.addEventListener('click', function(event) {
console.log('button clicked (one)');
});
button.addEventListener('click', function(event) {
console.log('button clicked (two)');
});
const button = document.querySelector('#dataSender');
function onButtonClicked(event) {
console.log('button clicked (one)');
}
button.addEventListener('click', onButtonClicked);
button.removeEventListener('click', onButtonClicked);

¿Y cómo detenemos la propagación?

stopPropagation()

const body = document.querySelector('body');
const container = document.querySelector('#container');
const button = document.querySelector('#dataSender');
body.addEventListener('click', function(event) {
console.log('body clicked');
});
container.addEventListener('click', function(event) {
console.log('container clicked');
});
button.addEventListener('click', function(event) {
event.stopPropagation();
console.log('button clicked');
});
button.addEventListener('click', function(event) {
console.log('button clicked (two)');
});

stopImmediatePropagation()

const body = document.querySelector('body');
const container = document.querySelector('#container');
const button = document.querySelector('#dataSender');
body.addEventListener('click', function(event) {
console.log('body clicked');
});
container.addEventListener('click', function(event) {
console.log('container clicked');
});
button.addEventListener('click', function(event) {
event.stopImmediatePropagation();
console.log('button clicked');
});
button.addEventListener('click', function(event) {
console.log('button clicked (two)');
});

Oye… ¿Y el famoso preventDefault()?

function(event) {
event.preventDefault();
event.stopPropagation();
}
<a id="myLink" href="https://somedomain.invalid">Link</a>
const link = document.querySelector('#myLink');
link.addEventListener('click', function(event) {
event.preventDefault();
// do something cool
});

Lanzando eventos manualmente

event = new CustomEvent(type [, eventInitDict])
const clickedData = document.querySelector('#clickedData');
const anEvent = new CustomEvent('dataSent', {
detail: { foo: 'bar' },
});
clickedData.dispatchEvent(anEvent);
const body = document.querySelector('body');
const container = document.querySelector('#container');
const button = document.querySelector('#dataSender');
const clickedData = document.querySelector('#clickedData');
body.addEventListener('clickedData', function(event) {
console.log('body listener');
});
container.addEventListener('clickedData', function(event) {
console.log('container listener');
});
button.addEventListener('clickedData', function(event) {
console.log('button listener');
});
const anEvent = new CustomEvent('clickedData', {
detail: { foo: 'bar' },
});
clickedData.dispatchEvent(anEvent);
const anEvent = new CustomEvent('clickedData', {
bubbles: true,
detail: { foo: 'bar' },
});
Photo by Zdeněk Macháček on Unsplash

Conclusiones

¿Quieres recibir más artículos como este?

Entre paseo y paseo con Simba desarrollo en Symfony y React

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store