大家有沒有遇到這樣的一個問題，我們在分析一些大型電子商務平臺的Web前端指令碼時，想找到一個元素繫結的點選事件，並不是那麼容易，因為有些前端指令碼封裝的比較隱蔽，甚至有些加密指令碼，用傳統的查詢元素ID、或者頁面原始碼方法去找，可能最後徒勞無功。下面我來介紹利用chrome瀏覽器來查詢元素繫結的事件。

Chrome開發工具中最有用的面板Sources。Sources面板幾乎是最常用到的Chrome功能面板,也是解決一般問題的主要功能面板。通常只要是開發遇到了js報錯或者其他程式碼問題,在審視一遍程式碼而一無所獲之後開啟Sources進行js斷點除錯,幾乎能解決8成的程式碼問題。

本文主要給大家介紹了關於利用chrome瀏覽器進行js除錯並找出元素繫結的點選事件的相關內容，下面話不多說了，來一起看看詳細的介紹吧

只需要通過chrome瀏覽器以下三個功能就可以輕鬆找到繫結事件了。

1.Sources（原始碼）

2.Event Listener Breakpoints（事件監聽斷點）

3.Call Stack（函式呼叫棧）

舉個栗子：

1.開啟某網站，點選“規格”中的“100x100”選項，按F12，彈出前端除錯視窗，切換到Sources標籤。

2.看右邊的視窗（Event Listener Breakpoints）欄，選擇click選項（監聽點選事件）。

前端全棧學習交流圈：866109386
面向1-3經驗年前端開發人員
幫助突破技術瓶頸，提升思維能力

3.展開Call Stack（函式呼叫棧）。

4.然後點選如下圖示或按F11，觀察CallStack。

5.一路按如下圖示或按F11，直至發現事件是直接事件源。

一路按下去，一定要有耐心。。。。。

到這裡已經發現找到了事件源！！！