JavaScript 事件监听器列表

最新推荐文章于 2023-01-20 09:51:19 发布

遇上日落

最新推荐文章于 2023-01-20 09:51:19 发布

阅读量1.4k

点赞数

分类专栏： js 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_63639281/article/details/126462647

版权

js 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

获取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` 事件会被触发。

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); 如果你想知道附加特定事件的元素，请在上面的代码中。