एक श्रोता (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);

किसी भी सुझाव या सुझाव की सराहना की है!

Comments

@RobG शायद क्योंकि सवाल पूछ रहा है कि jQuery की कार्यक्षमता में से कुछ को कैसे दोहराया जाए। मुझे यकीन नहीं है कि यह टैग के लिए उचित उपयोग है या नहीं।

— माइकल मार्टिन-स्मकर

काफी उचित, बस मुझे लग रहा था कि प्रश्न की आवश्यकता नहीं थी। हटाए जाने पर थोड़ा झपकीदार लगता है।

— रॉब

Answer 1

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

/* 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 को संपादित करें

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

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

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

Comments

वाक्य के लिए धन्यवाद "It is not common to add the same listener for two different events on the same element."कभी-कभी (हरियाली) देवों को यह जानने के लिए सुनने की आवश्यकता होती है कि वे इसे सही कर रहे हैं :)

— इवान डर्स्ट

क्या आपका मतलब "यह असामान्य नहीं है"?

— दालगार्ड

@ डैलगार्ड — यह अब अधिक सामान्य है कि स्पर्श डिवाइस अधिक सामान्य हैं, लेकिन केवल सीमित संख्या में घटनाओं के लिए (जैसे मूसमोव और टचमोव)। यह आवश्यक है कि भौतिक वस्तुओं के बाद नामकरण की घटनाओं की छोटी दृष्टि को दर्शाता है, सूचक चाल अधिक उपयुक्त हो सकता है। इसे स्पर्श या अन्य उपकरण द्वारा कार्यान्वित किया जा सकता है। चूहों (या पति) से पहले एक्स / वाई व्हील थे, कुछ मैंने इस्तेमाल किया है जिनके हाथ और पैर के पहिए (1970 के दशक के स्टेकोमीटर) थे। ट्रैक बॉल और गोले भी हैं, जो 3 डी में चलते हैं।

— रॉब

@RobG: मैं जिस API से काम कर रहा हूं वह DOM है, और हां, इसकी कमियां हैं लीजन :) लेकिन यह केवल श्रोताओं में डुप्लिकेट कोड से बचने का सवाल हो सकता है जो समान हैं।

— दालगार्ड

@ PedroFerreira- बेशक, वर्तमान में उपयोग में आने वाले आधे से अधिक ब्राउज़र तीर के कार्यों का समर्थन नहीं करते हैं, लेकिन वे खेलने में मज़ेदार हैं और हमेशा बैबल है । ;-)

— रॉबिन

Answer 2

वांछित परिणाम प्राप्त करने वाले कुछ कॉम्पैक्ट सिंटैक्स, POJS:

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

Comments

या सीधे['mousemove', 'touchmove'].forEach(...)

— Dan Dascalescu

+1 और इसके लिए "ECMAScript 2015 एरो फ़ंक्शंस" एक्सटेंशन की ज़रूरत नहीं है! ;-)

— पेड्रो

@ ज़करबर्ग के साथ शुरू करने के लिए, सरणी को हार्डकोड करने के बजाय आपने स्ट्रनिंग को हार्डकोड किया और फिर इसे विभाजित किया, क्या आप वास्तव में निश्चित हैं कि यह जाने का रास्ता है? क्या आपको यकीन है कि यह लिखने का सबसे पठनीय तरीका है? ['mousemove', 'touchmove'].forEach(function(event) { window.addEventListener(event, handler);}); यह न केवल अधिक पठनीय होगा बल्कि स्ट्रिंग को विभाजित करने और फिर परिणामित सरणी में प्रत्येक आइटम के लिए फ़ंक्शन चलाने के लिए बहुत तेज़ नहीं होगा।

— इरोब अल असिमी

@IharobAlAsimi यह कोड 4 साल पहले लिखा गया था, मैंने उस समय में अपना स्पेसबार पाया था। स्ट्रिंग विभाजन ओपी के एक स्ट्रिंग के उपयोग से संबंधित था

— इसहाक

@IharobAlAsimi मैंने कोड नहीं लिखा था। आपने कहा कि यह अपठनीय था। स्पष्ट रूप से यह आपके बाद से नहीं है और मैं दोनों कोड पढ़ने में सक्षम हैं। यह व्याकरण पर बहस करने जैसा है। सभी प्रोग्रामर 99% कोड को अच्छी तरह से पढ़ने में सक्षम हैं

— zuckerburg

Answer 3

इसहाक का जवाब सफाई:

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

संपादित करें

ES6 सहायक समारोह:

function addMultipleEventListener(element, events, handler) {
  events.forEach(e => element.addEventListener(e, handler))
}

Comments

FYI करें: मानचित्र! = ForEach

— jpoppe

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

Comments

बिल्कुल वही, जिसकी मुझे तलाश है। धन्यवाद!

— एलहरोनी

Answer 5

ES2015:

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

Comments

वैकल्पिक रूप से for...ofलूप का उपयोग करते हुए

— दोस्त

Answer 6

मेरे पास आपके लिए एक सरल उपाय है:

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

मैंने इसका परीक्षण किया है कि यह बहुत अच्छा काम करता है, साथ ही यह दूसरे उदाहरणों की तरह कॉम्पैक्ट और सरल है।

Comments

केवल एक .onload संभव है। शायद आप एक पुराने श्रोता को ओवरराइट कर दें। आपके पर्यावरण के आधार पर यह एक समस्या हो सकती है।

— HolgerJeromin

Answer 7

AddEventListener एक सरल स्ट्रिंग लेती है जो Event.type का प्रतिनिधित्व करती है । इसलिए आपको कई घटनाओं पर पुनरावृति करने के लिए एक कस्टम फ़ंक्शन लिखने की आवश्यकता है।

यह .split ("") का उपयोग करके jQuery में संभाला जा रहा है और फिर प्रत्येक के लिए EventListeners सेट करने के लिए सूची पर पुनरावृति 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 8

यह कैसे करना है:

const troll = document.getElementById('troll');

['mousedown', 'mouseup'].forEach(type => {
	if (type === 'mousedown') {
		troll.addEventListener(type, () => console.log('Mouse is down'));
	}
        else if (type === 'mouseup') {
                troll.addEventListener(type, () => console.log('Mouse is up'));
        }
});

img {
  width: 100px;
  cursor: pointer;
}

<div id="troll">
  <img src="http://images.mmorpg.com/features/7909/images/Troll.png" alt="Troll">
</div>