ฉันจะดูเหตุการณ์ที่เกิดขึ้นกับองค์ประกอบใน Chrome DevTools ได้อย่างไร

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

ฉันจะทำเช่นนั้นโดยใช้ Chrome Web Developer ได้อย่างไร

• กดF12เพื่อเปิดเครื่องมือ Dev
• คลิกที่แท็บ Sources
• ทางด้านขวาเลื่อนลงไปที่ "จุดพักการฟังเหตุการณ์" และขยายแผนผัง
• คลิกที่กิจกรรมที่คุณต้องการฟัง
• โต้ตอบกับองค์ประกอบเป้าหมายหากพวกเขายิงคุณจะได้รับจุดพักในดีบักเกอร์

ในทำนองเดียวกันคุณสามารถคลิกขวาที่องค์ประกอบเป้าหมาย -> เลือก "ตรวจสอบองค์ประกอบ" เลื่อนลงทางด้านขวาของกรอบ dev ที่ด้านล่างคือ 'ผู้ฟังเหตุการณ์' ขยายแผนผังเพื่อดูว่ามีเหตุการณ์ใดเชื่อมต่อกับองค์ประกอบ ไม่แน่ใจว่าสามารถใช้งานได้กับเหตุการณ์ที่จัดการผ่าน bubbling หรือไม่ (ฉันเดาไม่ได้)

คุณสามารถใช้ฟังก์ชันmonitorEvents

เพียงตรวจสอบองค์ประกอบของคุณ ( right mouse click→ Inspectองค์ประกอบที่มองเห็นได้หรือไปที่Elementsแท็บในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome และเลือกองค์ประกอบที่ต้องการ) จากนั้นไปที่Consoleแท็บและเขียน:

monitorEvents($0)

ตอนนี้เมื่อคุณเลื่อนเมาส์ไปที่องค์ประกอบนี้โฟกัสหรือคลิกมันชื่อของเหตุการณ์ที่เกิดขึ้นจะถูกแสดงพร้อมกับข้อมูลของมัน

หากต้องการหยุดรับข้อมูลนี้เพียงแค่เขียนสิ่งนี้ลงในคอนโซล:

unmonitorEvents($0)

$0เป็นเพียงองค์ประกอบ DOM ล่าสุดที่เลือกโดยเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome คุณสามารถส่งผ่านวัตถุ DOM อื่น ๆ ที่นั่น (ตัวอย่างเช่นผลลัพธ์ของgetElementByIdหรือquerySelector)

คุณยังสามารถระบุเหตุการณ์ "type" เป็นพารามิเตอร์ตัวที่สองเพื่อ จำกัด กิจกรรมที่ถูกตรวจสอบให้แคบลงบางชุดที่กำหนดไว้ล่วงหน้า ตัวอย่างเช่น:

monitorEvents(document.body, 'mouse')

รายการประเภทที่มีอยู่นี้อยู่ที่นี่

ฉันสร้าง gif ขนาดเล็กซึ่งแสดงให้เห็นว่าคุณลักษณะนี้ทำงานอย่างไร:

Visual Eventเป็น bookmarklet เล็ก ๆ น้อย ๆ ที่คุณสามารถใช้เพื่อดูตัวจัดการเหตุการณ์ขององค์ประกอบ เมื่อวันที่สาธิตออนไลน์สามารถดูได้ที่นี่

สำหรับ jQuery (อย่างน้อยรุ่น 1.11.2) ขั้นตอนต่อไปนี้ใช้ได้สำหรับฉัน

1. คลิกขวาที่องค์ประกอบแล้วเปิด 'เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome'
2. พิมพ์$._data(($0), 'events');ใน 'คอนโซล'
3. ขยายวัตถุที่แนบมาและดับเบิลคลิกที่handler:ค่า
4. นี่แสดงรหัสแหล่งที่มาของฟังก์ชั่นที่แนบมาค้นหาส่วนหนึ่งของที่ใช้แท็บ 'ค้นหา'

และถึงเวลาที่จะหยุดการคิดค้นวงล้อใหม่และเริ่มใช้เหตุการณ์วานิลลา JS ... :)

สิ่งนี้จะไม่แสดงเหตุการณ์ที่กำหนดเองเช่นที่สคริปต์ของคุณอาจสร้างขึ้นหากเป็นปลั๊กอิน jquery ตัวอย่างเช่น :

jQuery(function($){
 var ThingName="Something";

 $("body a").live('click', function(Event){
   var $this = $(Event.target);
       $this.trigger(ThingName + ":custom-event-one");
 });

 $.on(ThingName + ":custom-event-one", function(Event){
   console.log(ThingName, "Fired Custom Event: 1", Event);
 })

});

แผงกิจกรรมภายใต้สคริปต์ในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome จะไม่แสดง "Something: custom-event-one"