मैं जावास्क्रिप्ट में कस्टम इवेंट क्लास कैसे बना सकता हूं?

Question

मैं एक्शनस्क्रिप्ट के समान कस्टम इवेंट क्लास कैसे बना सकता हूं? मेरा मतलब यह है कि मैं एक वर्ग है जिसका उपयोग मैं अपने स्वयं के कार्यक्रमों को आग लगाने के लिए कर सकता हूं, आवश्यक डेटा भेज सकता हूं।

मैं ऐसा करने के लिए वाईयूआई या jQuery जैसे तृतीय-पक्ष पुस्तकालयों का उपयोग नहीं करना चाहता हूं। मेरा लक्ष्य इस तरह दिखने वाला एक ईवेंट भेजने में सक्षम होना है।

document.addEventListener("customEvent", eventHandler, false); 

function eventHandler(e){ 
    alert(e.para1); 
} 

document.dispatchEvent(new CustomEvent("customEvent", para1, para2)); 

कृपया कोई तृतीय पक्ष लाइब्रेरी समाधान नहीं है।

Answer 1

मेरे लिए काम करने वाली एक विधि document.createEvent() को कॉल करना था और इसे window.dispatchEvent() से प्रेषित करना था।

var event = document.createEvent("Event"); 
    event.initEvent("customEvent", true, true); 
    event.customData = getYourCustomData(); 
    window.dispatchEvent(event); 

Answer 2

यह वास्तव में इतना कठिन नहीं है - इतनी सारी घटना परिभाषाएं नहीं हैं, केवल तीन संस्करण हैं। पहले एक corect एक (addEventListener), तो वहाँ आईई रास्ता (attachEvent) है और फिर वहाँ पुराने ब्राउज़र (element.onevent = function)

के लिए संगतता रास्ता तो एक पूरी घटना समाधान से निपटने कुछ इस तरह दिखाई देगा:

setEvent = function(element, eventName, handler){ 
    if('addEventListener' in element){ 
    //W3 
    element.addEventListener(eventName,handler,false); 
    }else if('attachEvent' in elm){ 
    //IE 
    elm.attachEvent('on'+eventName,handler) 
    }else{ 
    // compatibility 
    elm['on'+eventName] = handler; 
    } 
} 

और स्पष्ट करने के लिए घटनाओं:

clearEvent = function(element, eventName, handler){ 
    if('removeEventListener' in element){ 
    //W3 
    element.removeEventListener(eventName,handler,false); 
    }else if('detachEvent' in elm){ 
    //IE 
    elm.detachEvent('on'+eventName,handler) 
    }else{ 
    // compatibility 
    elm['on'+eventName] = null; 
    } 
} 

और एक उदाहरण:

setEvent(document, "click", function(){alert('hello world!');}); 
clearEvent(document, "click", function(){alert('hello world!');}); 

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

Answer 3

यह जॉन Resig द्वारा:

function addEvent(obj, type, fn) { 
    if (obj.attachEvent) { 
    obj['e'+type+fn] = fn; 
    obj[type+fn] = function(){obj['e'+type+fn](window.event);} 
    obj.attachEvent('on'+type, obj[type+fn]); 
    } else 
    obj.addEventListener(type, fn, false); 
} 
function removeEvent(obj, type, fn) { 
    if (obj.detachEvent) { 
    obj.detachEvent('on'+type, obj[type+fn]); 
    obj[type+fn] = null; 
    } else 
    obj.removeEventListener(type, fn, false); 
} 

http://ejohn.org/projects/flexible-javascript-events/ पर अपने ब्लॉग पोस्ट में अधिक।

Answer 4

मैं यहां पार्टी के लिए थोड़ा देर हो चुकी हूं, लेकिन एक ही चीज़ की खोज कर रहा था। मैं पहले जवाब (उपर्युक्त) पर उत्सुक नहीं हूं क्योंकि यह कस्टम ईवेंट को प्रबंधित करने के लिए दस्तावेज़ पर निर्भर करता है। यह खतरनाक है क्योंकि यह वैश्विक है और संभावित रूप से एक और लिपि के साथ संघर्ष कर सकता है कि स्क्रिप्ट संयोग से उसी कस्टम घटना पर भरोसा करे।

सबसे अच्छा समाधान मैंने पाया यहाँ है: Nicholas C. Zakas - Custom Events in Javascript

दुर्भाग्य से, के बाद से जावास्क्रिप्ट विरासत कीवर्ड का समर्थन नहीं करता है, यह प्रोटोटाइप के साथ एक सा गन्दा है, लेकिन यह निश्चित रूप से चीजों को स्वच्छ रहता है।

Answer 5

मैं केवल एक समर्थित हैंडलर को एक नए नामस्थान में निर्दिष्ट करने की सोच रहा था यानी एक समर्थित घटना का संदर्भ। नीचे दिया गया कोड काम करता है (इसे क्रोम के कंसोल में पेस्ट करें) लेकिन आप इसे एक बेहतर प्रारूप में लिख सकते हैं, और आपके पास अतिरिक्त सहायक विधियां (जो खुद को फिर से परिभाषित कर सकती हैं), xBrowser समर्थन के लिए, और समर्थन प्रकारों को स्नीफ करने के लिए (जो बाद में आप जो पथ का उपयोग करने के लिए, आप समारोह में ही फिर से परिभाषित करना होगा पता लगाया है। मुझे आशा है कि मैं क्या नीचे है मदद करता है।

var de = document.documentElement || document.getElementsByTagName[0]; 

function all(){ console.log('all') }; 

var customEventForSomeSpecificElement = function customEventForSomeSpecificElement() { 
    return ({ 
      customEvent: function() { 
       if ('onclick' in de) { 
        return 'click'; 
       } 
      }, 
      init: function(){ return this.customEvent(); } 
     }).init(); 
}(); 

de.addEventListener(customEventForSomeSpecificElement, all, false); 

Answer 6

जब डोम तत्वों का उपयोग घटनाओं दलाली करने यह सरल है।

को देखते हुए एक तत्व:

var element = document.querySelector('div#rocket'); 

एक ग्राहक के लिए सदस्यता के लिए:

element.addEventListener('liftoff', function(e) 
{ 
    console.log('We have liftoff!'); 
}); 

फिर प्रेषण करने के लिए/बढ़ाने/घटना आग, का उपयोग इस कोड:

element.dispatch(new Event('liftoff'));