歡迎使用CSDN-markdown編輯器

Chrome的console中用monitorEvents查看element的事件

比如HTML有如下代碼段:

<input type="text" id="inputInfo" value="input sth"></input>

在chrome打開開發者工具的console,輸入monitorEvents($(‘#inputInfo’)[0]),回車。
然後把鼠標移到input中,可以在控制檯中看到input的各種event。

注意: monitorEvents的參數必須是Document的element,不能是jQuery的對象。比如

  • monitorEvents(document.getElementById(‘inputInfo’));
  • monitorEvents($(‘#inputInfo’)[0]);
    第二個參數是關注的event,monitorEvents(document.getElementById(‘inputInfo’), “change”), 如果沒有,輸出全部event。
    取消輸出:unmonitorEvents(document.getElementById(‘inputInfo’));

參考:https://developers.google.com/web/tools/chrome-devtools/debug/command-line/events?hl=en
Monitor events
The monitorEvents() method instructs the DevTools to log information on the specified targets.

The first parameter is the object to monitor. All events return if the second parameter is not provided. To specify the events to listen to, pass either a string or an array of strings as the second parameter.

Listen to click events on the body of the page:

monitorEvents(document.body, “click”);
If the monitored event is a supported event type that the DevTools maps to a set of standard event names, then the method listens to the events for that type.

The Command Line API has a full mapping of event types to the events they cover.

To stop monitoring events, call the unmonitorEvents() method and give it the object to stop monitoring.

Stop listening to events on the body object:

unmonitorEvents(document.body);

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章