addEventListener
定义和用法
addEventListener 用于向指定元素添加事件句柄(又称事件处理函数)
语法
element.addEventListener(event, function, useCapture)
element 文档节点,duocument,window。
event 必须有。是一个字符串,指定事件名(一般不使用“on前缀”,例如“click,mouseover”)。
function 必须有。指定要事件触发时执行的函数(可以是函数,也可以是函数名)。
useCapture 可选。布尔值(true 或者false)指定事件是否在捕获阶段还是在冒泡阶段执行,一般情况下默认值为false
1、如果为true则事件句柄在捕获阶段执行
2、如果为false则事件句柄在冒泡阶段执行
实例
通过点击按钮改变背景色(主要代码):
document.getElementById("Btn").addEventListener("click",function(){ document.getElementById("box").style.backgroundColor = ‘green‘;});
实例
可以在文档中添加多个事件,添加的事件不会覆盖已存在的事件, 该下实例演示了如何在<button>元素中添加两个点击事件:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> #box{ width:50px; height:50px; background-color: red; } </style> <body> <div id="box"> </div> <button id="Btn">点击</button> <script type="text/javascript"> document.getElementById("Btn").addEventListener("click",function(){ document.getElementById("box").style.backgroundColor = ‘green‘; }); document.getElementById("Btn").addEventListener("click",function(){ this.style.backgroundColor = ‘red‘; }); </script> </body> </html>
实例
可以通过函数名来引用外部函数(主要代码):
document.getElementById("Btn").addEventListener("click",changeColor ,true); function changeColor(){ document.getElementById("box").style.backgroundColor = ‘green‘; }
有useCapture值时:就要想到 addEventListener-事件流
当一个事件发生时,会有三个阶段
捕获触发 从根节点开始挨个往下,检测每个节点是否检查是否调用了事件处理函数。如果调用了事件处理函数,并且 useCapture 为 true,则调用该事件处理函数。
目标触发 触发在目标对象本身调用了事件处理函数。
冒泡触发 从目标节点到根节点,检测每个节点是否调用了事件处理函数。如果调用了事件处理函数,并且 useCapture 为 false,则调用该事件处理函数。
1、 捕获时,以下执行结果为 2,1
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <button id="Btn">点击</button> <script type="text/javascript"> //捕获时触发, 当useCapture为true时触发,因此以下执行的结果是2,1 var btn=document.getElementById(‘Btn‘); btn.addEventListener(‘click‘,function(){alert(‘1‘);},false); document.body.addEventListener(‘click‘, function(){alert(‘2‘);},true); //捕获时触发 </script> </body> </html>
2、 冒泡时,以下执行结果为1,2
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <button id="Btn">点击</button> <script type="text/javascript"> //冒泡时触发, 当useCapture为false时触发,因此以下执行的结果是1,2 var btn=document.getElementById(‘Btn‘); btn.addEventListener(‘click‘,function(){alert(‘1‘);},false); document.body.addEventListener(‘click‘, function(){alert(‘2‘);},false); //冒泡时触发 </script> </body> </html>
时间: 2024-10-15 07:00:34