web-dev-qa-db-ja.com

Chrome開発ツールでgetEventListenersを使用する方法？

_.someclass_のクリックイベントにフックされた関数を追跡してみました。 Chrome Dev Toolを開き、これを入力します

getEventListeners(document.querySelector('.someclass'));

結果はこれです

_Object {}_

クリックして開いて、オブジェクトの名前やクリックイベントを処理するソースコードを見つけることができません。

調べる方法はありますか？

更新1：

続くKrasimir's以下のアドバイス。イベントは2つしかありません：mousemoveまたはmouseover。では、_canvas.overlay_のイベントを処理する正確な関数を見つけるにはどうすればよいですか？ドリルダウンするには数が多すぎます。

enter image description here

javascriptdomjavascript-eventsgoogle-chrome-devtools
14
HP.
  1. DevToolsを開く
  2. [要素]タブを開き、要素（.someclass）を見つけます
  3. 要素ごとに4つのタブ（スタイル、プロパティ、DOMブレークポイント、イベントリスナー）があります。
  4. イベントリスナーの選択

enter image description here

14
Krasimir

呼び出し時に空のオブジェクトを取得しています

getEventListeners(document.querySelector('.someclass'));

おそらく、リスナーが.someclass要素自体（直接イベント）に接続されていないため、その祖先の1つ（委任イベント）に接続されているためです。これについての良い説明があります here 。

指定されたノードおよびのすべての祖先に対してgetEventListenersを呼び出すことにより、委任イベントと直接イベントの両方を一覧表示できます。この関数はトリックを行う必要があります：

getAllEventListeners = function(el) {
 var allListeners = {}, listeners;

 while(el) {
  listeners = getEventListeners(el);

  for(event in listeners) {
   allListeners[event] = allListeners[event] || [];
   allListeners[event].Push({listener: listeners[event], element: el});  
  }

  el = el.parentNode;
 }

 return allListeners;
}

ただし、これはKrasimirが回答で述べた[イベントリスナー]タブ（[フィルター]オプションを[すべてのノード]に設定）とまったく同じものを出力します。

11
Konrad Dzwinel

イベントをその要素にバインドするためにjQueryを使用していると思います。そのため、ドリルダウンメニューに実際のハンドラーコードが表示されません。 jQueryでラップしない場合、実際のコードは次のように「listenerBody」に表示されます。

enter image description here

0
Sean Chen