#はじめに
途中からプロジェクトに参加したり、複数人で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に登録して実行するようにしてみました。
[参考イメージ]
#補足
上記コードは、body以下の要素を対象としています。また現在は全てのイベントを表示するようにしていますが、clickイベントのみを表示する、といったことも簡単にできるかと思います。
jQueryクリックイベントのみ表示.js
if (tag !== undefined && tag !== null && tag.click) {
console.log(allTags[i], tag);
}
#参考