LoginSignup
24

More than 5 years have passed since last update.

現在ページのjQueryイベントを全て確認するSnippets

Last updated at Posted at 2015-09-04

はじめに

途中からプロジェクトに参加したり、複数人でjsをガリガリ書いていたりすると、どこでどんなイベントが設定されているか、全容が把握しにくいことがあると思います。
そこで、今いるページのイベントがざっと確認できるようなコードを書いてみました。何かの役に立つことがあれば幸いです。

注意事項

  • jQueryで登録されているイベントのみが対象です
  • addEventListener等で登録されたものは表示されません
  • ページにはjQueryが使われている必要があります

このコードでは上手くいかないページも多いかと思います。必要に応じて適宜調整していただければと思います。

コード

jQuery1.8以上

jqueryのイベントを全て表示する.js
jQuery.noConflict();
jQuery(function($) {
  (function showEventList() {
    var allTags = document.body.getElementsByTagName('*');
    var tag;
    var i = 0;
    var l = allTags.length;
    for (; i < l; i++) {
        tag = $._data(allTags[i], 'events');
        if (tag !== undefined && tag !== null) {
          console.log(allTags[i], tag);
        }
    }
  })();
});

jquery1.8未満

jqueryのイベントを全て表示する.js
jQuery.noConflict();
jQuery(function($) {
  (function showEventList() {
    var allTags = document.body.getElementsByTagName('*');
    var tag;
    var i = 0;
    var l = allTags.length;
    for (; i < l; i++) {
      tag = $(allTags[i]).data('events');
      if (tag !== undefined && tag !== null) {
        console.log(allTags[i], tag);
      }
    }
  })();
});

使い方

  • Chrome DevtoolsのSnippetsに登録して実行する
  • DevtoolsのConsoleに貼り付けて実行する
  • 直接スクリプトに埋め込む

ここではDevtoolsのSnippetsに登録して実行するようにしてみました。

[参考イメージ]

getEvent.gif

補足

上記コードは、body以下の要素を対象としています。また現在は全てのイベントを表示するようにしていますが、clickイベントのみを表示する、といったことも簡単にできるかと思います。

jQueryクリックイベントのみ表示.js
if (tag !== undefined && tag !== null && tag.click) {
  console.log(allTags[i], tag);
}

参考

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
24