एक श्रोता के लिए एकाधिक घटनाओं को बाध्यकारी (JQuery के बिना)?

Question

ब्राउज़र घटनाओं के साथ काम करते समय, मैंने मोबाइल उपकरणों के लिए सफारी के टचवेन्ट्स को शामिल करना शुरू कर दिया है। मुझे लगता है कि addEventListener एस सशर्त के साथ ढेर कर रहे हैं। यह प्रोजेक्ट JQuery का उपयोग नहीं कर सकता है।

एक मानक घटना श्रोता:

/* option 1 */ 
window.addEventListener('mousemove', this.mouseMoveHandler, false); 
window.addEventListener('touchmove', this.mouseMoveHandler, false); 

/* option 2, only enables the required event */ 
var isTouchEnabled = window.Touch || false; 
window.addEventListener(isTouchEnabled ? 'touchmove' : 'mousemove', this.mouseMoveHandler, false); 

JQuery के bind कई घटनाओं, इसलिए तरह की अनुमति देता है:

$(window).bind('mousemove touchmove', function(e) { 
    //do something; 
}); 

वहाँ JQuery उदाहरण के रूप में दो घटना श्रोताओं गठबंधन करने के लिए कोई तरीका है? पूर्व:

window.addEventListener('mousemove touchmove', this.mouseMoveHandler, false); 

कोई सुझाव या सुझावों की सराहना की जाती है!

Answer 1

पीओजेएस में, आप एक समय में एक श्रोता जोड़ते हैं। एक ही तत्व पर दो अलग-अलग घटनाओं के लिए एक ही श्रोता को जोड़ना आम बात नहीं है। आप नौकरी करने के लिए अपना खुद का छोटा काम लिख सकते हैं, उदाहरण:

/* Add one or more listeners to an element 
** @param {DOMElement} element - DOM element to add listeners to 
** @param {string} eventNames - space separated list of event names, e.g. 'click change' 
** @param {Function} listener - function to attach for each event as a listener 
*/ 
function addListenerMulti(element, eventNames, listener) { 
    var events = eventNames.split(' '); 
    for (var i=0, iLen=events.length; i<iLen; i++) { 
    element.addEventListener(events[i], listener, false); 
    } 
} 

addListenerMulti(window, 'mousemove touchmove', function(){…}); 

उम्मीद है कि यह अवधारणा को दिखाता है।

संपादित 2016-02-25

Dalgard की टिप्पणी ने मुझे इस पर दोबारा जाने का कारण बना। मुझे लगता है कि एक तत्व पर कई घटनाओं के लिए एक ही श्रोता जोड़ना अब उपयोग में आने वाले विभिन्न इंटरफ़ेस प्रकारों को कवर करने के लिए अधिक आम है, और इसहाक का उत्तर कोड को कम करने के लिए अंतर्निहित तरीकों का एक अच्छा उपयोग प्रदान करता है (हालांकि कम कोड है, स्वयं , जरूरी नहीं कि एक बोनस)। ECMAScript 2015 तीर कार्यों के साथ विस्तारित देता है:

function addListenerMulti(el, s, fn) { 
    s.split(' ').forEach(e => el.addEventListener(e, fn, false)); 
} 

ऐसा ही एक रणनीति से अधिक तत्वों के लिए एक ही श्रोता जोड़ सकता है, लेकिन ऐसा करने के लिए की जरूरत घटना प्रतिनिधिमंडल के लिए एक संकेत हो सकता है।

Answer 2

AddEventListenerevent.type का प्रतिनिधित्व करने वाली एक साधारण स्ट्रिंग लें। तो आपको कई घटनाओं पर फिर से चलाने के लिए एक कस्टम फ़ंक्शन लिखना होगा।

इसे .split ("") का उपयोग करके jQuery में संभाला जा रहा है और फिर प्रत्येक types के लिए ईवेंटलिस्ट सेट करने के लिए सूची में पुनरावृत्त किया जा रहा है।

// Add elem as a property of the handle function 
    // This is to prevent a memory leak with non-native events in IE. 
    eventHandle.elem = elem; 

    // Handle multiple events separated by a space 
    // jQuery(...).bind("mouseover mouseout", fn); 
    types = types.split(" "); 

    var type, i = 0, namespaces; 

    while ((type = types[ i++ ])) { <-- iterates thru 1 by 1 

Answer 3

कुछ कॉम्पैक्ट वाक्य रचना कि वांछित परिणाम प्राप्त होता है, POJS:

("mousemove touchmove".split(" ")).forEach(function(e){ 
     window.addEventListener(e,mouseMoveHandler,false); 
    }); 

Answer 4

मेरे लिए; यह कोड ठीक काम करता है और एक ही (इनलाइन) कार्यों के साथ कई घटनाओं को संभालने के लिए सबसे छोटा कोड है।

var eventList = ["change", "keyup", "paste", "input", "propertychange", "..."]; 
for(event of eventList) { 
    element.addEventListener(event, function() { 
     // your function body... 
     console.log("you inserted things by paste or typing etc."); 
    }); 
} 

Answer 5

ES2015:

let el = document.getElementById("el"); 
let handler =()=> console.log("changed"); 
['change', 'keyup', 'cut'].forEach(event => el.addEventListener(event, handler)); 

Answer 6

इसहाक के जवाब साफ़:

window.onload = window.onresize = (event) => { 
    //Your Code Here 
} 

मैं इस एक जाँच की है:

['mousemove', 'touchmove'].map(function(e) { 
    window.addEventListener(e, mouseMoveHandler); 
}); 

Answer 7

मैं तुम्हारे लिए एक सरल समाधान है बढ़िया काम करता है, प्लस साइड पर यह कॉम्पैक्ट और असम्पीला है यहां अन्य उदाहरणों की तरह ted।