html要素に添付されたイベントを確認するにはどうすればよいですか？

Question

こんにちは私は新しいプログラマーであり、まだ学習しています。 これは私が把握しようとしていますコードです：DIV（ボタン）にIをクリックすると

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

、いくつかのJavaScriptコードが実行されますが、私はそれがなかったかわかりません。クリックが発生したときにどの機能が起動されるのかをどのように知ることができますか？リスナーがこの要素に接続されているいくつかの方法を

Answer 1

FirefoxとFirebugを使用している場合は、FireQueryをインストールすることができます。 を参照してください。を参照してください。ハンドラはjQueryによってバインドされています。 http://firequery.binaryage.com/

Answer 2

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

http://api.jquery.com/jQuery.data/は面白いかもしれません。

Answer 3

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では）を押してください。それはさらにデバッグとトレースを行うのに役立ちます。

Answer 4

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

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

Answer 5

ECMAscript自体を使用して「ちょうど」することは本当にうまくできません。例えば、簡単にノード自体にその財産を横取り当然のことができます

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

の形でDOMレベル1で追加されたクリックイベントハンドラがあった場合。 DOM Level 2が.addEventListener()と対戦すると、状況がさらに複雑になります。.attachEvent()。今では、すべての異なるリスナーがどこからバインドされているかを探す「場所」はありません。

これはjQueryを使用すると改善されます。 jQueryは、呼び出しのDOMノードにリンクされている特別なオブジェクトにすべてのイベントハンドラ関数を保持します。あなたはjQueryのようなライブラリも使用しているので、今、私はすでにノードにイベントリスナーを結合する3つの異なる方法（実際にはその2を説明した。しかし、

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

のようなノードのための.data() -expandoプロパティを取得することにより、それをチェックすることができますもちろんDOMレベル1または2の方法）。

イベントが委任によって誘発された場合、実際には醜い状態になります。つまり、私たちはクリックイベントを親ノードにバインドして、そのイベントが私たちにバブリングするのを待っているので、targetを確認することができます。だから、nodeとevent listenerの間には直接の関係はありません。

結論ここには、ブラウザプラグインのルックスアウト、おそらくVisualEventのようなものがあります。

Answer 6

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

http://getfirebug.com/

http://firequery.binaryage.com/

Answer 7

1. 右クリックしてページ、および$("#buy")と何か場合onClickまたは.on("click",function(){...});
2. を言及するため<script>タグ
3. ルックを探すページのソース
4. を表示するように選択あなたはそれを見つけることができない、tに沿って何かを検索するHESEライン：あなたはfunction発見したdocument.getElementById("buy")
5. 、またはイベントハンドラのコードは

$("#buy")あるコードは、buyのid属性を持つ要素を見つけるというのはjQueryの方法であり、それは.を持っている場合その関数の後ろにJQueryが検出した要素に対してその関数が作用しています。

Answer 8

以下は私があなたが探しているかもしれないと思う過去に使用したものです。これは、ページ要素のプロパティを監視することです（下の例では、ドキュメントの「Title」プロパティです）。そのプロパティが変更されると、JSコールスタックにアラートが表示されます。あなたが火災を見つけようとしているコードの前に、これをDOMに入れておく必要がありますが、問題の原因を特定することができればうれしいです。

Firefoxを使用し、FirebugのJavaScriptデバッグをお勧めします。

// 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); 

Answer 9

これは私がそれを行う方法を見つけた最も簡単な方法です：JavaScriptでイベントを操作するとき、イベントが購読しているもののトラック を失うことは、多くの場合は簡単です http://www.sprymedia.co.uk/article/Visual+Event

どこに。 が多数のイベントを使用している場合は、これは特に当てはまります。これは、プログレッシブエンハンスメントを使用する現代の インターフェイスでは一般的です。 Javascriptライブラリ テクニカルポイント からリスナーに別の程度の複雑さを加え、開発者の視点から彼らはもちろん、 の生活をはるかに簡単にすることができます！しかし、何かがうまくいかないときは、 これがなぜ起こっているのかを突き止めることは難しいかもしれません。

私がこれらのイベントが何であるか、一緒に視覚的に購読 イベントがあるページの要素を示し ビジュアルイベントと呼ばれるJavaScriptのブックマークレットを入れていると、イベントを 機能を実行します。このためですトリガーされたとき。これは、基本的に のデバッグを支援することを目的としていますが、他のページで購読されたイベントを見るには、非常に興味深く有益な になることもあります。

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

Answer 10

（レンチアイコン> [ツール]> [開発者ツールをクリック）、Elementsタブで要素を選択し、右側には、すべてのイベントを参照しますよ「イベントリスナー」パネルを開き

Answer 11

"Visual Event 2"スクリプトをブックマークまたはChrome extensionと同じスクリプトとして使用できます。

このスクリプトは、DOM要素に接続されているすべてのjsのイベントを示しています。