agregar múltiples detectores 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 click y otra para el evento touchstart.

Aquí es 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 liberar espacio en esto? ¡TIENE QUE haber una manera más simple!

Answer 1

Tal vez usted puede utilizar una función de ayuda de esta manera:

// 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 2

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

var elem = document.getElementById('first'); 

elem.addEventListener('touchstart', handler, false); 
elem.addEventListener('click', handler, false); 

function handler(event) { 
    do_something(); 
} 

Answer 3

A menos que su función do_something realmente hace algo con los argumentos dados, sólo puede pasarlo como el controlador de eventos.

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

Answer 4

Para un gran número de eventos que esto podría ayudar:

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

actualización 06/2017:

Ahora que las nuevas características del lenguaje son más accesibles que podría simplificar la adición de una lista limitada de eventos que comparten un oyente.

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

Si desea manejar un montón de eventos y tienen diferentes requisitos por oyente puede también pass an object la que la mayoría de la gente tiende a olvidar.

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 5

Sé que esto es una vieja pregunta, pero pensé que algunos podrían encontrar este enfoque útil; se podría aplicar a cualquier código de manera similar repetitivo:

ES6

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

ES5

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