如何知道頁面上有多少事件監聽器

我正在Javascript中構建一個相當大的應用程序。這是一個可以更改不同視圖的單個頁面。所有觀點都有其自己的變量，事件，監聽器，元件等如何知道頁面上有多少事件監聽器

當大集合和多個事件它有時好知道究竟是什麼在頁面上發生的工作。

我知道所有的瀏覽器都有開發工具，但有時候很難點擊槽中的所有元素等。還有一些選項我找不到。

有一兩件事我很感興趣的是，知道有多少事件有目前收聽網頁上。這樣我就可以確認我沒有創造殭屍。

如果溶劑是一種開發工具，請告訴我該去哪裏以及該做什麼。最重要的是，選擇哪個瀏覽器。

2012-04-23 Saif Bechan

看看這個問題：http://stackoverflow.com/q/446892/206403 – 2012-04-23 16:11:18

這個答案[Andrew Hedges] [1]可能會幫助你。 [1]：http://stackoverflow.com/questions/446892/how-to-find-event-listeners-on-a-dom-node – luso 2012-04-23 16:11:19

@luso：當發佈評論，降價語法略有不同（單擊文本框右側的「幫助」按鈕）。 – 2012-04-23 16:12:39

如果您使用addEventListener（而非onclick等屬性），我可能會建議在Chrome鉤住：

var listenerCount = 0; 
(function() { 
    var ael = Node.prototype.addEventListener; 
    Node.prototype.addEventListener = function() { 
     listenerCount++; 
     ael.apply(this, arguments); 
    } 
    var rel = Node.prototype.removeEventListener; 
    Node.prototype.removeEventListener = function() { 
     listenerCount--; 
     rel.apply(this, arguments); 
    } 
})();

查詢在調試器listenerCount在任何時刻的價值看已調用addEventListner多少次。

N.B.：此代碼僅適用於Chrome，因爲瀏覽器都非常關注他們如何處理DOM功能。我已經發布了它，因爲您已經指定您可以將自己限制在特定的瀏覽器中進行調試。

來源

2012-04-23 17:30:51 apsillers

太好了，我喜歡這個approuch。這是否也會捕獲我使用jQuery創建的自定義事件，例如'myVar.on（'customEventxx'，this.doSomething）'。 – 2012-04-23 17:36:55

是的，它的確如此;我剛測試過。但是，我剛剛意識到一個重大問題：從DOM中刪除元素不會減少「listenerCount」。如果您將偵聽器添加到節點，然後刪除該節點，則計數不會減少。你可以掛鉤到'Node.removeChild'中，但是這並不能處理'innerHTML'的清除。這對你的情況可能不是問題，但我想讓你知道它。 – apsillers 2012-04-23 18:36:13

您可以使用monitorEvents函數在Chrome Developer Tools中監視事件。所有的細節見http://www.briangrinstead.com/blog/chrome-developer-tools-monitorevents。

來源

2012-04-23 17:35:34 Leo

只需使用API getEventListeners即可獲取所有事件的信息。請參閱此鏈接Chrome Dev Tools : view all event listeners used in the page

這個答案的內容：

中的Chrome Devtool不能爲你做這個。但隨着API鉻讓你可以檢查那些在您的控制檯：getEventListeners

只是把這個代碼在你的開發工具的控制檯，你可以在你的頁面中的所有綁定點擊事件數：

Array.from(document.querySelectorAll('*')) 
    .reduce(function(pre, dom){ 
    var clks = getEventListeners(dom).click; 
    pre += clks ? clks.length || 0 : 0; 
    return pre 
    }, 0)

結果是這樣的：

那是一個很大的點擊綁定。絕對不是績效項目的好例子。

如果你想看到什麼事件都在你的頁面中所有的元素和多少每個事件的監聽器的綁定，只要把這些代碼在你的開發工具的控制檯：

Array.from(document.querySelectorAll('*')) 
    .reduce(function(pre, dom){ 
    var evtObj = getEventListeners(dom) 
    Object.keys(evtObj).forEach(function (evt) { 
     if (typeof pre[evt] === 'undefined') { 
     pre[evt] = 0 
     } 
     pre[evt] += evtObj[evt].length 
    }) 
    return pre 
    }, {})

結果是這樣的：

{ 
    touchstart: 6, 
    error: 2, 
    click: 3249, 
    longpress: 2997, 
    tap: 2997, 
    touchmove: 4, 
    touchend: 4, 
    touchcancel: 4, 
    load: 1 
}

還有很多其他信息，你可以從這個API獲得。只是即興而已。

來源

2017-08-23 14:32:42

如何知道頁面上有多少事件監聽器

回答

相關問題