<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p id="div">hello</p>
<button onclick="demo()">按钮1</button>
<button id="btn">按钮2</button>
<button id="btn_many">添加多个句柄事件</button>
<script>
// 以前的监听
function demo(){
document.getElementById("div").innerHTML = "改变"
}
// 句柄式监听
document.getElementById("btn").addEventListener("click",
function(){
alert("句柄监听事件");
}
);
// 声明多个句柄
var x = document.getElementById("btn_many");
x.addEventListener("click",hello);
x.addEventListener("click",world);
// 移出句柄
x.removeEventListener("click",hello);
function hello(){
alert("hello")
}
function world(){
alert("world")
}
</script>
</body>
</html>