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()
原文地址:https://www.cnblogs.com/liaohongwei/p/9718146.html