JavaScript get EventListeners

เวลาต้องมาแก้ Code frontend (HTML+JS) ที่เขียนโดย bind event จากใน JS เช่นลักษณะนี้

$('DIV.action[action=edit]').bind('click', function() {
  // ...
});

แล้วโจทย์คือเราต้องการจะ debug หรือแก้ event handler นั้นๆ ปัญหาที่เราจะพบ คือ ถ้าไฟล์มันมีเยอะมาก มีความซับซ้อนมาก แถมไม่ได้เขียนใน framework ที่เป็นมาตรฐาน หรือที่จะทำให้เรารู้ได้ทันทีว่าต้องไปหาที่ไหน. ตัวช่วยทางนึง คือ เราสามารถเรียกดู Event handler ของ DOM Element ที่เราสนใจ ได้โดยตรงเลย ลักษณะนี้

// jQuery
$._data($('#some-id')[0], "events");

// native
window.getEventListeners( document.getElementById('#some-id') );

ถ้าเป็น jQuery ในผลลัพท์ตรง console เราจะสามารถคลิกๆ เข้าไปดูได้จนเห็น [[FuntionLocation]] เลย.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.