ตรวจสอบตัวจัดการเหตุการณ์ที่แนบมาสำหรับองค์ประกอบ DOM ใด ๆ

มีวิธีใดในการดูว่าฟังก์ชัน / รหัสใดที่แนบมากับเหตุการณ์ใด ๆ สำหรับองค์ประกอบ DOM หรือไม่ ใช้ Firebug หรือเครื่องมืออื่น ๆ

ตัวจัดการเหตุการณ์ที่แนบมาโดยใช้แบบดั้งเดิมelement.onclick= handlerหรือ HTML <element onclick="handler">สามารถเรียกดูได้เล็กน้อยจากelement.onclickคุณสมบัติจากสคริปต์หรือในโปรแกรมดีบั๊ก

ตัวจัดการเหตุการณ์ที่แนบมาโดยใช้วิธี DOM ระดับ 2 เหตุการณ์addEventListenerและ IE attachEventไม่สามารถดึงจากสคริปต์ได้ในขณะนี้ DOM ระดับ 3 เคยเสนอelement.eventListenerListให้รับฟังทุกคน แต่ยังไม่ชัดเจนว่าจะทำให้เป็นไปตามข้อกำหนดขั้นสุดท้ายหรือไม่ วันนี้ไม่มีการใช้งานในเบราว์เซอร์ใด ๆ

เครื่องมือดีบักเป็นส่วนขยายของเบราว์เซอร์สามารถเข้าถึงผู้ฟังประเภทนี้ได้ แต่ฉันไม่ทราบว่ามีอะไรบ้าง

เฟรมเวิร์ก JS บางตัวทิ้งบันทึกเหตุการณ์ที่เชื่อมโยงไว้มากพอที่จะหาสิ่งที่พวกเขาทำ Visual Eventใช้แนวทางนี้ในการค้นหาผู้ฟังที่ลงทะเบียนผ่านเฟรมเวิร์กยอดนิยมบางส่วน

องค์ประกอบแผงในเครื่องมือสำหรับนักพัฒนา Google Chromeมีนี้ตั้งแต่รุ่น Chrome ในช่วงกลางเดือน 2011 และ Chrome รุ่นช่องนักพัฒนาซอฟต์แวร์ตั้งแต่ปี 2010

นอกจากนี้ตัวฟังเหตุการณ์ที่แสดงสำหรับโหนดที่เลือกจะอยู่ในลำดับที่พวกเขาถูกยิงผ่านขั้นตอนการจับภาพและการทำให้เกิดฟอง

ตีcommand+ option+ iบน Mac OSX และCtrl+ Shift+ iบน Windows ที่จะยิงนี้ขึ้นใน Chrome

Chrome Dev เครื่องมือเพิ่งประกาศเครื่องมือใหม่ ๆ บางอย่างสำหรับการตรวจสอบเหตุการณ์ JavaScript

TL; ดร

monitorEvents()ฟังเหตุการณ์บางประเภทใช้

ใช้unmonitorEvents()เพื่อหยุดฟัง

รับฟังขององค์ประกอบ DOM getEventListeners()โดยใช้

ใช้แผงตัวตรวจสอบผู้ฟังเหตุการณ์เพื่อรับข้อมูลเกี่ยวกับผู้ฟังเหตุการณ์

การค้นหาเหตุการณ์ที่กำหนดเอง

สำหรับความต้องการของฉันการค้นพบเหตุการณ์ JS ที่กำหนดเองในโค้ดของบุคคลที่สามสองเวอร์ชันต่อไปนี้getEventListeners()มีประโยชน์อย่างน่าอัศจรรย์

• getEventListeners(window)
• getEventListeners(document)

ถ้าคุณรู้ว่า DOM Node ฟังเหตุการณ์ที่ถูกแนบมากับคุณจะผ่านที่แทนหรือwindowdocument

เหตุการณ์ที่เป็นที่รู้จัก

ถ้าคุณรู้ว่าเหตุการณ์ที่คุณต้องการตรวจสอบเช่นในร่างกายของเอกสารที่คุณสามารถใช้ต่อไปนี้: clickmonitorEvents(document.body, 'click');

ตอนนี้คุณควรเริ่มเห็นเหตุการณ์การคลิกทั้งหมดในdocument.bodyการเข้าสู่ระบบในคอนโซล

คุณสามารถดูเหตุการณ์ที่แนบโดยตรง (element.onclick = handler) โดยดูที่ DOM คุณสามารถดูเหตุการณ์ที่แนบ jQuery ใน Firefox โดยใช้ FireBug กับ FireQuery ดูเหมือนจะไม่มีวิธีใดในการดูเหตุการณ์ที่เพิ่ม addEventListener โดยใช้ FireBug อย่างไรก็ตามคุณสามารถดูได้ใน Chrome โดยใช้โปรแกรมแก้ไขข้อบกพร่องของ Chrome

คุณสามารถใช้Visual Eventโดย Allan Jardine เพื่อตรวจสอบตัวจัดการเหตุการณ์ทั้งหมดที่แนบมาในปัจจุบันจากไลบรารี JavaScript หลัก ๆ บนเพจของคุณ ใช้งานได้กับ jQuery, YUI และอื่น ๆ อีกมากมาย

Visual Event เป็น bookmarklet JavaScript จึงเข้ากันได้กับเบราว์เซอร์หลัก ๆ ทั้งหมด

คุณสามารถขยายสภาพแวดล้อมจาวาสคริปต์ของคุณเพื่อติดตามผู้ฟังเหตุการณ์ Wrap (หรือ 'เกิน') เดอะ addEventListener พื้นเมือง () วิธีการที่มีรหัสบางอย่างที่กระป๋องเก็บบันทึกของผู้ฟังเหตุการณ์ใด ๆ เพิ่มจากนั้นเป็นต้น คุณยังต้องขยาย HTMLElement.prototype.removeEventListener เพื่อเก็บบันทึกที่สะท้อนสิ่งที่เกิดขึ้นใน DOM อย่างถูกต้อง

เพียงเพื่อประโยชน์ในการแสดงภาพประกอบ (โค้ดที่ยังไม่ทดสอบ) - นี่คือตัวอย่างของวิธีที่คุณจะ 'ตัด' 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);
}