pageに存在するEventListenerをすべて表示する方法
2022/03/19
あるプロジェクトでページに存在するすべてのEventListenerを取得する必要があったので、その方法をメモっておきます。
方法
調べたいサイトのdeveloper toolを開いてください。
あとはconsoleに以下のスクリプトをコピペして実行するだけです。
function listAllEventListeners() {
const allElements = Array.prototype.slice.call(document.querySelectorAll('*'));
allElements.push(document);
allElements.push(window);
const types = [];
for (let ev in window) {
if (/^on/.test(ev)) types.push(ev);
}
const elements = [];
for (let i = 0; i < allElements.length; i++) {
const currentElement = allElements[i];
// Events defined in attributes
for (let j = 0; j < types.length; j++) {
if (typeof currentElement[types[j]] === 'function') {
elements.push({
"node": currentElement,
"type": types[j],
"func": currentElement[types[j]].toString(),
});
}
}
// Events defined with addEventListener
if (typeof currentElement._getEventListeners === 'function') {
evts = currentElement._getEventListeners();
if (Object.keys(evts).length >0) {
for (let evt of Object.keys(evts)) {
for (k=0; k < evts[evt].length; k++) {
elements.push({
"node": currentElement,
"type": evt,
"func": evts[evt][k].listener.toString()
});
}
}
}
}
}
return elements.sort();
}
console.table(listAllEventListeners());スクリプト内容説明
以降スクリプトの内容を簡単に解説します。 スクリプトは大まかに4つの構成に分かれています。
1. ページに存在するすべてのElementを取得する
querySelectorAll('*')でサイトに存在するすべてのElementを取得します。
const allElements = Array.prototype.slice.call(document.querySelectorAll('*'));
allElements.push(document);
allElements.push(window);2. ブラウザが持つmethodの中でonから始まるmethod名をすべて抜き出す
次に、ブラウザ(window)で定義されているonから始まるmethod名をすべて取得します。
const types = [];
for (let ev in window) {
if (/^on/.test(ev)) types.push(ev);
}3. 各要素でattributesに対象のmethodがあればその情報を抜き出す
**1.で取得した各要素のattributesに2.**で取得したmethodがあればその情報を抜き出します。
// Events defined in attributes
for (let j = 0; j < types.length; j++) {
if (typeof currentElement[types[j]] === 'function') {
elements.push({
"node": currentElement,
"type": types[j],
"func": currentElement[types[j]].toString(),
});
}
}4. 各要素にEventListenerで定義されている対象のmethodがあればその情報を抜き出す
対処のmethodがattributeではなく、EventListenerで要素と紐付いている場合は、_getEventListenersmethodでその情報を抜き出します。
// Events defined with addEventListener
if (typeof currentElement._getEventListeners === 'function') {
evts = currentElement._getEventListeners();
if (Object.keys(evts).length >0) {
for (let evt of Object.keys(evts)) {
for (k=0; k < evts[evt].length; k++) {
elements.push({
"node": currentElement,
"type": evt,
"func": evts[evt][k].listener.toString()
});
}
}
}
}参考
https://www.sqlpac.com/en/documents/javascript-listing-active-event-listeners.html
