aggiunta di più listener di eventi a un elemento

Question

Quindi il mio dilemma è che non voglio scrivere lo stesso codice due volte. Una volta per l'evento click e un altro per l'evento touchstart.

Ecco il codice originale:

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

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

Come posso compattare questo? Ci deve essere un modo più semplice!

Answer 1

forse è possibile utilizzare una funzione di supporto come questo:

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

È possibile definire una funzione e superarla. Le funzioni anonime non sono speciali in alcun modo, tutte le funzioni possono essere passate come valori.

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

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

function handler(event) { 
    do_something(); 
} 

Answer 3

A meno che la vostra funzione do_something in realtà fa qualcosa con qualsiasi dato argomento, si può semplicemente passare come il gestore di eventi.

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

Answer 4

Per un gran numero di eventi di questo potrebbe aiutare:

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

Aggiornamento 06/2017:

ora che le nuove funzionalità del linguaggio sono più ampiamente disponibili si potrebbe semplificare l'aggiunta di un elenco limitato di eventi che condividono un ascoltatore.

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

Se si desidera gestire un sacco di eventi e hanno esigenze diverse per ogni ascoltatore è anche possibile pass an object che molte persone tendono a dimenticare.

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

So che questa è una vecchia questione, ma ho pensato che alcuni potrebbero trovare questo approccio utile; potrebbe essere applicato a qualsiasi codice simile ripetitivo:

ES6

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

ES5

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