无意间有人问到了，这个方法，我就学了一下，顺便敲了一个小demo。
addEventListener() 用于向指定元素添加事件。
可以向一个元素添加多次事件或者多次不同事件，后面的事件是不会覆盖前面的。
语法：
element.addEventListener(event,fn,useCaption );
参数说明：tr件，比如 click mouseenter mouseleave
fn 回调函数
useCaption 用于描述是冒泡还是捕获。默认值是false，即冒泡传递。
当值为true，就是捕获传递。
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>addEventListener</title>
<script type="text/javascript" src="js/jquery-3.0.0.js"></script>
<style type="text/css">
#content{
width: 100px;
height: 100px;
background: #f9f;
}
</style>
</head>
<body>
<div id="content"></div>
<script type="text/javascript">
//addEventListener 用于向指定元素添加事件句柄
//可以向一个元素添加多次点击事件，后一个点击事件不会覆盖前一个点击事件
var content = document.getElementById("content");
content.addEventListener("click",function(){
//alert("支持此方法");
console.log("11");
},false)
content.addEventListener("click",function(){
console.log("22");
//add();
},false)
content.addEventListener("mouseenter",add,false);
function add(){
console.log("我和你");
}
content.removeEventListener("mouseenter",add,false);
</script>
</body>
</html>
注意：
- removeEventListener() 不能移除匿名函数，像上面add()这种是可以的。
- IE8及更早版本和Opear 7.0及更早版本不支持addEventListener()和removeEventListener(),对于这类浏览器我们可以使用detachEvent()来移除事件。
element.detachEvent(event,fn);跨浏览器解决方案：
var content = document.getElementById("content");
if(content.addEventListener){
content.addEventListener(event,add);
}else if(content.attchEvent){
content.attchEvent(event,add);
}function add(){
console.log("我们在一起");
}
版权声明：本文为boysky0015原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。