किसी भी DOM तत्व के लिए अटैच इवेंट हैंडलर का निरीक्षण करें

Question

डोम तत्व के लिए किसी भी घटना से जुड़े कार्यों / कोड को देखने का कोई तरीका है? फायरबग या किसी अन्य उपकरण का उपयोग करना।

Comments

JQuery का उपयोग कर या देशी डोम का उपयोग कर संलग्न?

— एसएलएक्स

@SLaks: अच्छा सवाल है। किसी भी तंत्र का उपयोग करते हुए संलग्न

— क्लाउडियो रेडी

Answer 1

पारंपरिक element.onclick= handlerया HTML का उपयोग करने से जुड़े इवेंट हैंडलर को स्क्रिप्ट या डीबगर से संपत्ति से <element onclick="handler">मामूली रूप से पुनर्प्राप्त किया जा सकता है element.onclick।

ईवेंट स्तर 2 का उपयोग करते हुए अटैच किए गए ईवेंट हैंडलर ईवेंट addEventListenerविधियों और IE attachEventको वर्तमान में स्क्रिप्ट से बिल्कुल भी पुनर्प्राप्त नहीं किया जा सकता है। DOM लेवल 3 को एक बार element.eventListenerListसभी श्रोताओं को प्राप्त करने का प्रस्ताव दिया गया था, लेकिन यह स्पष्ट नहीं है कि क्या यह अंतिम विनिर्देश बना देगा। आज किसी भी ब्राउज़र में कोई कार्यान्वयन नहीं है।

ब्राउज़र एक्सटेंशन के रूप में एक डीबगिंग टूल इन प्रकार के श्रोताओं तक पहुंच प्राप्त कर सकता है, लेकिन मुझे वास्तव में ऐसा करने वाले किसी के बारे में पता नहीं है।

कुछ जेएस फ्रेमवर्क इवेंट बाइंडिंग के रिकॉर्ड को छोड़ देते हैं ताकि वे काम कर सकें। विज़ुअल इवेंट कुछ लोकप्रिय रूपरेखाओं के माध्यम से पंजीकृत श्रोताओं को खोजने के लिए इस दृष्टिकोण को लेता है।

Comments

अब इवेंटबग नामक फायरबग का विस्तार है और कथित तौर पर क्रोम / सफारी में भी इसी तरह की सुविधा है। मैं इस पर एक अधिक लोकप्रिय चर्चा से भी

— जुड़ूंगा

ओपेरा में आप उसके लिए बिल्ट-इन ओपेरा ड्रैगनफ्लाई का उपयोग कर सकते हैं।

— नॉरिल टेम्पेस्ट

HTML टैग चयनित होने पर घटनाओं के लिए FireBug (FireFox के लिए एक्सटेंशन) में एक भाग भी बनाया गया है।

— मूसा हैदरी

EventBug को संस्करण 2 के बाद से FireBug में एकीकृत किया गया है (अब एक "ईवेंट" टैब है)।

— क्रिस राए

फ़ायरफ़ॉक्स 33 के बाद से, इवेंट हैंडलर स्टॉक HTML इंस्पेक्टर में दिखाए जाते हैं ।

— ivan_pozdeev

Answer 2

गूगल क्रोम डेवलपर टूल में तत्वों पैनल 2010 से मध्य 2011 और क्रोम डेवलपर चैनल विज्ञप्ति में क्रोम रिलीज के बाद से इस पड़ा है।

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

हिट command+ option+ iऔर पर मैक OSX Ctrl+ Shift+ iWindows पर क्रोम में इस आग

Comments

Chrome में एलिमेंट्स पैनल ऐसा कैसे करता है?

— वज्रपात

इसके अलावा, हम इनको असाइन करने वाले कोड को कैसे खोज सकते हैं? एक बार जब मुझे इस UI का उपयोग करके एक संदिग्ध ईवेंट हैंडलर मिल जाता है, तो बार हैंडलर के कोड को देखने के लिए मेरे लिए पर्याप्त चौड़ा नहीं है ...

— स्टीवन लू

मुझे यह दृष्टिकोण उलझा हुआ लगता है .. कम से कम मेरे लिए। जब मैंने इवेंट खोला, तो उसमें केवल jQuery इवेंट्स हैं, उस विशेष तत्व के लिए मेरा कस्टम ईवेंट नहीं दिखा। मैं jQuery के साथ संलग्न कस्टम घटनाओं के लिए $ ._ डेटा का उपयोग करता हूं। देखें stackoverflow.com/questions/2008592/...

— stack247

क्या घटना की windowतरह वस्तु पर घटनाओं का निरीक्षण करना संभव है message?

— सेप्टाग्राम

Answer 3

Chrome देव टूल्स ने हाल ही में जावास्क्रिप्ट इवेंट्स की निगरानी के लिए कुछ नए टूल की घोषणा की है ।

टी एल; डॉ

एक निश्चित प्रकार की घटनाओं का उपयोग करके सुनें monitorEvents()।

unmonitorEvents()सुनने को रोकने के लिए उपयोग करें ।

का उपयोग कर एक डोम तत्व के श्रोताओं जाओ getEventListeners()।

ईवेंट श्रोताओं के बारे में जानकारी प्राप्त करने के लिए ईवेंट हियरिंग इंस्पेक्टर पैनल का उपयोग करें।

कस्टम ईवेंट खोजना

मेरी आवश्यकता के लिए, 3 डी पार्टी कोड में कस्टम जेएस घटनाओं की खोज करना, निम्नलिखित दो संस्करण getEventListeners()आश्चर्यजनक रूप से सहायक थे;

• getEventListeners(window)
• getEventListeners(document)

यदि आपको पता है कि ईवेंट नोड श्रोता से जुड़ा हुआ था, तो आप उसके बजाय windowया उसके पास से जुड़े होंगे document।

ज्ञात घटना

आप जानते हैं कि घटना आप जैसे निगरानी करना चाहते हैं, तो clickदस्तावेज़ के मुख्य भाग पर आप निम्न का उपयोग कर सकते हैं: monitorEvents(document.body, 'click');।

अब आपको document.bodyकंसोल में लॉग ऑन होने पर सभी क्लिक घटनाओं को देखना शुरू करना चाहिए ।

Comments

मैंने यह trygetEventListeners (document.getElementById ("inputId")); लेकिन यह

— अमीर हरे रंग की

Answer 4

आप DOM को देखकर सीधे जुड़ी हुई घटनाओं (element.onclick = हैंडलर) को देख सकते हैं। फ़ायरफ़ॉक्स के साथ फायरबग का उपयोग करके आप फ़ायरफ़ॉक्स में jQuery- संलग्न घटनाओं को देख सकते हैं। AddEventListener- गयी ईवेंट्स को फायरबग का उपयोग करते हुए देखने का कोई तरीका नहीं दिखता है। हालाँकि, आप क्रोम डीबगर का उपयोग करके उन्हें क्रोम में देख सकते हैं।

Answer 5

आप अपने पृष्ठ पर कई प्रमुख जावास्क्रिप्ट पुस्तकालयों से सभी वर्तमान में संलग्न घटना संचालकों का निरीक्षण करने के लिए एलन जार्डिन द्वारा दृश्य घटना का उपयोग कर सकते हैं । यह jQuery, YUI और कई अन्य लोगों के साथ काम करता है।

विजुअल इवेंट एक जावास्क्रिप्ट बुकमार्क है, इसलिए सभी प्रमुख ब्राउज़रों के साथ संगत है।

Answer 6

आप इवेंट श्रोताओं पर नज़र रखने के लिए अपने जावास्क्रिप्ट वातावरण का विस्तार कर सकते हैं। लपेटें (या 'अधिभार') कुछ कोड के साथ देशी addEventListener () विधि जो डिब्बे तब से जोड़ा किसी भी घटना श्रोता का रिकॉर्ड रख सकते हैं । आपको रिकॉर्ड रखने के लिए HTMLElement.prototype.removeEventListener का भी विस्तार करना होगा जो कि डोम में क्या हो रहा है, इसे सटीक रूप से दर्शाती है।

केवल चित्रण (बिना कोड) के लिए - यह इस बात का एक उदाहरण है कि आप ऑब्जेक्ट पर पंजीकृत ईवेंट श्रोताओं के रिकॉर्ड रखने के लिए addEventListener को कैसे लपेटेंगे।

var nativeMethod = HTMLElement.prototype.addEventListener;
HTMLElement.prototype.addEventListener = function (type, listener) {
   var el = e.currentTarget;
   if(!(el.eventListeners instanceof Array)) { el.eventListeners = []}
   el.eventListeners.push({'type':type, 'listener':listener});
   nativeMethod.call(el, type, listener);
}