小粋空間  -  a cheap joke and a play on words site

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

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

１．問題点

次のサンプル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要素のイベント定義場所を知りたいのですが、確認する方法が分かりません。

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

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

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

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

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

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

（クリックで拡大）

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

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

（クリックで拡大）