javascript - español - attachevent

agregando múltiples escuchas de eventos a un elemento

Question

Así que mi dilema es que no quiero escribir el mismo código dos veces. Una vez para el evento clic y otro para el evento touchstart .

Aquí está el código original:

document.getElementById(''first'').addEventListener(''touchstart'', function(event) {
do_something();
});
document.getElementById(''first'').addEventListener(''click'', function(event) {
do_something();
});

¿Cómo puedo compactar esto? ¡Tiene que haber una manera más simple!

Answer 1

A menos que su función do_something realmente haga algo con cualquier argumento dado, puede pasarlo como el controlador de eventos.

const el = document.querySelector("#myId");
const eventHandler = {
// called for each event on this element
handleEvent(evt) {
switch (evt.type) {
case "click":
case "touchstart":
// click and touchstart share click handler
this.handleClick(e);
break;
case "touchend":
this.handleTouchend(e);
break;
default:
this.handleDefault(e);
}
},
handleClick(e) {
// do something
},
handleTouchend(e) {
// do something different
},
handleDefault(e) {
console.log("unhandled event: %s", e.type);
}
}
el.addEventListener(eventHandler);

Answer 2

Este mini javascript libary (1.3 KB) puede hacer todas estas cosas

https://github.com/Norair1997/norjs/

nor.event(["#first"], ["touchstart", "click"], [doSomething, doSomething]);

Answer 3

Para una gran cantidad de eventos, esto podría ayudar:

var elem = document.getElementById(''first'');
elem.addEventListener(''touchstart'', handler, false);
elem.addEventListener(''click'', handler, false);
function handler(event) {
do_something();
}

Actualización 06/2017:

Ahora que las nuevas funciones de idioma están más disponibles, podría simplificar la adición de una lista limitada de eventos que comparten un oyente.

var first = document.getElementById(''first'');
first.addEventListener(''touchstart'', do_something, false);
first.addEventListener(''click'', do_something, false);

Si desea manejar muchos eventos y tiene diferentes requisitos por oyente, también puede pasar un objeto que la mayoría de la gente tiende a olvidar.

var element = document.getElementById("myId");
var myEvents = "click touchstart touchend".split(" ");
var handler = function (e) {
do something
};
for (var i=0, len = myEvents.length; i < len; i++) {
element.addEventListener(myEvents[i], handler, false);
}

Answer 4

Puedes definir una función y pasarla. Las funciones anónimas no son especiales de ninguna manera, todas las funciones pueden pasarse como valores.

const element = document.querySelector("#myId");
function handleEvent(e) {
// do something
}
// I prefer string.split because it makes editing the event list slightly easier
"click touchstart touchend touchmove".split(" ")
.map(name => element.addEventListener(name, handleEvent, false));

Answer 5

Sé que esta es una pregunta antigua, pero pensé que a algunos les podría resultar útil este enfoque; podría aplicarse a cualquier código similarmente repetitivo:

ES6

[''click'',''ontouchstart''].forEach( evt =>
element.addEventListener(evt, dosomething, false)
);

ES5

[''click'',''ontouchstart''].forEach( function(evt) {
element.addEventListener(evt, dosomething, false);
});

Answer 6

Tal vez puedas usar una función de ayuda como esta:

// events and args should be of type Array
function addMultipleListeners(element,events,handler,useCapture,args){
if (!(events instanceof Array)){
throw ''addMultipleListeners: ''+
''please supply an array of eventstrings ''+
''(like ["click","mouseover"])'';
}
//create a wrapper to be able to use additional arguments
var handlerFn = function(e){
handler.apply(this, args && args instanceof Array ? args : []);
}
for (var i=0;i<events.length;i+=1){
element.addEventListener(events[i],handlerFn,useCapture);
}
}
function handler(e) {
// do things
};
// usage
addMultipleListeners(
document.getElementById(''first''),
[''touchstart'',''click''],
handler,
false);

Answer 7

Tengo una pequeña solución que se adhiere al prototipo.

document.getElementById(''first'').addEventListener(''touchstart'',myFunction);
document.getElementById(''first'').addEventListener(''click'',myFunction);
function myFunction(e){
e.preventDefault();e.stopPropagation()
do_something();
} 

Le permite darle una cadena o matriz. La cadena se puede separar con un espacio (''''), una coma ('','') O un punto y coma ('';'')

Answer 8

 EventTarget.prototype.addEventListeners = function(type, listener, options,extra) {
let arr = type;
if(typeof type == ''string''){
let sp = type.split(/[/s,;]+/);
arr = sp;
}
for(let a of arr){
this.addEventListener(a,listener,options,extra);
}
};

Debería usar e.stopPropagation() porque, de lo contrario, su función se activará dos veces en el dispositivo móvil.