DOM EventListener:
方法:addEventListener();
removeEventListener();
addEventListener(事件,执行的函数):用于向指定元素添加事件句柄。demo代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
</style>
</head>
<body>
<div id="box">这是一个盒子</div>
<button id="btn">点击</button>
<script type="text/javascript">
var box = document.getElementById("box");
var btn =document.getElementById("btn");
btn.addEventListener("click",function(){
alert(1);
});
</script>
</body>
</html>
注意:可以添加多个执行函数,代码 如下:
removeEventListener():用于向指定元素移除事件句柄
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button id="btn">点击</button>
<script type="text/javascript">
var btn = document.getElementById("btn");
btn.addEventListener("click",demo);
btn.addEventListener("click",demot);
btn.removeEventListener("click",demo);
function demo(){
alert(1);
};
function demot(){
alert(2);
};
</script>
</body>
</html>