क्या मुझे jQuery के साथ एक तत्व पर बंधी हुई घटना मिल सकती है?

355

मैं इस लिंक पर दो ईवेंट हैंडलर बाँधता हूँ:

<a href='#' id='elm'>Show Alert</a>

जावास्क्रिप्ट:

$(function()
{
  $('#elm').click(_f);
  $('#elm').mouseover(_m);
});

function _f(){alert('clicked');}
function _m(){alert('mouse over');}

क्या किसी तत्व पर बाध्य सभी घटनाओं की एक सूची प्राप्त करने का कोई तरीका है, इस मामले में तत्व पर id="elm"?

javascript jquery javascript-events

— प्रवीण प्रसाद
स्रोत

517

JQuery के आधुनिक संस्करणों में, आप $._dataप्रश्न में तत्व के लिए jQuery द्वारा संलग्न किसी भी घटना को खोजने के लिए विधि का उपयोग करेंगे । ध्यान दें , यह केवल एक आंतरिक-उपयोग विधि है:

// Bind up a couple of event handlers
$("#foo").on({
    click: function(){ alert("Hello") },
    mouseout: function(){ alert("World") }
});

// Lookup events for this particular Element
$._data( $("#foo")[0], "events" );

इसका परिणाम $._dataएक ऐसी वस्तु होगी जिसमें हमारे द्वारा सेट की गई दोनों घटनाएं होती हैं (नीचे दी गई mouseoutसंपत्ति के साथ चित्रित ):

$ $ के लिए कंसोल आउटपुट।

फिर क्रोम में, आप हैंडलर फ़ंक्शन पर राइट क्लिक कर सकते हैं और आपको सटीक कोड दिखाने के लिए "व्यू फ़ंक्शन डेफिनिशन" पर क्लिक कर सकते हैं, जहां यह आपके कोड में परिभाषित है।

— सैम्पसन
स्रोत

59

यह केवल jQuery सहायकों के माध्यम से बाध्य तत्वों के लिए काम करता है।

— एलेक्स क्रिमिनियन

3

@jammypeach मैं आपके समाधान का प्रयास कर रहा हूं, लेकिन अभी भी चयनकर्ता के लिए अपरिभाषित वापस आ रहा है। मैंने $ ('# elem') का इस्तेमाल किया। बाइंड ('क्लिक', फंक्शन () {}); अगर इससे फर्क पड़ेगा।

— मार्कस

6

@marcus आह, वाह, मैं कुछ याद किया, माफ करना :)$._data(element[0], ‘events’);

— NotLizards

16

इन दिनों एक का उपयोग करना चाहिए: $ ._ डेटा ($ ('# foo') [0]) .ये

— डोनाल्ड टेलर

5

$._data()JQuery के आंतरिक द्वारा उपयोग किया जाता है। $.data()उपयोगकर्ता के लिए सार्वजनिक विधि है। और $.data(element, 'events')ठीक काम करता है।

— स्लाइड शो 2

73

सामान्य मामला:

F12देव उपकरण खोलने के लिए मारो
Sourcesटैब पर क्लिक करें
दाएँ हाथ की ओर, नीचे स्क्रॉल करें Event Listener Breakpointsऔर पेड़ का विस्तार करें
उन घटनाओं पर क्लिक करें जिन्हें आप सुनना चाहते हैं।
लक्ष्य तत्व के साथ बातचीत करें, अगर वे आग लगाते हैं तो आपको डीबगर में ब्रेक प्वाइंट मिलेगा

इसी तरह, आप कर सकते हैं:

लक्ष्य तत्व पर राइट क्लिक करें -> "चुनें Inspect element"
देव फ्रेम के दाईं ओर नीचे स्क्रॉल करें, नीचे ' event listeners' है।
यह देखने के लिए कि कौन से तत्व तत्व से जुड़े हैं, पेड़ का विस्तार करें। यकीन नहीं होता कि यह उन घटनाओं के लिए काम करता है जो बुदबुदाती हैं (मैं अनुमान नहीं लगा रहा हूं)

— वली शाह
स्रोत

3

मैं मानता हूं कि यह पसंदीदा तरीका है और एक सार्वभौमिक समाधान है, बनाम jQuery पर निर्भर है, जो उपलब्ध हो सकता है या नहीं।

— deadbabykitten

3

@dead umm ... प्रश्न विशेष रूप से jQuery को संदर्भित करता है और उदाहरण अनुलग्नक में jQuery का उपयोग करता है - उत्तर केवल jQuery (?) के संदर्भ में मान्य होना चाहिए

— कोड जॉकी

3

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

— २३:०६ पर deadbabykitten

12

मैं इसे पोस्टरिटी के लिए जोड़ रहा हूं; एक आसान तरीका है जिसमें अधिक JS लिखना शामिल नहीं है। फ़ायरफ़ॉक्स के लिए अद्भुत फ़ायरबग एडऑन का उपयोग करना ,

तत्व पर राइट क्लिक करें और 'Firebug के साथ निरीक्षण तत्व' चुनें
साइडबार पैनलों (स्क्रीनशॉट में दिखाया गया है) में, छोटे> तीर का उपयोग करके इवेंट टैब पर नेविगेट करें
ईवेंट टैब प्रत्येक ईवेंट के लिए ईवेंट और संबंधित फ़ंक्शन दिखाता है
इसके आगे का टेक्स्ट फंक्शन लोकेशन दिखाता है

— kakoma
स्रोत

1

यह IE देव टूल्स में भी उपलब्ध है।

— डेविलिन ने 20

9

अब आप जावास्क्रिप्ट फ़ंक्शन getEventListeners () का उपयोग करके किसी वस्तु से बंधे हुए श्रोताओं की सूची प्राप्त कर सकते हैं।

उदाहरण के लिए देव उपकरण कंसोल में निम्नलिखित टाइप करें:

// Get all event listners bound to the document object
getEventListeners(document);

— ScottyG
स्रोत

4

मुझे लगता है कि यह एक मूल कार्य नहीं है और निम्न लिपि / निर्भरता की आवश्यकता है: github.com/colxi/getEventListeners इसे उत्तर में जोड़ा जाना चाहिए, क्योंकि यह अन्यथा भ्रामक है। लेकिन मुझे उस 'प्लगइन' के लिए धन्यवाद; अच्छा लगता है। :)

— डेनिस 98

6

JQuery लेखा परीक्षा प्लगइन प्लगइन आप सामान्य Chrome डेवलपर उपकरण के माध्यम से यह कर देना चाहिए। यह सही नहीं है, लेकिन यह आपको वास्तविक हैंडलर को तत्व / घटना से जुड़ा हुआ देखना चाहिए, न कि केवल जेनेरिक jQuery हैंडलर को।

— JohnK
स्रोत

3

हालांकि यह फायरफॉक्स क्वांटम 58.x में jQuery के चयनकर्ताओं / वस्तुओं के लिए बिल्कुल विशिष्ट नहीं है, आप देव उपकरणों का उपयोग करके किसी तत्व पर ईवेंट हैंडलर पा सकते हैं:

तत्व को राइट-क्लिक करें
संदर्भ मेनू में, 'तत्व का निरीक्षण करें' पर क्लिक करें
यदि तत्व (पीले बॉक्स) के बगल में एक 'ईव' आइकन है, तो 'ईव' आइकन पर क्लिक करें
उस तत्व और घटना हैंडलर के लिए सभी घटनाओं को प्रदर्शित करता है

— Chris22
स्रोत

1

भयानक जवाब, विशेष रूप से स्क्रीनशॉट इसे बहुत आसान बनाता है। प्रयास के लिए धन्यवाद!

— bizi

2

मैंने कुछ इस तरह इस्तेमाल किया अगर ($ ._ डेटा ($ ("a.wine-item-link") [0])। घटनाओं == अशक्त) {... कुछ करें, बहुत कुछ करने के लिए अपने घटना संचालकों को फिर से बाँधें} जाँचने के लिए यदि मेरा तत्व किसी भी घटना के लिए बाध्य है। यह अभी भी अपरिभाषित (अशक्त) कहेगा यदि आपने उस तत्व से अपने सभी घटना संचालकों को हटा दिया है। यही कारण है कि अगर मैं एक अभिव्यक्ति में इसका मूल्यांकन कर रहा हूं।

— एड्रियन एल.ई.वी.
स्रोत

2

ध्यान दें कि घटनाओं को प्रश्न में तत्व के बजाय स्वयं दस्तावेज़ में संलग्न किया जा सकता है। उस स्थिति में, आप उपयोग करना चाहेंगे:

$._data( $(document)[0], "events" );

और सही चयनकर्ता के साथ ईवेंट खोजें :

और फिर हैंडलर > [[फंक्शनलाकेशन]] को देखें

— Pikamander2
स्रोत

0

जब मैं $ ._ डेटा की तरह थोड़ा जटिल DOM क्वेरी पास करता हूं: $._data($('#outerWrap .innerWrap ul li:last a'), 'events')यह ब्राउज़र कंसोल में अपरिभाषित होता है।

इसलिए मुझे पेरेंट डिव पर $ ._ डेटा का उपयोग करना था: $._data($('#outerWrap')[0], 'events')टैग के लिए घटनाओं को देखने के लिए। यहाँ एक ही के लिए एक JSField है: http://jsfiddle.net/giri_jeedigunta/MLcp4/4/

— गिरी-jeedigunta
स्रोत

3

इसका कारण यह है कि आप इस ईवेंट का प्रतिनिधि हैं $('#outerWrap')। घटनाएँ वास्तव में व्यक्तिगत एंकरों के बजाय उस तत्व से जुड़ी होती हैं।

— स्कॉटक्स