JS addEventListener()方法

article/2025/9/12 22:38:57

addEventListener()，事件监听，用于向指定的元素添加事件监听

语法：addEventListener(event,function,useCapture);

第一个参数event：指事件的类型（如’click’,‘mousedown’）
第二个参数function：事件触发后调用的函数
第三个参数useCapture：设置传递的类型，默认值为false，即冒泡传递（可省略）；值为true时，捕获传递。

例：

 		<button id="btn">点击</button><script>document.getElementById("btn").addEventListener("click",function () {console.log(Date());});</script>

(它允许给一个事件注册多个监听器，且不会覆盖已存在的事件)
例：

			<button id="btn">点击</button><script>document.getElementById("btn").addEventListener("click",function () {console.log("我是第一个冒泡传递");})document.getElementById("btn").addEventListener("click",function () {console.log("我是第二个冒泡传递");})</script>

可以添加不同的事件类型
例：

			<button id="btn">点击</button><script>document.getElementById("btn").addEventListener("click",function () {console.log("我是点击的冒泡传递");});document.getElementById("btn").addEventListener("mouseover",function () {console.log("我是鼠标移入的事件传递");});document.getElementById("btn").addEventListener("mouseout",function () {console.log("我是鼠标移出的事件传递");});window.addEventListener("resize",function () {console.log("重置窗口");});</script>

使用匿名函数传递参数
例：

			<button id="btn">点击</button><script>document.getElementById("btn").addEventListener("click",function () {console.log(def(5,8));});function def(a,b) {return a*b;}</script>

removeEventListener(),用来移除事件的监听
例：

		<button id="btn">点击</button><script>document.getElementById("btn").addEventListener("click",one);function one(){console.log("我是第一个冒泡传递");};//移除事件document.getElementById("btn").removeEventListener("click",one);</script>

事件的传递有两种方式：冒泡与捕获

在冒泡中，内部元素的事件会先被触发，然后再触发外部元素；【从里到外】
在捕获中，外部元素的事件会被先触发，然后才会触发内部元素的事件。【从外到里】

例：

 			<div id="box"><p id="demo">冒泡</p></div><br /><div id="div"><p id="px">捕获</p></div><script>document.getElementById("demo").addEventListener("click",function () {console.log("p元素被点击");});//false可省略document.getElementById("box").addEventListener("click",function () {console.log("div元素被点击");});document.getElementById("px").addEventListener("click",function () {console.log("第二个p元素被点击");},true);document.getElementById("div").addEventListener("click",function () {console.log("第二个div元素被点击");},true);</script>

浏览器的兼容性问题：在IE9之前，只能使用attachEvent

添加：attachEvent()方法
移除：detachEvent()方法

使用 attachEvent 方法有个缺点，this 的值会变成 window 对象的引用而不是触发事件的元素

addEventListener() 跨浏览器的解决方法
例：

		<button id="btn">点击</button><script>var x = document.getElementById("btn");if (x.addEventListener){//大部分浏览器x.addEventListener("click",def);} else if (x.attachEvent){//IE8及以下浏览器x.attachEvent("onclick",def);};function def() {alert("跨浏览器的解决方法");};</script>

冒泡传递和捕获传递：

<div id="cla"><button id="btn"><p id="mp">冒泡</p></button>
</div><br /><div id="box"><button id="btn1"><p id="bh">捕获</p></button>
</div><script>document.getElementById("cla").addEventListener("click",function(){console.log("div标签被点击");});document.getElementById("btn").addEventListener("click",function(){console.log("button标签被点击");});document.getElementById("mp").addEventListener("click",function(){console.log("p标签被点击");});document.getElementById("box").addEventListener("click",function () {console.log("div被捕获");},true);document.getElementById("btn1").addEventListener("click",function () {console.log("button被捕获");},true);document.getElementById("bh").addEventListener("click",function () {console.log("p被捕获");},true);</script>