jQueryで設定されたクリックイベントなどを定義している場所を調べる方法

More than 1 year has passed since last update.

Chromeなどのモダンブラウザであれば、デベロッパーツールがあってJavaScriptのデバッグなどもそこで容易にできる。例えば、なんかのボタンにJavaScriptでクリックイベントを設定している場合、なにが設定されているかの確認もサクッとできる。


デベロッパーツールで、イベントの中身を確認

<div id="click1">click1</div>

<script>
var click1 = document.getElementById('click1');

click1.addEventListener('click', function() {
console.log('click1');
});
</script>



  • Command + Option + i のショートカットで起動

  • 調べたい要素を選択し、右側のパネル「Event Listeners」を選択する

  • 右端のフィルタっぽいアイコンを選択してSelected Node Onlyを選択すると、邪魔な要素がなくなって楽

chrome1.png


  • clickイベントの中をドリルダウンしていくと、handlerの中に関数が確認できる

chrome2.png

ほうほう、console.log('b')ね…と。


jQueryの場合…見られない

jQueryを使わないイベントの場合は、これで簡単に中身が確認できるが、jQueryはそう簡単には行かない。イベントリスナーを内部で処理しているため、DOMのイベントリスナーには入ってこない。

<div id="click1">click1</div>

<script>
jQuery('#click1').click(function() {
console.log('click1');
});
</script>

chrome3.png

確かに、なんかのイベントがある…しかしjQueryだ…。


コンソールから、中身を確認する

Consoleタブを選択して、コンソールを表示、下記コードを入力。

$._data($("#click1").get(0), "events");

chrome4.png

すると、先ほどのEvent Listenersに表示されていたような感じに。設定されているイベントの数だけでてくるので、その中の hander: function()...の部分を右クリックして Show Function Definition を選択すると、該当のコードまでジャンプできる。

chrome5.png

これで幸せになれる。