एकाधिक ईवेंट श्रोताओं को एक तत्व

Question

में जोड़ना तो मेरी दुविधा यह है कि मैं दो बार एक ही कोड लिखना नहीं चाहता हूं। एक बार क्लिक ईवेंट के लिए और touchstart ईवेंट के लिए।

यहाँ मूल कोड है:

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

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

मैं यह कैसे संकुचित कर सकते हैं? एक आसान तरीका होना है!

Answer 1

हो सकता है कि आप इस तरह से एक सहायक समारोह का उपयोग कर सकते हैं:

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

आप बस एक फ़ंक्शन परिभाषित कर सकते हैं और इसे पास कर सकते हैं। बेनामी कार्य किसी भी तरह से विशेष नहीं हैं, सभी कार्यों को मूल्यों के रूप में चारों ओर पारित किया जा सकता है।

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

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

function handler(event) { 
    do_something(); 
} 

Answer 3

जब तक आपकी do_something समारोह वास्तव में किसी भी तर्क के साथ कुछ करता है, तो आप सिर्फ यह ईवेंट हैंडलर के रूप में पारित कर सकते हैं।

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

Answer 4

घटनाओं की बड़ी संख्या के लिए यह मदद कर सकता है:

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

अद्यतन 06/2017:

अब जब कि नई भाषा सुविधाओं और अधिक व्यापक रूप आप एक सीमित सूची शामिल करना आसान बनाने सकता है उपलब्ध हैं एक श्रोता साझा करने वाली घटनाओं का।

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

आप घटनाओं की बहुत सारी संभाल और आप भी pass an object जो ज्यादातर लोगों करते हैं भूल जाते हैं कर सकते हैं श्रोता प्रति विभिन्न आवश्यकताओं करना चाहते हैं।

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

मैं जानता हूँ कि यह एक पुराने सवाल है, लेकिन मैंने सोचा कि कुछ इस दृष्टिकोण उपयोगी लग सकते; यह किसी भी इसी तरह दोहराव कोड को लागू किया जा सकता है:

ES6

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

ES5

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