JavaScriptやjQueryで設定されたイベントの定義場所を調べる方法

JavaScriptやjQueryで設定されたイベントの定義場所を調べる方法

Posted at March 23,2015 1:33 AM
Tag:[Firefox, JavaScript, jQuery]

JavaScriptやjQueryで設定されたイベントの定義場所を調べる方法を紹介します。

1.問題点

次のサンプルHTMLがあります。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://user-domain/foo.js"><script>
<input type="button" id="test1" value="テスト1" />
<input type="button" id="test2" value="テスト2" />
<div id="result"></div>

foo.jsには次のjQueryが記述されています。

<pre><code>$(function(){
    $('#test1').click(function(){
        $('#result').text($(this).val());
    });
    $('#test2').click(function(){
        $('#result').text($(this).val());
    });
});</code></pre>

このHTMLではボタンを2つ表示し、いずれかをクリックするとdiv要素に「テスト1」または「テスト2」が表示します。

サンプル

実際には他に多くのjsファイルを読み込んでいます。

その条件でこのinput要素のイベント定義場所を知りたいのですが、確認する方法が分かりません。

2.JavaScriptやjQueryで設定されたイベントの定義場所を調べる

イベントの定義場所を調べるには、Firefoxを利用します。

Firefox34よりjQueryのイベントリスナを調査する機能が追加されました。

まず、定義場所を確認したいページをブラウザで開き、右クリックして「要素を調査」を選択(実際は確認したい要素の上で右クリックして作業した方が分かりやすいです)。

要素を調査

イベントリスナが設定されている要素の隣に「ev」アイコンが表示されます。

「ev」アイコンが表示

「ev」をクリックするとイベントリスナの一覧が表示されます。

(クリックで拡大)
イベントリスナの一覧

右端に「jQuery」と表示された行をクリックすると、イベントリスナの実装が表示されます。

イベントの実装

一覧の左端に表示されたコンセントの部分をクリックするとデバッガの画面に遷移し、該当イベントリスナが青色で反転表示されます。ここでブレークポイントの設定などが行えます。

(クリックで拡大)
デバッガ

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)