<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<!-- DOM事件句柄:EventListener;(参数1:事件的类型; 参数2:触发事件时调用的函数;) -->
<!-- 方法1:AddEventListener(),给指定的元素添加事件句柄; -->
<!-- 方法2:RemoveEventListener(),从元素中移除指定的事件句柄; -->
</head>
<body>
<button id="bid">按钮</button>
<script type="text/javascript">
var btn = document.getElementById("bid");
if (btn == null) {
alert("获取html元素失败!");
} else {
btn.addEventListener("click", Demo1); // 添加三个事件句柄,会依次执行三个函数;
btn.addEventListener("click", Demo2);
btn.addEventListener("click", Demo3);
btn.removeEventListener("click", Demo3); // 移除事件句柄,则Demo3()函数不会执行;
}
function Demo1() {
alert("Hello");
}
function Demo2() {
alert("World");
}
function Demo3() {
alert("第三个弹框!");
}
</script>
</body>
</html>
JavaScript学习笔记之DOM事件句柄
最新推荐文章于 2021-12-03 17:03:24 发布