दिलचस्प पोस्ट
रोटेशन मैट्रिक्स को क्वाटरनियन रोटेशन कन्वर्ट करें? आर में समय अंतर की गणना बेंचमार्किंग (बैंग्स का उपयोग करके अजगर बनाम सी ++) और (अंडाकार) केंद्र क्षैतिज रूप से div के भीतर छवि संरेखित करें इकाई फ़्रेमवर्क 4 – मॉडल से अद्यतन डेटाबेस स्कीमा। टेबल डेटा को पोंछते बिना PHP सरणी तुलना करें .NET – शब्दकोश लॉकिंग बनाम ConcurrentDictionary यूआईएलएबल और एनएसएलिंकएट्रीट्यूबनाम: लिंक क्लिक करने योग्य नहीं है आर में एक सशर्त (`if`) कथन के आधार पर एक डेटा फ्रेम में एक मान को बदलें जेटेल फाइलटरिंग के लिए उपयोग की जा रही तालिकासेल (एस) में सबस्ट्रिंग को हाइलाइट करता है आप बिल्डर पैटर्न का उपयोग कब करेंगे? आप UICollectionView प्रवाह में सेल के बीच की रिक्ति कैसे निर्धारित करते हैं विशाल बफड़े छवि बनाने क्या जावास्क्रिप्ट डेम्यूनिफायर (डीओबीफसकेटर) जैसी कोई चीज है? यूआईटीबबार में कस्टम रंग

डीबग करना या जावास्क्रिप्ट कोड से डॉम नोड पर ईवेंट श्रोताओं को कैसे ढूंढें?

मेरे पास एक ऐसा पृष्ठ है जहां कुछ घटना श्रोताओं इनपुट बॉक्स और चयन बक्से से जुड़े हैं। क्या पता लगाने का कोई तरीका है कि श्रोता क्या एक विशेष डोम नोड देख रहे हैं और किस घटना के लिए?

घटनाओं का उपयोग करके संलग्न किया जाता है:

  1. प्रोटोटाइप की Event.observe
  2. डोम के addEventListener ;
  3. तत्व तत्व तत्व के रूप में। क्लिक करें

Solutions Collecting From Web of "डीबग करना या जावास्क्रिप्ट कोड से डॉम नोड पर ईवेंट श्रोताओं को कैसे ढूंढें?"

यदि आपको पृष्ठ पर क्या हो रहा है की जांच करने की आवश्यकता है, तो आप विजुअल इवेंट बुकमार्कलेट की कोशिश कर सकते हैं।

अद्यतन : दृश्य इवेंट 2 उपलब्ध;

यह इस बात पर निर्भर करता है कि कैसे घटनाएं जुड़ी हुई हैं। उदाहरण के लिए मान लें कि हमारे पास निम्न क्लिक हैंडलर हैं:

 var handler = function() { alert('clicked!') }; 

हम इसे अपने तत्वों को अलग-अलग तरीकों से जोड़ते हुए जा रहे हैं, कुछ ऐसे हैं जो निरीक्षण और कुछ नहीं करते हैं।

विधि ए) एकल घटना हैंडलर

 element.onclick = handler; // inspect alert(element.onclick); // alerts "function() { alert('clicked!') }" 

विधि बी) एकाधिक ईवेंट हैंडलर

 if(element.addEventListener) { // DOM standard element.addEventListener('click', handler, false) } else if(element.attachEvent) { // IE element.attachEvent('onclick', handler) } // cannot inspect element to find handlers 

विधि सी): jQuery

 $(element).click(handler); 
  • 1.3.x

     // inspect var clickEvents = $(element).data("events").click; jQuery.each(clickEvents, function(key, value) { alert(value) // alerts "function() { alert('clicked!') }" }) 
  • 1.4.x (ऑब्जेक्ट के अंदर हेन्डलर को स्टोर करता है)

     // inspect var clickEvents = $(element).data("events").click; jQuery.each(clickEvents, function(key, handlerObj) { alert(handlerObj.handler) // alerts "function() { alert('clicked!') }" // also available: handlerObj.type, handlerObj.namespace }) 

(देखें jQuery.data और jQuery.data )

विधि डी): प्रोटोटाइप (गन्दा)

 $(element).observe('click', handler); 
  • 1.5.x

     // inspect Event.observers.each(function(item) { if(item[0] == element) { alert(item[2]) // alerts "function() { alert('clicked!') }" } }) 
  • 1.6 से 1.6.0.3, समावेशी (यहां बहुत मुश्किल हो गया)

     // inspect. "_eventId" is for < 1.6.0.3 while // "_prototypeEventID" was introduced in 1.6.0.3 var clickEvents = Event.cache[element._eventId || (element._prototypeEventID || [])[0]].click; clickEvents.each(function(wrapper){ alert(wrapper.handler) // alerts "function() { alert('clicked!') }" }) 
  • 1.6.1 (थोड़ा बेहतर)

     // inspect var clickEvents = element.getStorage().get('prototype_event_registry').get('click'); clickEvents.each(function(wrapper){ alert(wrapper.handler) // alerts "function() { alert('clicked!') }" }) 

क्रोम, फ़ायरफ़ॉक्स, विवाल्डी और सफ़ारी समर्थन getEventListeners(domElement) उनके डेवलपर उपकरण कंसोल में।

अधिकांश डिबगिंग प्रयोजनों के लिए, इसका उपयोग किया जा सकता है

इसका इस्तेमाल करने के लिए नीचे एक बहुत अच्छा संदर्भ है: https://developers.google.com/chrome-developer-tools/docs/commandline-api#geteventlistenersobject

क्रोम या सफारी ब्राउज़र में वेबकिट इंस्पेक्टर अब ऐसा करते हैं। जब आप एलिमेंट्स फलक में इसे चुनते हैं तो यह एक DOM तत्व के लिए ईवेंट श्रोताओं को प्रदर्शित करेगा

जावास्क्रिप्ट में सभी घटना श्रोताओं को सूचीबद्ध करना संभव है : यह मुश्किल नहीं है; आपको बस HTML तत्वों के prototype की विधि (श्रोताओं को जोड़ने से पहले ) हैक करना होगा।

 function reportIn(e){ var a = this.lastListenerInfo[this.lastListenerInfo.length-1]; console.log(a) } HTMLAnchorElement.prototype.realAddEventListener = HTMLAnchorElement.prototype.addEventListener; HTMLAnchorElement.prototype.addEventListener = function(a,b,c){ this.realAddEventListener(a,reportIn,c); this.realAddEventListener(a,b,c); if(!this.lastListenerInfo){ this.lastListenerInfo = new Array()}; this.lastListenerInfo.push({a : a, b : b , c : c}); }; 

अब प्रत्येक लंगर तत्व ( a ) के पास lastListenerInfo संपत्ति होगी, जिसमें उसके सभी श्रोताओं होंगे। और यह भी अनाम कार्यों के साथ श्रोताओं को हटाने के लिए काम करता है

( इस प्रश्न के उत्तर को फिर से लिखना क्योंकि यह प्रासंगिक है।)

डिबगिंग करते समय, अगर आप केवल घटनाओं को देखना चाहते हैं, तो मैं सुझाता हूं …

  1. विज़ुअल इवेंट
  2. क्रोम के डेवलपर टूल के एलिमेंट्स सेक्शन: एक एलीमेंट का चयन करें और नीचे दाईं ओर "इवेंट श्रोताओं" को ढूंढें (फ़ायरफ़ॉक्स में समान)

यदि आप अपने कोड में ईवेंट का उपयोग करना चाहते हैं, और आप संस्करण 1.8 से पहले jQuery का उपयोग कर रहे हैं, तो आप इसका उपयोग कर सकते हैं:

 $(selector).data("events") 

घटनाओं को पाने के लिए संस्करण 1.8 के अनुसार, .data ("events") का उपयोग बंद हो रहा है ( यह बग टिकट देखें)। आप उपयोग कर सकते हैं:

 $._data(element, "events") 

एक अन्य उदाहरण: सभी क्लिक ईवेंट को कंसोल के किसी निश्चित लिंक पर लिखें:

 var $myLink = $('a.myClass'); console.log($._data($myLink[0], "events").click); 

(काम के उदाहरण के लिए http://jsfiddle.net/HmsQC/ देखें)

दुर्भाग्यवश, $ ._ डेटा का उपयोग करके डिबगिंग को छोड़कर यह अनुशंसित नहीं है क्योंकि यह एक आंतरिक jQuery संरचना है, और भविष्य के रिलीज में बदल सकता है दुर्भाग्यवश मैं घटनाओं तक पहुंचने के अन्य आसान साधनों के बारे में नहीं जानता।

1: Prototype.observe Element.addEventListener का उपयोग करता है ( स्रोत कोड देखें)

2: जोड़ा श्रोताओं को याद करने के लिए आप Element.addEventListener को ओवरराइड कर सकते हैं (काम संपत्ति EventListenerList DOM3 विशिष्ट प्रस्ताव से हटा दिया गया था) किसी ईवेंट को संलग्न करने से पहले इस कोड को चलाएं:

 (function() { Element.prototype._addEventListener = Element.prototype.addEventListener; Element.prototype.addEventListener = function(a,b,c) { this._addEventListener(a,b,c); if(!this.eventListenerList) this.eventListenerList = {}; if(!this.eventListenerList[a]) this.eventListenerList[a] = []; this.eventListenerList[a].push(b); }; })(); 

सभी घटनाओं को इनके द्वारा पढ़ें:

 var clicks = someElement.eventListenerList.click; if(clicks) clicks.forEach(function(f) { alert("I listen to this function: "+f.toString()); }); 

और Element.eventListenerListElement.eventListenerList Element.removeEventListener को ओवरराइड करने के लिए मत भूलें, कस्टम Element.eventListenerList से इवेंट को निकालने के Element.eventListenerList

3: Element.onclick संपत्ति की विशेष देखभाल की जरूरत है:

 if(someElement.onclick) alert("I also listen tho this: "+someElement.onclick.toString()); 

4: Element.onclick मत भूलें। Element.onclick सामग्री विशेषता: ये दो अलग-अलग चीज़ें हैं:

 someElement.onclick = someHandler; // IDL attribute someElement.setAttribute("onclick","otherHandler(event)"); // content attribute 

तो आपको इसे भी संभालना होगा:

 var click = someElement.getAttribute("onclick"); if(click) alert("I even listen to this: "+click); 

विज़ुअल इवेंट बुकमार्कलेट (सबसे लोकप्रिय जवाब में उल्लिखित) केवल कस्टम लाइब्रेरी हैंडलर कैश को चुराता है:

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

जैसे, दृश्य ईवेंट को ईवेंट दिखाने के क्रम में, यह जावास्क्रिप्ट लायब्रेरी से ईवेंट जानकारी को पार्स करने में सक्षम होना चाहिए।

तत्व ओवरराइडिंग संदिग्ध हो सकती है (यानी क्योंकि लाइव संग्रह जैसे कुछ DOM विशिष्ट सुविधाएं हैं, जो जेएस में कोडित नहीं हैं), लेकिन यह eventListenerList समर्थन को मूल रूप से देता है और यह Chrome, Firefox और Opera में काम करता है (IE7 में काम नहीं करता है )।

आप अपने <head> के शीर्ष पर डालकर ईवेंट श्रोताओं को प्रबंधित करने के लिए देशी DOM विधियों को लपेट कर सकते हैं:

 <script> (function(w){ var originalAdd = w.addEventListener; w.addEventListener = function(){ // add your own stuff here to debug return originalAdd.apply(this, arguments); }; var originalRemove = w.removeEventListener; w.removeEventListener = function(){ // add your own stuff here to debug return originalRemove.apply(this, arguments); }; })(window); </script> 

एच / टी @ लेस 2

Google Chrome में getEventListeners का उपयोग करें:

 getEventListeners(document.getElementByID('btnlogin')); getEventListeners($('#btnlogin')); 

यदि आपके पास फायरबग है , तो आप कंसोल लॉग में किसी भी जावास्क्रिप्ट स्केलर, सरणी, या ऑब्जेक्ट के प्रिंट करने के लिए कंसोल console.dir(object or array) का उपयोग कर सकते हैं।

प्रयत्न:

 console.dir(clickEvents); 

या

 console.dir(window); 

फ़ायरफ़ॉक्स डेवलपर टूल अब यह करता है प्रत्येक तत्व के प्रदर्शन के दाईं ओर "ईवा" बटन पर क्लिक करके घटनाएं दिखाई जाती हैं, जिनमें jQuery और डोम ईवेंट शामिल हैं।

इन्स्पेक्टर टैब में फ़ायरफ़ॉक्स डेवलपर टूल्स 'इवेंट श्रोता बटन का स्क्रीनशॉट

ओपेरा 12 (नवीनतम क्रोम वेबकिट इंजन आधारित नहीं है) ड्रैगनफ़्लो को थोड़ी देर के लिए यह था और यह स्पष्ट रूप से डोम संरचना में प्रदर्शित किया गया है। मेरी राय में यह एक बेहतर डिबगर है और यही वजह है कि मैं अभी भी ओपेरा 12 आधारित संस्करण का उपयोग क्यों करता हूं (कोई v13, v14 संस्करण नहीं है और v15 वेबकिट में अभी भी ड्रैगलाइन का अभाव है)

यहां छवि विवरण दर्ज करें

जन getEventListeners() द्वारा जवाब पर पूरी तरह से काम कर रहे समाधान – कंसोल से getEventListeners() तरह व्यवहार करता है:

(डुप्लिकेट के साथ थोड़ी बग है। यह ज्यादा वैसे ही तोड़ता नहीं है।)

 (function() { Element.prototype._addEventListener = Element.prototype.addEventListener; Element.prototype.addEventListener = function(a,b,c) { if(c==undefined) c=false; this._addEventListener(a,b,c); if(!this.eventListenerList) this.eventListenerList = {}; if(!this.eventListenerList[a]) this.eventListenerList[a] = []; //this.removeEventListener(a,b,c); // TODO - handle duplicates.. this.eventListenerList[a].push({listener:b,useCapture:c}); }; Element.prototype.getEventListeners = function(a){ if(!this.eventListenerList) this.eventListenerList = {}; if(a==undefined) return this.eventListenerList; return this.eventListenerList[a]; }; Element.prototype.clearEventListeners = function(a){ if(!this.eventListenerList) this.eventListenerList = {}; if(a==undefined){ for(var x in (this.getEventListeners())) this.clearEventListeners(x); return; } var el = this.getEventListeners(a); if(el==undefined) return; for(var i = el.length - 1; i >= 0; --i) { var ev = el[i]; this.removeEventListener(a, ev.listener, ev.useCapture); } }; Element.prototype._removeEventListener = Element.prototype.removeEventListener; Element.prototype.removeEventListener = function(a,b,c) { if(c==undefined) c=false; this._removeEventListener(a,b,c); if(!this.eventListenerList) this.eventListenerList = {}; if(!this.eventListenerList[a]) this.eventListenerList[a] = []; // Find the event in the list for(var i=0;i<this.eventListenerList[a].length;i++){ if(this.eventListenerList[a][i].listener==b, this.eventListenerList[a][i].useCapture==c){ // Hmm.. this.eventListenerList[a].splice(i, 1); break; } } if(this.eventListenerList[a].length==0) delete this.eventListenerList[a]; }; })(); 

उपयोग:

someElement.getEventListeners([name]) – ईवेंट श्रोताओं की सूची वापस लौटाते हैं, अगर नाम उस घटना के लिए श्रोताओं की रिटर्न someElement.getEventListeners([name]) सेट करता है

someElement.clearEventListeners([name]) – सभी ईवेंट श्रोताओं को हटा दें, अगर नाम सेट किया जाता है तो उस ईवेंट के लिए केवल श्रोताओं को हटा दें

प्रोटोटाइप 1.7.1 रास्ता

 function get_element_registry(element) { var cache = Event.cache; if(element === window) return 0; if(typeof element._prototypeUID === 'undefined') { element._prototypeUID = Element.Storage.UID++; } var uid = element._prototypeUID; if(!cache[uid]) cache[uid] = {element: element}; return cache[uid]; } 

मैं इसे jQuery 2.1 में और " $().click() -> $(element).data("events").click; " $().click() -> $(element).data("events").click; साथ करने की कोशिश कर रहा हूं $().click() -> $(element).data("events").click; "यह विधि काम नहीं करती है"

मुझे एहसास हुआ कि केवल $ ._ डेटा () फ़ंक्शंस मेरे मामले में काम करता है:

  $(document).ready(function(){ var node = $('body'); // Bind 3 events to body click node.click(function(e) { alert('hello'); }) .click(function(e) { alert('bye'); }) .click(fun_1); // Inspect the events of body var events = $._data(node[0], "events").click; var ev1 = events[0].handler // -> function(e) { alert('hello') var ev2 = events[1].handler // -> function(e) { alert('bye') var ev3 = events[2].handler // -> function fun_1() $('body') .append('<p> Event1 = ' + eval(ev1).toString() + '</p>') .append('<p> Event2 = ' + eval(ev2).toString() + '</p>') .append('<p> Event3 = ' + eval(ev3).toString() + '</p>'); }); function fun_1() { var txt = 'text del missatge'; alert(txt); } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> </body> 

अच्छा jQuery इवेंट एक्सटेंशन मौजूद है:

यहां छवि विवरण दर्ज करें (विषय स्रोत )