ฉันสามารถค้นหากิจกรรมที่ผูกไว้กับองค์ประกอบด้วย jQuery ได้หรือไม่

ฉันผูกตัวจัดการเหตุการณ์สองตัวที่ลิงค์นี้:

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

JavaScript:

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

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

มีวิธีที่จะได้รับรายชื่อของเหตุการณ์ทั้งหมดที่ถูกผูกไว้ในองค์ประกอบในกรณีนี้ในองค์ประกอบใด ๆid="elm"?

ใน 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คุณสมบัติที่ขยาย):

จากนั้นใน Chrome คุณสามารถคลิกขวาที่ฟังก์ชันตัวจัดการแล้วคลิก "ดูคำจำกัดความของฟังก์ชัน" เพื่อแสดงจุดที่ถูกต้องในรหัสของคุณ

กรณีทั่วไป:

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

ในทำนองเดียวกันคุณสามารถ:

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

ฉันกำลังเพิ่มสิ่งนี้ไว้สำหรับลูกหลาน มีวิธีที่ง่ายกว่าที่ไม่เกี่ยวข้องกับการเขียน JS มากขึ้น โดยใช้addon Firebug ที่น่าตื่นตาตื่นใจสำหรับ Firefox ,

1. คลิกขวาที่องค์ประกอบแล้วเลือก 'ตรวจสอบองค์ประกอบด้วย Firebug'
2. ในแผงด้านข้าง (แสดงในภาพหน้าจอ) ไปที่แท็บเหตุการณ์โดยใช้ลูกศรเล็ก ๆ
3. แท็บเหตุการณ์แสดงเหตุการณ์และฟังก์ชั่นที่เกี่ยวข้องสำหรับแต่ละเหตุการณ์
4. ข้อความถัดจากมันจะแสดงตำแหน่งของฟังก์ชั่น

ตอนนี้คุณสามารถรับรายการผู้ฟังเหตุการณ์ที่ผูกไว้กับวัตถุโดยใช้ฟังก์ชัน javascript getEventListeners ()

ตัวอย่างเช่นพิมพ์สิ่งต่อไปนี้ในคอนโซลเครื่องมือ dev:

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

ตรวจสอบ jQuery ปลั๊กอินปลั๊กอินควรปล่อยให้คุณทำเช่นนี้ผ่านปกติเครื่องมือ Chrome Dev มันไม่สมบูรณ์แบบ แต่ควรให้คุณเห็นตัวจัดการจริงที่ถูกผูกไว้กับองค์ประกอบ / เหตุการณ์และไม่ใช่แค่ตัวจัดการ jQuery ทั่วไป

แม้ว่านี่จะไม่เฉพาะเจาะจงกับตัวเลือก / วัตถุ jQuery ใน FireFox Quantum 58.x คุณสามารถค้นหาตัวจัดการเหตุการณ์บนองค์ประกอบโดยใช้เครื่องมือ Dev:

1. คลิกขวาที่องค์ประกอบ
2. ในเมนูบริบทคลิก 'ตรวจสอบองค์ประกอบ'
3. หากมีไอคอน 'ev' ติดกับองค์ประกอบ (กล่องสีเหลือง) ให้คลิกที่ไอคอน 'ev'
4. แสดงกิจกรรมทั้งหมดสำหรับองค์ประกอบนั้นและตัวจัดการเหตุการณ์

ฉันใช้บางสิ่งเช่นนี้ถ้า ($ ._ data ($ ("a.wine-item-link") [0]). เหตุการณ์ == null) {... ทำบางสิ่งบางอย่าง, ผูกตัวจัดการเหตุการณ์ของพวกเขาอีกครั้ง} เพื่อตรวจสอบ ถ้าองค์ประกอบของฉันถูกผูกไว้กับเหตุการณ์ใด ๆ มันจะยังบอกว่าไม่ได้กำหนด (null) หากคุณไม่ได้แนบตัวจัดการเหตุการณ์ทั้งหมดของคุณจากองค์ประกอบนั้น นั่นคือเหตุผลที่ฉันประเมินสิ่งนี้ในการแสดงออกถ้า

โปรดทราบว่าเหตุการณ์อาจถูกแนบมากับเอกสารแทนที่จะเป็นองค์ประกอบที่เป็นปัญหา ในกรณีนั้นคุณจะต้องใช้:

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

และค้นหาเหตุการณ์ด้วยตัวเลือกที่ถูกต้อง:

จากนั้นดูที่ตัวจัดการ > [[FunctionLocation]]

เมื่อฉันส่งเคียวรี DOM ที่ซับซ้อนเล็กน้อยไปยังข้อมูล $ ._ ดังนี้: $._data($('#outerWrap .innerWrap ul li:last a'), 'events')มันจะไม่ได้กำหนดในคอนโซลของเบราว์เซอร์

ดังนั้นฉันต้องใช้ข้อมูล $ ._ บน div div: $._data($('#outerWrap')[0], 'events')เพื่อดูเหตุการณ์สำหรับแท็ก นี่คือ JSFiddle สำหรับสิ่งเดียวกัน: http://jsfiddle.net/giri_jeedigunta/MLcpT/4/