addEventListener() 事件监听

无意间有人问到了，这个方法，我就学了一下，顺便敲了一个小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("我们在一起");
}

addEventListener() 事件监听相关推荐

addEventListener事件监听传递参数
Flash as3 addEventListener事件监听传递参数 var sayHello:String = "how are you"; btn1.addEventListe ...
JavaScript 的addEventListener() 事件监听详解！
JavaScript 的addEventListener() 事件监听详解! addEventListener() 用于向指定元素添加事件. 可以向一个元素添加多次事件或者多次不同事件,后面的事件是 ...
EventTarget.addEventListener()事件监听
文章目录 EventTarget.addEventListener()的意义和原理什么是事件监听 addEventListener()的原理 addEventListener()的语法 addEve ...
Event事件-1:addEventListener事件监听 / 事件冒泡事件捕获 / 事件委托 / preventDefault 阻止默认行为 / cancelBubble、stopPropa...
addEventListener 事件监听器 target.addEventListener(type, listener[, options|useCapture]) 添加事件监听参数: ...
addEventListener 事件监听方式
语法规范: evenTarget.addEventListener(type,listener[,useCapture]) eventTarget.addEventListener()方法将指定的监听 ...
addEventListener 事件监听
1,事件委托不给子节点 li 设置事件监听器,而直接给父节点 ul 设置,利用冒泡原理影响每个子节点 <body><ul><li>知否知否,点我应有弹窗在手< ...
addEventListener事件监听方式
eventTarget.addEventListener(type,listener[,useCapture]) eventTarget.addEventListener()方法将指定的监听器注册到e ...
addEventListener()事件监听
addEventListener()方法将事件处理程序附加到指定的元素. addEventListener()方法将事件处理程序附加到元素,而不覆盖现有的事件处理程序. 您可以向一个元素添加许多事件处 ...
JavaScript addEventListener()事件监听方法
addEventListener()方法将事件处理程序附加到指定的元素. 您可以使用removeEventListener()方法轻松删除事件侦听器. 语法:element.addEventListe ...

addEventListener() 事件监听

addEventListener() 事件监听相关推荐

最新文章

热门文章