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]] เลย.

Vue render option tag

เจอปัญหาทำ dynamic <option> ไม่ได้. สุดท้ายจบที่ใช้ <select v-html=“method”></select>. ยังไม่ได้ลองจริงจัง แต่เดาว่าเป็นที่ ใน select ของเดิม มันมี tag option (static html code) อยู่ด้วยมั้ง.