Chrome調試 ---- 控制檯獲取元素上綁定的事件信息以及監控事件

需求場景 

在前端開發中，偶爾須要驗證下某個元素上到底綁定了哪些事件，以及監控某個元素上的事件觸發狀況。

解決方案

普通操做

以前面對這種狀況，通常採起的措施就是在各個事件裏寫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")

此時點擊精靈球（你也點一下唄）

如今咱們能夠更準確地獲取到咱們想要監控的事件信息了：

 因此說仍是頗有用的是吧，那麼學到了的同時趕忙點擊一下精靈球驗證一下如何呢。

 

 

出處：https://www.cnblogs.com/vvjiang/p/7836696.html

==================================================================================================

咱們在看一個簡單的，在Elements中點擊元素對象，中右邊窗口點擊Event Listeners界面，能夠看到事件，以下圖：