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
   });
});