監聽事件
Chrome DevTools命令行API提供了多種方式來觀察和檢查事件監聽器。JavaScript在交互式頁面中起着中心作用，並且瀏覽器為您提供了一些有用的工具來調試事件和事件處理程序。
TL;DR
- 使用
monitorEvents()監聽某一類型的事件。 - 使用
unmonitorEvents()停止監聽。 - 使用
getEventListeners()獲取DOM元素的監聽器。 - 使用
Event Listeners Inspector(事件監聽檢查器)面板獲取有關事件監聽器的信息。
監聽事件
monitorEvents()方法指示DevTools記錄指定目標事件的信息。
第一個參數是要監聽的對象。如果未提供第二個參數，所有事件都會返回。要指定要監聽的事件，傳遞一個字符串或字符串數組作為第二個參數。
監聽頁面body上的點擊事件：
monitorEvents(document.body, "click");
如果監視的事件是支持的 事件類型(DevTools 映射到一組標准事件名稱) ，那么該方法將監聽該類型的事件。
命令行API 將事件類型完整映射到它們覆蓋的事件中。
要停止監聽事件，請調用unmonitorEvents()方法,傳遞一個停止監視對象的參數。
停止監聽body對象上的事件：
unmonitorEvents(document.body);
查看在對象上注冊事件監聽器
getEventListeners() API返回在指定對象上注冊事件的監聽器。
返回值是一個對象，其中包含每個已注冊事件類型的數組（例如，click 或 keydown）。 每個數組的成員都是對象，描述每中類型的已注冊監聽器。 例如，以下代碼列出了在文檔對象上所有已注冊事件的監聽器：
getEventListeners(document);
如果在指定對象上注冊了多個監聽器，那么該數組包含每個監聽器成員。在以下示例中，在#scrollingList元素上為mousedown事件注冊了兩個事件監聽器：
進一步展開每個對象，可以查看其屬性：
查看在DOM元素上注冊的事件監聽器
默認情況下，Elements(元素)面板中的Event Listeners(事件偵聽器)窗格顯示附加到頁面的所有事件：
過濾器可以限制顯示只針對所選節點的事件：
通過擴展對象，該面板顯示事件偵聽器的詳細信息。在這個例子中，頁面有兩個通過jQuery附加的事件監聽器：
出處: https://www.html.cn/doc/chrome-devtools/console/events/