需求場景 在前端開發中，偶爾需要驗證下某個元素上到底綁定了哪些事件，以及監控某個元素上的事件觸發情況。 解決方案 普通操作 之前面對這種情況，一般採取的措施就是在各個事件里寫console.info，然後進行點擊等操作觸發事件，或者在控制台trigger元素上的事件，或者dispatchEvent。 ...
需求場景
在前端開發中，偶爾需要驗證下某個元素上到底綁定了哪些事件，以及監控某個元素上的事件觸發情況。
解決方案
普通操作
之前面對這種情況，一般採取的措施就是在各個事件里寫console.info，然後進行點擊等操作觸發事件，或者在控制台trigger元素上的事件，或者dispatchEvent。
這種方法比較繁瑣，而且假如觸發這個事件之前需要做大量操作，觸發時間後需要重新來過，真的是浪費時間啊。
神級操作
今天偶然發現藉助Chrome控制台的命令行，可以簡單快捷地解決這個問題。
獲取事件信息命令： getEventListeners
看到本頁面那個精靈球了嗎，接下來我們獲取那個精靈球上的事件信息。
Chrome控制台輸入命令：
getEventListeners(document.querySelector(".diggit"))
得到結果：
chrome控制台會輸出一個事件信息數組，圖中可以看出精靈球上有一個點擊事件，useCapture為false表示這個事件是冒泡而不是捕獲，once為false表示這個事件不會只監聽一次，passive為 false表示這個事件是很普通的事件，瀏覽器的預設操作不會在另一個線程中進行。
展開listener：
裡面還會展示事件將依次在哪些元素上冒泡觸發。
監控元素上的事件命令： monitorEvents 和 unmonitorEvents
看名字就大概知道一個是監控事件，一個是取消監控事件。
那麼同樣監控一下那個精靈球：
monitorEvents(document.querySelector(".diggit"))
當我運行此命令行後，將滑鼠再移動到精靈球上時，控制台很快輸出了大量事件。
一般情況下，這並不是我們想要的，我們更多地時候可能只想要一兩種事件。
那麼我們先解除監控：
unmonitorEvents(document.querySelector(".diggit"))
然後可以只監控滑鼠事件:
monitorEvents(document.querySelector(".diggit"),"mouse")
當然我們更常用的是只監控滑鼠點擊事件：
monitorEvents(document.querySelector(".diggit"),"click")
此時點擊精靈球（你也點一下唄
）
現在我們可以更準確地獲取到我們想要監控的事件信息了：
所以說還是很有用的是吧，那麼學到了的同時趕緊點擊一下精靈球驗證一下如何呢。
