博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js的addEvertLIstener方法
阅读量:5035 次
发布时间:2019-06-12

本文共 1805 字,大约阅读时间需要 6 分钟。

简介

“DOM2级事件”定义了两个方法,用于处理指定和删除事件处理程序的操作:addEventListener() 和 removeEventListener()。

public override function addEventListener(type:String, listener:Function, useCapture:Boolean = false):void

他们都接受3个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值。最后一个布尔值参数如果是true,表示在事件捕获阶段调用事件处理程序;如果是false,表示在事件冒泡阶段调用事件处理程序。

使用

1.事件添加

addEventListener 可以在一个元素上多次添加事件。

var oDiv = document.getElementById("div1");oDiv.addEventListener("click",function() {    alert(this.id);},false);oDiv.addEventListener("click",function() {    alert("clicked me");},false);

点击oDiv节点后,先输出节点id“div1”,再输出“clicked me”。

2.事件移除

addEventListener() 添加的事件处理程序只能使用 removeEventListener() 来移除;移除时传入的参数与添加处理程序时使用的参数相同。这也就意味着通过 addEventListener() 添加的匿名函数将无法移除。

var oDiv = document.getElementById("div1");oDiv.addEventListener("click",function() {    alert(this.id);},false);oDiv.removeEventListener("click",function() {     alert(this.id);},false); // 无效

虽然 removeEventListener() 看似使用了相同的参数,但是实际上传入的那个是另一个完全不同的函数。所以如果想正确的移除事件,写法如下所示。

var oDiv = document.getElementById("div1");var handler = function() {    alert(this.id);}oDiv.addEventListener("click", handler, false);oDiv.removeEventListener("click", handler, false); // 有效

讨论

这里我们主要讨论 useCapture 参数的用法。首先看一段代码。

    
Document

点击div3之后,过程分为三个阶段:

捕获阶段: 外-->里 在div1处检测useCapture属性为true,即事件捕获阶段会触发事件,所以会执行程序,输出“blue”。在div2处检测useCapture属性为false,即事件冒泡阶段才会触发,所以不会执行程序。

目标阶段: 目标到div3处,发现div3就是鼠标点击的节点, 所以这里是目标阶段。若有事件处理程序,则执行该程序,输出“yellow”。这里不论 useCapture 为 true 还是 false。
冒泡阶段: 里-->外 在div2处检测useCapture属性为false,即事件冒泡阶段才会触发,所以会执行程序,输出“red”。在div1处检测useCapture属性为true,即事件捕获阶段会触发事件,所以不会执行程序。

程序的运行结果为:“blue”,“yellow”,“red”。

对于addEventListener方法可以对一个dom添加多个事件,而通过jquery的事件绑定只能添加一个方法,如果添加多个的话前面的时间会被后面的时间覆盖。

 

转载于:https://www.cnblogs.com/hbyzs/p/4459301.html

你可能感兴趣的文章
【HNOI2015】菜肴制作
查看>>
javascript继承
查看>>
海思uboot启动流程详细分析(三)【转】
查看>>
.NET之JSON序列化运用
查看>>
一般8位的微型机系统以16位来表示地址,则该计算机系统有几个地址空间
查看>>
sitemesh2.x+velocity+springmvc乱码解决方案
查看>>
(单例设计模式之一)饿汉式的反射与反序列化漏洞
查看>>
java中的final关键字和java抽象类
查看>>
用CSS3制作很特别的波浪形菜单
查看>>
Python面向对象03/继承
查看>>
Bing Maps进阶系列二:使用GeocodeService进行地理位置检索
查看>>
vector容器
查看>>
IDEA中使用mybatis逆向工程
查看>>
java序列化和反序列化
查看>>
绝对定位
查看>>
ubuntu集群下ssh配置总结
查看>>
flink源码编译(windows环境)
查看>>
dpkg 删除 百度网盘 程序
查看>>
服务器nginx安装
查看>>
std::nothrow
查看>>