14

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

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

その結果がこれ

Object {}

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

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

更新 1:

以下のクラシミールのアドバイスに従いました。mousemoveまたはの 2 つのイベントのみが存在する可能性がありますmouseover。では、そのイベントを処理する正確な関数を見つけるにはどうすればよいcanvas.overlayでしょうか? ドリルダウンするには多すぎます。

ここに画像の説明を入力

4

3 に答える 3

19
  1. 開発ツールを開く
  2. [要素] タブを開き、要素 (.someclass) を見つけます。
  3. 要素ごとに 4 つのタブ (スタイル、プロパティ、DOM ブレークポイント、イベント リスナー) があります。
  4. イベント リスナーの選択

ここに画像の説明を入力

于 2013-08-31T12:00:29.047 に答える
12

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

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;
}

ただし、これは、クラシミールが回答で言及した「イベントリスナー」タブ (「フィルター」オプションを「すべてのノード」に設定) とまったく同じものを出力します。

于 2013-09-03T12:38:36.287 に答える