फायरिंग और कब्जा कस्टम घटनाओं

Question

इस परिदृश्य की कल्पना (यह वास्तव में सिर्फ एक परिदृश्य है):

• मैं एक वैश्विक काउंटर है कि हर माउस क्लिक पर वृद्धि हो जाता है।
• जब मैं 50 क्लिक्स तक पहुँचते हैं, मैं नामक कस्टम ईवेंट को सक्रिय करना चाहते हैं 'reachedCount'
• मैं अपनी खिड़की वस्तु रजिस्टर करने के लिए
  window.addEventListener('reachedCount', function(args){alert(args.count);}, false)

तो, मेरी समस्याओं की तरह कुछ के साथ उस घटना पर कब्जा करना चाहते हैं क्या मैं नहीं जानता, और कहीं भी नहीं मिल सकता है कि मैं अपने कार्यक्रम में डंडलर कैसे पास कर सकता हूं। इसके अलावा, मैंने Rikudo पोस्ट की विधि की कोशिश की थी, लेकिन यह आईई लेफ्टिनेंट 9 में काम नहीं करता है।

क्या यह संभव है? कैसे?

Answer 1

function fireEvent(name, target) { 
    //Ready: create a generic event 
    var evt = document.createEvent("Events") 
    //Aim: initialize it to be the event we want 
    evt.initEvent(name, true, true); //true for can bubble, true for cancelable 
    //FIRE! 
    target.dispatchEvent(evt); 
} 

function foobar() { 
    alert("foobar"); 
} 

function testEvents() { 
    window.addEventListener("foobar", foobar, false); //false to get it in bubble not capture. 
    fireEvent("foobar", document); 
} 

इस कोड को Google खोज के 1 मिनट के साथ मिला। http://the.unwashedmeme.com/blog/2004/10/04/custom-javascript-events/

Answer 2

रिकुडो सेनिन के उत्तर का उपयोग करके, आप अपने ईवेंट हैंडलर को पैरामीटर पास कर सकते हैं ताकि उन्हें ईवेंट के अंदर ही डाला जा सके, जैसे कि डोम हैंडलर करते हैं!

function fireEvent(name, target, param1, param2) { 
    //Ready: create a generic event 
    var evt = document.createEvent("Events") 
    //Aim: initialize it to be the event we want 
    evt.initEvent(name, true, true); //true for can bubble, true for cancelable 
    evt.param1 = param1; 
    evt.param2 = param2; 
    //FIRE! 
    target.dispatchEvent(evt); 
} 

function foobar(ev) { 
    alert("foobar" + ' ' + ev.param1 + ' ' + event.param2); 
} 

function testEvents(param1) { 
    window.addEventListener("foobar", foobar, false); //false to get it in bubble not capture. 
    fireEvent("foobar", document, 'test', param1); 
} 

Answer 3

आपके सभी तर्क-घटना के बारे में अन्य सभी जानकारी की तरह समायोजित करें- ईवेंट ऑब्जेक्ट के अंदर ही ले जाना चाहिए। पूरी तरह से आत्मनिर्भर घटना वस्तु सभी उस घटना के बारे में आवश्यक जानकारी रखती है। आपके तर्क मान आमतौर पर सेट होते हैं जब नया कस्टम इवेंट ऑब्जेक्ट बनाया गया (जब ईवेंट निकाल दिया जाता है)।

(सभी उदाहरण कोड के नीचे बिल्कुल सभी अन्य टुकड़े से मेल के टुकड़े वास्तव में, उदाहरण के कुछ खुद से ज्यादा मतलब नहीं हो सकता है;।। जब भी ऐसा होता है पिछले उदाहरण के टुकड़े को देखें)

अपने खुद के तर्क के लिए, कुछ मामलों में आप मौजूदा क्षेत्रों का पुन: उपयोग कर सकता है (या शायद यह भी अपने स्वयं के नए क्षेत्रों को जोड़ने): वास्तव में कैसे इन कि क्या आप का उपयोग कर सकें के आधार पर सेट अलग जायेगा

var newEvent = ... 
newEvent['scrollX'] = your-own-custom-value; 

नया मानकीकृत एचटीएमएल 5 रास्ता, या पुराने ब्राउजर समर्थन पर वापस आना चाहिए। (विभिन्न "शिम्स" जो पुराने ब्राउज़र पर भी कस्टम इवेंट समर्थन जोड़ते हैं, जो कुछ भी प्रदान नहीं करते हैं, यहां शामिल नहीं हैं - उनमें से कई तर्क सेट करने के लिए अपना स्वयं का अनूठा तरीका प्रदान करेंगे।)

var newEvent = new CustomEvent('customname', { propertyname : propertyvalue, 
              anotherpropname : anotherpropvalue, 
               thirdpropname : thirdpropvalue, 
               etcpropname : etcpropvalue } ); 

इसी पुराने विधि कुछ इस तरह दिखेगा:: एचटीएमएल 5 रास्ता "शब्दकोश" (द्वितीय) वस्तु निर्माता के लिए पैरामीटर, कुछ इस तरह शामिल है

var newEvent = document.createEvent(); 
newEvent.initEvent('customname', true, true); 
newEvent['propertyname'] = propertyvalue; 
newEvent['anotherpropname'] = anotherpropvalue; 
newEvent['thirdpropname'] = thirdpropvalue; 
newEvent['etcpropname'] = etcprovalue; 

(ऊपर के उदाहरण भी कर सकते हैं एचटीएमएल 5 कस्टमवेन्ट सह क्या है इसे स्पष्ट करें nstructor वास्तव में कर रहा है।)

इस तरह के मौजूदा संपत्ति नामों का उपयोग करना (या अपनी खुद की संपत्तियां :-) बनाना आम तौर पर अनुशंसित नहीं है, क्योंकि क्रॉस-ब्राउज़र समस्याएं और डिबगिंग परेशानी बहुत गंभीर हो सकती है।एक बार में यह आवश्यक होगा और यह काम करेगा, लेकिन एक सामान्य तकनीक के रूप में इस पर भरोसा न करें। भले ही कुछ प्रकार की घटना वस्तुओं में एक विशेष नामित संपत्ति शामिल हो, फिर भी इसी प्रकार की घटना वस्तुएं नहीं हो सकती हैं। कुछ घटना गुण "केवल पढ़ने के लिए" हो सकते हैं। इवेंट ऑब्जेक्ट्स एक ब्राउज़र से दूसरे ब्राउज़र में और ब्राउज़र संस्करणों के बीच भी आंतरिक रूप से अत्यधिक चरणीय होते हैं। और अपनी खुद की नई संपत्तियां बनाना ब्राउज़र के जावास्क्रिप्ट के कार्यान्वयन को भ्रमित कर सकता है।

इसके बजाय, एक विशेष संपत्ति का उपयोग करें जो कस्टम ईवेंट में आपके उपयोग के लिए "अलग सेट करें" और कुछ भी नहीं: विवरण।

अक्सर आपके पास कई तर्क होंगे, फिर भी आपके उपयोग के लिए केवल एक ही संपत्ति सेट की गई है। तो पारंपरिक दृष्टिकोण हमेशा कुछ इस तरह सिर्फ एक "वस्तु" में अपने सभी तर्क बनाने के लिए, यह है:

var myargs = { my : 1, 
       own : getElementById('foo'); 
      args : { X : 32, Y : 53 } }; 

इस चर स्थापित करने की एचटीएमएल 5 तरीका कुछ ऐसी दिखाई देगी:

var newEvent = new CustomEvent('customname', { bubbles : true, 
              cancelable : true, 
               detail : myargs }); 

बड़े एक ही बात करने के लिए इंटरफ़ेस की तरह कुछ दिखेगा:

var newEvent = document.createEvent(); 
newEvent.initEvent('customname', true, true); 
newEvent['detail'] = myargs; 

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

(दो मौजूदा ईवेंट गुण, 'बुलबुले' और 'रद्द करने योग्य', हमेशा संभावित ईवेंट तर्क सेट किए बिना, प्रत्येक ईवेंट के लिए सेट किया जाना चाहिए । यदि नया HTML5 तरीका उपयोग किया जा रहा है, तो वे हमेशा ऑब्जेक्ट में दो अतिरिक्त पंक्तियों के रूप में दिखाई देंगे जो कस्टमएवेंट कन्स्ट्रक्टर के लिए दूसरा पैरामीटर है। यदि पुराने तरीके का उपयोग किया जा रहा है, तो वे initEvent (...) कॉल के लिए दूसरे और तीसरे पैरामीटर होंगे।)

कस्टम ईवेंट को ट्रिगर करने के दो अलग-अलग तरीके भी प्रदान किए जाते हैं। नया एचटीएमएल 5 तरीका object.dispatchEvent (newEvent) का उपयोग करता है। पुराना तरीका object.fireEvent ('customname', newEvent, false) का उपयोग करता है। यहां "ऑब्जेक्ट" का अर्थ है DOMObject/Element; वास्तव में क्या होता है (यदि कुछ भी हो) तो "ऑब्जेक्ट" एक डोम एलिमेंट के अलावा कुछ है, इस विषय के बाकी हिस्सों की तुलना में और भी ब्राउज़र-विशिष्ट है। (एचटीएमएल 5 तरीके और पुराने तरीके से आम तौर पर काम करता है, लेकिन भ्रमित हो सकता है। भ्रम का एक और लगातार स्रोत फ़ायरएवेंट (...) नामक एक सिस्टम फ़ंक्शन और उसी नाम के साथ अपने स्वयं के फ़ंक्शन को परिभाषित कर रहा है।)

(कस्टम ईवेंट ट्रिगर करने के दो तरीकों के बीच कुछ आर्केन मतभेद हैं। पुराने फ़ायरएवेंट (...) विधि के लिए आपको ईवेंट के नाम को फिर से निर्दिष्ट करने की आवश्यकता होती है भले ही आपने इसे पहले से ही initEvent (...) में निर्दिष्ट किया हो कॉल करें। और पुरानी फायरएवेंट (...) विधि "डिफ़ॉल्ट कार्रवाई" को ट्रिगर नहीं करती है [जो भी इसका मतलब है]।

दूसरी तरफ, कस्टम तर्कों को उसी तरह एक्सेस किया जाता है चाहे एचटीएमएल 5 या घटना की स्थापना की पुरानी विधि का उपयोग किया गया था। यह कुछ इस तरह दिखेगा:

function customhandler(evt) { 
     alert(evt.detail.own); 

कहाँ अपने कस्टम मूल्यों के कुछ तथ्य खुद को वस्तुओं में हैं, डॉट नोटेशन इतने लंबे समय मिल सकता है यह लिखने में कोई त्रुटि दिखाई दे सकता है ... लेकिन यह नहीं है। उदाहरण के लिए:

function customhandler(evt) { 
     alert(evt.detail.args.X); 

ऐसा लगता है कि इनमें से कुछ आईई 9 और उससे नीचे में थोड़ा अलग तरीके से काम कर सकते हैं। उम्मीद है कि समस्याओं को सामान्य रूप से फिर से उपयोग करने का प्रयास करने वाले सामान्य होते हैं-यहां तक ​​कि एक घटना वस्तु के गुण भी बनाते हैं।यदि समस्याएं अधिक व्यापक हैं, तो आप अपनी वेबसाइट पर "क्षमा करें :-(" संदेश डाल सकते हैं, या आप मरने के लिए आईई 6/7/8/9 की प्रतीक्षा कर सकते हैं, या आप क्रॉस-ब्राउजर को अपने आप को हैक करने का प्रयास कर सकते हैं, या आप कुछ प्रकार के शिम/फॉलबैक का उपयोग कर सकते हैं। यह मुझे स्पष्ट नहीं है कि परंपरागत इंटरफ़ेस "बिल्कुल ठीक दिखता है", या सब कुछ के लिए शिम द्वारा प्रदान किए गए वैकल्पिक इंटरफ़ेस का उपयोग करने के लिए एक शिम ढूंढना बेहतर है (भले ही पारंपरिक इंटरफ़ेस उपलब्ध है)

(अस्वीकरण:।। बेशक मैं ऊपर से कुछ के बारे में गलत हो सकता है ... :-)

Answer 4

जवाब ऊपर पदावनत हो रहे हैं

सबसे पहले मैं नहीं होगा पैरामीटर पास करने के लिए अज्ञात कार्यों का उपयोग करें घटना हैंडलर। ऐसा नहीं है कि मैंने देखा है कि किसी ने इसका जवाब उनके जवाब में दिया है; आपको बस इससे बचने की जरूरत है। ऐसा इसलिए है क्योंकि जब आप ईवेंट श्रोताओं को हटाते हैं तो आपको हैंडलर का उल्लेख करने की आवश्यकता होती है। यदि हैंडलर अज्ञात है, तो आप श्रोता को हटा नहीं सकते हैं।

नया कस्टमएवेंट बनाएं।

var data = { x:20, y:30, rotationY: 60 }, 
    end = new CustomEvent('MOTION_FINISHED', { detail: data }); 
    this.dispatchEvent(end); 

ऐसा लगता है कि संपत्ति के विवरण को केवल पैरामीटर पास करने की अनुमति है। मैंने 'बुलबुले' और 'रद्द करने योग्य' भी पढ़ा है [एसआईसी: गंदा अमेरिकी वर्तनी] गुण उपलब्ध हैं, लेकिन आपने अपने प्रश्न में उन लोगों का उल्लेख नहीं किया है।

अपने मानकों को प्राप्त करने के लिए:

function _handler(e){ 
    var x = (e.detail && e.detail.x) || 0; 
}