dodawanie wielu detektorów zdarzeń do jednego elementu

Question

Tak więc moim dylematem jest to, że nie chcę dwa razy pisać tego samego kodu. Raz dla zdarzenia kliknięcia i innego dla zdarzenia touchstart.

Oto oryginalny kod:

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

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

Jak mogę kompaktowy to? Musi być prostszy sposób!

Answer 1

Może można użyć funkcji pomocnika takiego:

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

Możesz po prostu zdefiniować funkcję i przekazać ją. Funkcje anonimowe nie są w żaden szczególny sposób, wszystkie funkcje mogą być przekazywane jako wartości.

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

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

function handler(event) { 
    do_something(); 
} 

Answer 3

O ile funkcja do_something rzeczywiście robi coś z dowolnych argumentów, można po prostu przekazać go jako obsługi zdarzeń.

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

Answer 4

dla dużej liczby zdarzeń, to może pomóc:

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

Aktualizacja 06/2017:

Teraz, nowe funkcje językowe są coraz szerzej dostępne można uprościć dodając ograniczoną listę zdarzeń, które mają jednego słuchacza.

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

Jeśli chcesz obsługiwać wiele zdarzeń i mają różne wymagania dla słuchacza można również pass an object których większość ludzi tendencję do zapominania.

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

wiem, jest to stara sprawa, ale myślałem, że niektórzy mogą znaleźć to podejście użyteczne; to może być stosowane do każdego podobnie powtarzalnego kodu:

ES6

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

ES5

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