66

こんにちは私は新しいプログラマーであり、まだ学んでいます。これは私が理解しようとしているコードです：

<div id="buy" class="buy button">Buy</div>

div（ボタン）をクリックすると、JavaScriptコードが実行されますが、それが実行されたかどうかはわかりません。クリックが発生したときにどの関数が起動されるかをどのように知ることができますか？リスナーがこの要素にどのように接続されているか

4

11 に答える 11

106

Google Chromeの開発者ツール（レンチアイコン>[ツール]>[開発者ツール]をクリック）で、[要素]タブで要素を選択し、右側の[イベントリスナー]パネルを開くと、すべてのイベントが表示されます

于 2012-08-06T17:22:03.120 に答える
24

FirefoxとFirebugを使用している場合は、FireQueryのインストールを試すことができます。jQueryによってバインドされたハンドラーを確認できるようになります。http://firequery.binaryage.com/

于 2012-08-06T17:08:06.800 に答える
13

ECMAscript自体を「ただ」使用するだけでは、本当に良い方法でそれを行うことはできません。たとえば、DOMレベル1によって次の形式で追加されたクリックイベントハンドラーがあった場合

document.getElementById('buy').onclick = function() {};

もちろん、ノード自体でそのプロパティを簡単にインターセプトできます。DOMレベル2.addEventListener()が敬意を表して登場すると、事態はさらに複雑になり.attachEvent()ます。これで、さまざまなリスナー関数がどこからバインドされているかを探すための「場所」が実際にはありません。

jQueryを使用することで改善されます。jQueryは、呼び出しのDOMノードにリンクされている特別なオブジェクトにすべてのイベントハンドラー関数を保持します。.data()次のようなノードの-expandoプロパティを取得することで、これを確認できます。

$('#buy').data('events');

ただし、イベントリスナーをノードにバインドする3つの異なる方法についてはすでに説明しました（jQueryのようなライブラリももちろんDOMレベル1または2のメソッドを使用するため、実際には2つです）。

イベントが委任によってトリガーされると、本当に醜くなります。つまり、クリックイベントを親ノードにバインドし、そのイベントがバブリングするのを待っているだけなので、を確認できtargetます。nodeそのため、との間には直接的な関係さえありませんevent listener。

ここでの結論は、ブラウザプラグインまたはおそらくVisualEventのようなものの監視です。

于 2012-08-06T17:08:10.337 に答える
9

「ビジュアルイベント2 」スクリプトをブックマークとして使用することも、 Chrome拡張機能と同じスクリプトを使用することもできます。

このスクリプトは、dom-elementsにアタッチされたすべてのjsイベントを表示します。

于 2012-08-07T17:51:28.353 に答える
5

使用するjQuery("#buy").data('events');

http://api.jquery.com/jQuery.data/は興味深いかもしれません。

于 2012-08-06T17:06:45.220 に答える
4

element.onclick=従来のハンドラーまたはHTMLを使用してアタッチされたイベントハンドラーは、スクリプトまたはデバッガー内<element onclick="handler">のプロパティから簡単に取得できます。element.onclick

現在、DOMレベル2イベントのaddEventListenerメソッドとIEのattachEventを使用してアタッチされたイベントハンドラーは、スクリプトからまったく取得できません。DOMレベル3は、すべてのリスナーを取得するためにelement.eventListenerListを提案しましたが、これが最終的な仕様になるかどうかは不明です。現在、どのブラウザにも実装はありません。

于 2012-08-06T17:07:49.093 に答える
3

FireFoxを使用している場合は、FireBugがインストールされている必要があります。それができたら、FireQueryをインストールできます。これにより、どのjQueryイベントがどのオブジェクトにバインドされているかがわかります。

http://getfirebug.com/

http://firequery.binaryage.com/

于 2012-08-06T17:08:15.903 に答える
2

以下は私が過去に使用したもので、あなたが探しているものかもしれないと思います。これは、ページ要素のプロパティ（以下の例では、ドキュメントの「タイトル」プロパティ）を監視し、そのプロパティが変更されるたびにJSコールスタックでアラートを表示します。検出しようとしているコードが起動する前に、これをDOMに取り込む必要がありますが、問題の原因を特定できることを願っています。

Firefoxを使用し、JavaScriptのデバッグにFirebugを入手することをお勧めします。

// Call stack code
function showCallStack() {
   var f=showCallStack,result="Call stack:\n";

   while((f=f.caller)!==null) {
      var sFunctionName = f.toString().match(/^function (\w+)\(/)
      sFunctionName = (sFunctionName) ? sFunctionName[1] : 'anonymous function';
      result += sFunctionName;
      result += getArguments(f.toString(), f.arguments);
      result += "\n";
   }
   alert(result);
}


function getArguments(sFunction, a) {
   var i = sFunction.indexOf(' ');
   var ii = sFunction.indexOf('(');
   var iii = sFunction.indexOf(')');
   var aArgs = sFunction.substr(ii+1, iii-ii-1).split(',')
   var sArgs = ''; 
   for(var i=0; i<a.length; i++) {
      var q = ('string' == typeof a[i]) ? '"' : '';
      sArgs+=((i>0) ? ', ' : '')+(typeof a[i])+' '+aArgs[i]+':'+q+a[i]+q+'';
   }
   return '('+sArgs+')';
} 

var watchTitle = function(id, oldval, newval) { showCallStack(); }

// !! This is all you should need to update, setting it to whatever you want to watch.
document.watch("title", watchTitle);
于 2012-08-06T17:12:03.453 に答える
2

これは私がそれを行う方法を見つけた最も簡単な方法です： http ：//www.sprymedia.co.uk/article/Visual+Event

Javascriptでイベントを操作する場合、どのイベントがどこでサブスクライブされているかを見失うことがよくあります。これは、プログレッシブエンハンスメントを採用している最新のインターフェイスで一般的な多数のイベントを使用している場合に特に当てはまります。Javascriptライブラリは、技術的な観点からリスナーにさらに複雑さを追加しますが、開発者の観点からは、もちろん、生活をはるかに楽にすることができます。しかし、問題が発生した場合、その理由を突き止めるのは難しい場合があります。

これが原因で、ビジュアルイベントと呼ばれるJavascriptブックマークレットを作成しました。このブックマークレットは、イベントがサブスクライブされているページ上の要素、それらのイベントとは何か、およびトリガーされたときにイベントが実行される関数を視覚的に示します。これは主にデバッグを支援することを目的としていますが、他のページでサブスクライブされたイベントを確認することも非常に興味深く有益な場合があります。

そこにブックマークボタンがあり、ツールバー（FFまたはChrome）にドラッグして、添付されたイベントを表示するページのボタンをクリックするだけです。よく働く！（少なくともjQueryまたは他のライブラリによってアタッチされたイベントの場合）。

于 2012-08-06T17:15:57.100 に答える
1

jQueryを使用していますか？その場合は、次の3行のコードのいずれかを検索します。

$("#buy").click //the div is refered by its id

また

$(".buy").click //the div is refered to by the style "buy"

また

$(".button").click //refered to by the style "button"

ほとんどの新しいブラウザには、を押すことで「開発者ツール」が組み込まれていますF12（少なくともIEとChromeでは）。これは、さらにデバッグとトレースを行うのに役立つ場合があります。

于 2012-08-06T17:07:00.827 に答える
0
  1. ページを右クリックして、ページのソースを表示することを選択します
  2. <script>タグを探す
  3. または$("#buy")言及している何かを探してくださいonClick.on("click",function(){...});
  4. 見つからない場合は、次の行に沿って何かを検索してください。document.getElementById("buy")
  5. 、またはコードが見つかりましたfunction。ここで、イベントハンドラーコードは次のとおりです。

$("#buy")idは、の属性を持つ要素を見つけるというJQueryの言い方でbuyあり、それに.続く関数がある場合、その関数はJQueryによって検出された要素に作用しています。

于 2012-08-06T17:11:41.650 に答える