javascript - not - Cómo addeventlistener a múltiples elementos en una sola línea

addeventlistener typescript

Question

Ejemplo 1

Element1.addEventListener ("input", function() {
this function does stuff
});

Ejemplo 2

Element1 && Element2.addEventListener("input", function() {
this function does stuff
});

Puede que no sea correcto gramaticalmente, pero ¿hay alguna forma en que pueda dar a dos elementos el mismo método Dom al mismo tiempo (misma línea) en lugar de tener que escribirlos aparte?

Answer 1

Bueno, si tiene una matriz con los elementos que podría hacer:

let elementsArray = document.querySelectorAll("whatever");
elementsArray.forEach(function(elem) {
elem.addEventListener("input", function() {
//this function does stuff
});
});

Answer 2

Ejemplo para inicializar un detector de eventos único específico para cada elemento.

Puede usar el control deslizante para mostrar los valores en tiempo real o consultar la consola.

En el elemento <input> tengo una etiqueta attr llamada data-whatever . Puede usar eso para personalizar cada escucha de eventos aún más.

sliders = document.querySelectorAll("input");
sliders.forEach(item=> {
item.addEventListener(''input'', (e) => {
console.log(`${item.getAttribute("data-whatever")} is this value: ${e.target.value}`);
item.nextElementSibling.textContent = e.target.value;
});
})

.wrapper {
display: flex;
}
span {
padding-right: 30px;
margin-left: 5px;
}
* {
font-size: 12px
}

<div class="wrapper">
<input type="range" min="1" data-whatever="size" max="800" value="50" id="sliderSize">
<em>50</em>
<span>Size</span>
<br>
<input type="range" min="1" data-whatever="OriginY" max="800" value="50" id="sliderOriginY">
<em>50</em>
<span>OriginY</span>
<br>
<input type="range" min="1" data-whatever="OriginX" max="800" value="50" id="sliderOriginX">
<em>50</em>
<span>OriginX</span>
</div>

Answer 3

Ejemplo:

const element1 = document.querySelector("#element1");
const element2 = document.querySelector("#element2");
[element1, element2].map(element => element.addEventListener("click", function() {
/*some expressions :)*/
}))

Answer 4

Event Bubbling es el concepto importante en javascript, por lo que si puede agregar eventos en DOM directamente, puede guardar algunas líneas de código, sin necesidad de bucles:

document.addEventListener(''click'', function(e){
if(e.target.tagName=="BUTTON"){
alert(''BUTTON CLICKED'');
}
})

Answer 5

La forma más fácil hasta ahora que he aprendido.

// Get an array of buttons from the page
var buttons = document.querySelectorAll(".btns");
// Loop through the resulting array
for(var i = 0; i < buttons.length; i++){
buttons[i].addEventListener("click", function() {
console.log("Hello World");
});
}

Answer 6

No puedo reclamar crédito por esta solución, pero encontré una gran solución aquí.

https://www.kirupa.com/html5/handling_events_for_many_elements.htm

 var theParent = document.querySelector("#theDude");
theParent.addEventListener("click", doSomething, false);
function doSomething(e) {
if (e.target !== e.currentTarget) {
var clickedItem = e.target.id;
alert("Hello " + clickedItem);
}
e.stopPropagation();
}

Answer 7

Si está usando Javascript a través de Electron y tiene una lista de botones, puede usar este código para agregar un EventListener a cada botón. De hecho, estoy usando este método porque los métodos clásicos de Javascript (map (), forEach () ...) ya no eran compatibles.

let buttons = document.getElementsByClassName(''className'');
for(let i = 0; i<buttons.length; i++){
buttons[i].addEventListener(''click'', () => {
/*put your code here*/
});
}

Answer 8

Si no desea tener una variable elementsArray definida por separado, puede llamar a Forach desde una matriz sin nombre con los dos elementos.

[ Element1, Element2 ].forEach(function(element) {
element.addEventListener("input", function() {
this function does stuff
});
});