कैसे पता करें कि जावास्क्रिप्ट घटनाओं को किसने निकाल दिया?

122

मेरे पास एक चयन सूची है:

<select id="filter">
  <option value="Open" selected="selected">Open</option>
  <option value="Closed">Closed</option>
</select>

जब मैं Closedपृष्ठ पुनः लोड करता हूं । इस मामले में यह बंद टिकट (खुले के बजाय) दिखाता है। जब मैं इसे मैन्युअल रूप से करता हूं तो यह ठीक काम करता है।

समस्या यह है कि जब मैं वॉटिर केClosed साथ चयन करता हूं तो पृष्ठ पुनः लोड नहीं होता है :

browser.select_list(:id => "filter").select "Closed"

आमतौर पर इसका मतलब है कि कुछ जावास्क्रिप्ट घटना को निकाल नहीं दिया गया है। मैं वटिर के साथ कार्यक्रमों में आग लगा सकता हूं:

browser.select_list(:id => "filter").fire_event "onclick"

लेकिन मुझे पता होना चाहिए कि किस घटना में आग लगनी चाहिए।

क्या यह पता लगाने का एक तरीका है कि किसी तत्व के लिए कौन सी घटनाओं को परिभाषित किया गया है?

— Žलज्जको फिलीपिन
स्रोत

यह प्रश्न अधिक टूल सूचीबद्ध करता है: stackoverflow.com/questions/570960/…

— jeljko Filipin

2

दृश्य घटना, sprymedia.co.uk/article/Visual+Event । मुझे यकीन है कि इस स्टैकओवरफ़्लो पेज पर उतरने वाले आधे लोगों को मदद मिलेगी :)

— सेड्रिक

143

बस मैंने सोचा कि आप इसे क्रोम में भी कर सकते हैं:

Ctrl+ Shift+ I(डेवलपर टूल)> स्रोत> इवेंट श्रोता ब्रेकपॉइंट (दाईं ओर)।

आप उन सभी घटनाओं को भी देख सकते हैं जो पहले से ही केवल तत्व पर राइट क्लिक करके जुड़ी हुई हैं और फिर इसके गुणों (दाईं ओर पैनल) को ब्राउज़ कर रही हैं।

उदाहरण के लिए:

ऊपर बाईं ओर दिए गए बटन पर राइट क्लिक करें

निरीक्षण तत्व का चयन करें

स्टाइल सेक्शन को संक्षिप्त करें (सबसे दाईं ओर अनुभाग - डबल शेवरॉन)

इवेंट श्रोताओं के विकल्प का विस्तार करें

अब आप अपवोट से जुड़ी घटनाओं को देख सकते हैं

यकीन नहीं होता कि यह फायरबग विकल्प के रूप में काफी शक्तिशाली है, लेकिन मेरे अधिकांश सामान के लिए पर्याप्त है।

एक और विकल्प जो थोड़ा अलग है, लेकिन आश्चर्यजनक रूप से भयानक है दृश्य घटना: http://www.sprymedia.co.uk/article/Visual+Event+2

यह एक पृष्ठ पर सभी तत्वों को हाइलाइट करता है जो बाध्य हो गए हैं और उन फ़ंक्शन को दिखाते हुए पॉपअप होते हैं जिन्हें कहा जाता है। एक बुकमार्क के लिए सुंदर निफ्टी! Chrome प्लगइन के साथ-साथ यदि आपकी चीज़ अधिक है - अन्य ब्राउज़रों के बारे में निश्चित नहीं है।

अनामिका ने यहां भी इशारा किया है monitorEvents(window);

— क्रिस
स्रोत

2

मैं यह पता नहीं लगा सका कि आपके द्वारा सुझाए गए तरीकों से किस तरह की घटनाओं को देखा जा सकता है।

— 12eljko Filipin

1

अपडेट: यह Scriptsदेव टूल्स (या इंस्पेक्टर) के अंदर नहीं है, आपको इसमें जाना होगा Sourcesऔर फिर दाईं ओर मेनू को देखना होगा।

— अल्दलालैंड

@aledalgrande धन्यवाद, अपडेट किया है। (पढ़ने वाले किसी के लिए, यह केवल पहले समाधान पर लागू होता है, दूसरा अभी भी निरीक्षक का उपयोग करता है)।

— क्रिस

1

क्या कोई विशिष्ट कारण है कि आपने upvote बटन को इसके लिए एक उदाहरण के रूप में चुना है? : पी

— जॉर्ज दिमित्रिदिस

@GeorgeDimitriadis हाहा उछला: पी

— क्रिस

112

फायरबग (फ़ायरफ़ॉक्स ऐड-ऑन) की तरह लगता है जवाब है:

ओपन फायरबग
HTML टैब में तत्व पर राइट क्लिक करें
क्लिक Log Events
कंसोल टैब सक्षम करें
कंसोल टैब में Persist क्लिक करें (अन्यथा पेज पुनः लोड होने के बाद कंसोल टैब स्पष्ट हो जाएगा)
चुनें Closed(मैन्युअल)

कंसोल टैब में कुछ इस तरह होगा:

...
mousemove clientX=1097, clientY=292
popupshowing
mousedown clientX=1097, clientY=292
focus
mouseup clientX=1097, clientY=292
click clientX=1097, clientY=292
mousemove clientX=1096, clientY=293
...

स्रोत: फायरबग टिप: लॉग इवेंट्स

— Žलज्जको फिलीपिन
स्रोत

4

बहुत बहुत धन्यवाद, मैं उस फ़ायरबग सुविधा के बारे में नहीं जानता था। शायद मुझे वास्तव में कुछ समय के लिए आरटीएफएम की आवश्यकता है।

— मार्सेल कोर्पेल

मुझे इसके बारे में कुछ मिनट पहले तक पता नहीं था। मैं प्रश्न लिख रहा था और रास्ते में उत्तर मिला। :)

— --eljko Filipin

2

— फायरबग

1

नमस्ते, मैंने फायरबग पर राइट क्लिक करने की कोशिश की, लेकिन मुझे लॉग इवेंट्स का विकल्प नहीं मिला, क्या आप कृपया मेरी मदद कर सकते हैं कि इसे कैसे खोजें?

— राजगोपालन

2

हाय, Firbug प्लगइन कोई और नहीं है। फिर मुझे यह कैसे हासिल करना चाहिए? कृपया मेरी मदद करें

— HimaaS

71

क्रोम के बारे में, कमांड लाइन एपीआई के माध्यम से मॉनिटरएवेंट्स () चेकआउट करें।

मेनू> टूल्स> जावास्क्रिप्ट कंसोल के माध्यम से कंसोल खोलें।
दर्ज monitorEvents(window);

घटनाओं के साथ बाढ़ को देखें

...
mousemove MouseEvent {dataTransfer: ...}
mouseout MouseEvent {dataTransfer: ...}
mouseover MouseEvent {dataTransfer: ...}
change Event {clipboardData: ...}
...

प्रलेखन में अन्य उदाहरण हैं । मैं अनुमान लगा रहा हूं कि इस सुविधा को पिछले उत्तर के बाद जोड़ा गया था।

— AnonymousAndrew
स्रोत

5

अच्छा! JQuery के साथ संयोजन में:monitorEvents($('#element').get())

— क्लाऊस

1

निगरानी का उपयोग बंद करने के लिएunmonitorEvents(window)

— अगस्त

0

आप अपने Google Chrome डेवलपर कंसोल में getEventListeners का उपयोग कर सकते हैं ।

getEventListeners (ऑब्जेक्ट) इवेंट श्रोताओं को निर्दिष्ट ऑब्जेक्ट पर पंजीकृत लौटाता है।

getEventListeners(document.querySelector('option[value=Closed]'));

— JSON C11
स्रोत