JavaScript 事件监听器列表
一个网站有许多使网页更具交互性的事件。例如,你单击联系我们
按钮,由于事件侦听器,它会快速打开一个表单供你联系。
本教程将学习如何集体和单独列出 JavaScript 事件侦听器。我们可以使用 Chrome Developer Tools Console 使用不同的方法和技术,并通过相应的示例进行讨论。
获取 JavaScript 事件监听器列表
让我们先了解基本代码(HTML 和 JavaScript)。
HTML 代码:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Get a list of event listeners</title>
<script src="./eventList.js"></script>
</head>
<body>
<label>First name:</label>
<input type="text" id="firstname" name="first-name">
<br />
<label>Last name:</label>
<input type="text" id="lastname" name="last-name">
<br />
<button id="btn">Submit</button>
</body>
</html>
JavaScript 代码:
window.onload = function(){
document.addEventListener('keypress', e => {
if (e.key === "Enter") {
e.preventDefault();
return false;
}
});
document.getElementById('btn').addEventListener('click', function(){
console.log("You have clicked the submit button");
});
}
输出:
我们有两个 text
类型的 <input>
元素和一个附加事件的 button
。共有三个事件,keypress
、click
和 onload
。
如果你在停留在 document
的任何位置时按 Enter 键,keypress
事件将被触发。当你单击 Submit
按钮时,click
事件会被触发。
并且,当整个页面被加载时,onload
事件被触发。现在,我们如何知道事件监听器?
复制以下 JavaScript 代码进行练习。
window.onload = function(){
document.addEventListener('keypress', e => {
console.log(e);
if (e.key === "Enter") {
e.preventDefault();
return false;
}
});
document.getElementById('btn').addEventListener('click', function(event){
console.log(event);
console.log("You have clicked the submit button");
});
}
输出:
如果我们在名字或姓氏文本框中按 Enter 键,它会显示带有属性的 KeyboardEvent
。如果我们点击 Submit
按钮,PointerEvent
会监听。
这样,我们就知道哪个元素有哪个事件监听器了。你可以使用 console.log(event.target);
而不是 console.log(event);
如果你想知道附加特定事件的元素,请在上面的代码中。
我们在两个文本字段上按下 Enter 键并单击按钮。现在,请参阅以下输出。打印完整的 HTML 元素。
输出:
当我们知道事件但需要调试时,这种情况很有用。
如果我们有数百个事件怎么办?我们如何知道哪个 HTML 元素的事件是什么?
转到页面,在元素上右键单击
,然后选择检查
选项。然后,选择 Event Listeners
标签页并检查附加到该特定 HTML 元素的事件列表。
观察以下输出。
输出:
在上面给出的输出中,你可能已经注意到我们有三个事件侦听器:单击 Submit
按钮时的 click
、keypress
和 load
,而 keypress
和 load
用于 <输入>
元素。
使用 Chrome 开发者工具控制台获取 JavaScript 事件监听器列表
我们还可以使用 Chrome 开发者工具控制台上的 getEventListeners(Object)
方法来获取事件监听器。检查以下输出。
输出:
如果我们想一次性获得完整的事件列表怎么办?你可以在任何网站上执行此操作,以了解哪个事件正在侦听哪个 HTML 元素。
在控制台上键入以下命令。
Array.from(document.querySelectorAll("*")).forEach(e => {
const ev = getEventListeners(e);
if (Object.keys(ev).length !== 0){
console.log(e, ev)
}
});
输出:
上面的输出并排为所有事件侦听器提供了它们各自的 HTML 元素。