JS----addEventListener()
Posted 苦逼的IT男
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS----addEventListener()相关的知识，希望对你有一定的参考价值。
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: 50px; background: red; font-size: 20px; color: #fff; text-align: center; line-height: 50px } </style> </head> <body> <div id="content">点击</div> <script type="text/javascript"> //addEventListener 用于向指定元素添加事件句柄 //可以向一个元素添加多次点击事件，后一个点击事件不会覆盖前一个点击事件 var content = document.getElementById("content"); content.addEventListener("click", function () { alert("支持此方法1"); console.log("11"); }, false) content.addEventListener("click", function () { alert("支持此方法2"); console.log("22"); add(); }, false) content.addEventListener("mouseenter", add, false); function add() { console.log("我和你"); } content.removeEventListener("mouseenter", add, false); var content = document.getElementById("content"); if (content.addEventListener) { content.addEventListener(event, add); } else if (content.attchEvent) { content.attchEvent(event, add); } 123456 function add() { console.log("我们在一起"); } </script> </body> </html>
注意：
- removeEventListener() 不能移除匿名函数，像上面add()这种是可以的。
- IE8及更早版本和Opear 7.0及更早版本不支持addEventListener()和removeEventListener(),对于这类浏览器我们可以使用detachEvent()来移除事件。
element.detachEvent(event,fn);
- 1
跨浏览器解决方案：
var content = document.getElementById("content");
if(content.addEventListener){
content.addEventListener(event,add);
}else if(content.attchEvent){
content.attchEvent(event,add);
}
function add(){
console.log("我们在一起");
}
以上是关于JS----addEventListener()的主要内容，如果未能解决你的问题，请参考以下文章
js addEventListener removeEventListener
js addeventlistener 为 dragenter 使用捕获不适用于输入元素
js addEventListener(eventype,function,false/true); false true的区别