getAllNodeEventListeners

getAllNodeEventListeners.md

以下の snippet を Chrome の DevTools で使うと、ページ内に仕掛けられた全てのEventListenersの設定元の一覧をダンプし、コードの位置を辿ることや、<scoped> な Closure Object(スコープ内の変数等) を参照することができます。

(ა✘﹏✘)ა イベントリスナーが沢山あってもう何がなんだかわからないんですー

な、状況や、パフォーマンス・チューニングで泣きつかれた時に、

(ε・◇・)з o O ( なるほど… お困りのご様子…
(ε・◇・)з o O ( では、ちょっとキーボードをお借りしますね…

と、華麗に console にタイプするのが、以下のコードになります。

function getAllNodeEventListeners() {
  var nodes = [].concat(window, [].slice.call(document.getElementsByTagName("*")));

  nodes.forEach(function(node) {
    var result = getEventListeners(node);
    for (var type in result) {
      console.log(type, result[type]);
    }
  });
}

(ε・◇・)з o O ( いやー、こんなこともあろうかと思いまして…

あ、そうそう

(ε・◇・)з o O ( DOMツリーから外されてどこかの変数に保持されているNodeは、この方法では見つけられないので、
(ε・◇・)з o O ( 適当な変数にDOM Nodesのスナップショットを取っておいて、後からいなくなったNodeを見つけるといいですよ

(ε・◇・)з o O ( で、その場合に、その変数に確保されている DOM Node はリークしている(リークする)可能性が高いので、ちょっと注意してみてみると良いです

Elementsタブの Event Listenersタブでも見れます

情報量は制限されますが、もっとお手軽に見る方法もあります。
Elements タブの Event Listeners タブがそれです。

イベント・モニター

コンソールで利用できるイベントモニターの仕組みもあります

monitorEvents(window, "resize");
monitorEvents(window, ["resize", "scroll"])

解除は、unmonitorEvents(object) または unmonitorEvents(object, [events]) で行います。