添加事件句柄和移除事件句柄使用方法

于 2018-04-11 16:26:23 发布 · 847 阅读

文章标签：

#addEventListener #removeEventListener

javaScript 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何使用JavaScript中的addEventListener和removeEventListener方法来为HTML元素添加和移除事件监听器。通过示例展示了当点击按钮时，如何触发不同的事件处理函数，并演示了如何移除特定的事件监听。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<title>添加与移除事件句柄</title>
</head>
<body>
<button id="btn">按钮</button>
<script>
//DOM EventListener:
//方法: addEventListener();//方法用于向指定元素添加事件句柄
// removeEventListener();//移除方法添加的事件句柄
句柄作用:句柄之间不会覆盖,依次弹出来
var x = document.getElementById('btn');
x.addEventListener("click",hello);
x.addEventListener("click",world);
x.removeEventListener("click",hello);

function hello() {
alert("hello");
}

function world() {
alert("world");
}
</script>
</body>
</html>