位置: 编程技术 - 正文

JavaScript事件代理和委托详解

编辑:rootadmin

推荐整理分享JavaScript事件代理和委托详解,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

在javasript中,代理、委托经常出现。

那么它究竟在什么样的情况下使用?它的原理又是什么?

这里介绍一下javascript delegate的用法和原理,以及Dojo,jQuery等框架中delegate的接口。

JavaScript事件代理事件代理在JS世界中一个非常有用也很有趣的功能。当我们需要对很多元素添加事件的时候,可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。

这主要得益于浏览器的事件冒泡机制,下面我们具体举个例子来解释如何使用这个特性。

这个例子主要取自David Walsh的相关文章(How JavaScript Event Delegation Works)。

假设有一个 UL 的父节点,包含了很多个 Li 的子节点:

当我们的鼠标移到Li上的时候,需要获取此Li的相关信息并飘出悬浮窗以显示详细信息,或者当某个Li被点击的时候需要触发相应的处理事件。

我们通常的写法,是为每个Li都添加一些类似onMouseOver或者onClick之类的事件监听。

如果这个UL中的Li子元素会频繁地添加或者删除,我们就需要在每次添加Li的时候都调用这个addListenersLi方法来为每个Li节点添加事件处理函数。

这会造成添加或者删除过程的复杂度和出错的可能性。

解决问题方法是使用事件代理机制,当事件被抛到更上层的父节点的时候,我们通过检查事件的目标对象(target)来判断并获取事件源Li。

下面的代码可以完成想要的效果:

为父节点添加一个click事件,当子节点被点击的时候,click事件会从子节点开始向上冒泡。父节点捕获到事件之后,通过判断e.target.nodeName来判断是否为我们需要处理的节点。并且通过e.target拿到了被点击的Li节点。从而可以获取到相应的信息,并作处理。

事件冒泡及捕获浏览器的事件冒泡机制,对于事件的捕获和处理,不同的浏览器厂商有不同的处理机制,这里介绍W3C对DOM2.0定义的标准事件。

DOM2.0模型将事件处理流程分为三个阶段:

一、事件捕获阶段,

JavaScript事件代理和委托详解

二、事件目标阶段,

三、事件起泡阶段。

如下图:

事件捕获:当某个元素触发某个事件(如onclick),顶层对象document就会发出一个事件流,随着DOM树的节点向目标元素节点流去,直到到达事件真正发生的目标元素。在这个过程中,事件相应的监听函数是不会被触发的。

事件目标:当到达目标元素之后,执行目标元素该事件相应的处理函数。如果没有绑定监听函数,那就不执行。

事件起泡:从目标元素开始,往顶层元素传播。途中如果有节点绑定了相应的事件处理函数,这些函数都会被一次触发。如果想阻止事件起泡,可以使用e.stopPropagation()(Firefox)或者e.cancelBubble=true(IE)来组织事件的冒泡传播。

jQuery和Dojo中delegate函数下面看一下Dojo和jQuery中提供的事件代理接口的使用方法。

jQuery:

jQuery的delegate的方法需要三个参数,一个选择器,一个时间名称,和事件处理函数。

而Dojo的与jQuery相似,仅是两者的编程风格上的差别:

Dojo的delegate模块在dojox.NodeList中,提供的接口与jQuery一样,参数也相同。

通过委托, 能够体会到使用事件委托对于开发带来的几个好处:

1.管理的函数变少了。不需要为每个元素都添加监听函数。对于同一个父节点下面类似的子元素,可以通过委托给父元素的监听函数来处理事件。

2.可以方便地动态添加和修改元素,不需要因为元素的改动而修改事件绑定。

3.JavaScript和DOM节点之间的关联变少了,这样也就减少了因循环引用而带来的内存泄漏发生的概率。

在JavaScript编程中使用代理上面介绍的是对DOM事件处理时,利用浏览器冒泡机制为DOM元素添加事件代理。其实在纯JS编程中,我们也可以使用这样的编程模式,来创建代理对象来操作目标对象.

上面的例子中,通过调用delegate()函数创建的代理函数d来操作对a的修改。

这种方式尽管是使用了apply(call也可以)来实现了调用对象的转移,但是从编程模式上实现了对某些对象的隐藏,可以保护这些对象不被随便访问和修改。

在很多框架中都引用了委托这个概念用来指定方法的运行作用域。

比较典型的如dojo.hitch(scope,method)和ExtJS的createDelegate(obj,args)。

标签: JavaScript事件代理和委托详解

本文链接地址:https://www.jiuchutong.com/biancheng/373417.html 转载请保留说明!

上一篇:JS实现的网页上的颜色拾色器(js怎么做网页)

下一篇:JS表单验证的代码(常用)(js表单验证代码Email)

  • 房产税城镇土地使用税税率
  • 财务软件怎么样从捷软系统导出数据
  • 股票交易印花税降低
  • 管理费用中的办公费占比是多少
  • 未能确认收入的原因
  • 小规模纳税人税率有几种
  • 自主研发全流程
  • 营业执照经营范围劳务怎么写
  • 万元版增值税发票最多可以开多少
  • 外商投资企业是民营企业吗
  • 设计、制造
  • 房产税计税依据含税还是不含税
  • 广告业服务收费交税的会计处理怎么做?
  • 企业所得税弥补亏损明细表怎么填写
  • 固定资产月底怎么处理
  • 外汇收不到会不会丢
  • 个人开具工程款发票所得税怎么算
  • 园林绿化税收减免政策
  • 同一个行政区
  • 收取现金后的收入怎么算
  • 报表总收入
  • 一般进口货物的完税价格
  • 短期借款有没有上年结转
  • 此 google 帐号尚未与设备关联
  • 银行拒付汇票金额的救济方法
  • mac系统中文输入法切换
  • .exe是指什么文件
  • PHP:mcrypt_generic_deinit()的用法_Mcrypt函数
  • 增值税专用发票电子版
  • 费用报销单怎样粘贴
  • 报税营业成本可以乱填吗
  • 【Pytorch深度学习实战】(11)变分自动编码器(VAE)
  • 代垫运费算收入吗
  • 公司给员工发放福利会计分录
  • 微信小程序游戏手游排行榜
  • web前端修炼之道
  • 增值税普通发票查询真伪
  • 上年折旧费多计提了,本年怎么调
  • 股权收购账务处理
  • 发票作废发票怎么处理
  • js函数声明的提出者
  • 个体工商户转企业政策
  • 税务企业类型分为哪几种
  • 营业收入净额是利润表的哪个数
  • 所得税 补税
  • 核电站弃置费用通常多少钱
  • 固定资产丢失如何补办
  • 进出口货物报关单填制规范
  • 物业门禁卡怎么入账
  • 汽车销售公司购入汽车会计分录
  • 挂靠被查出来后挂靠费怎么处理?
  • 预付账款是属于什么类
  • 等额年金终值系数与偿债资金系数互为倒数
  • 购销合同印花税2023年新规定
  • 农村会计记账实例
  • 发出商品属于存货的什么科目
  • mysql分区分表原理
  • sql server的相关技术知识
  • ubuntu安装超详细教程
  • solaris删除文件夹命令
  • windows8开机慢怎么办
  • rtmservice.exe - rtmservice是什么进程 有什么用
  • runservice.exe - runservice是什么进程 有什么用
  • win8系统关机在哪
  • win70x80073712解决方法
  • 如何用css画三角形
  • srslte源码分析
  • opengl es应用开发实践指南(android卷)pdf
  • 百度关键词设置
  • javascript definitive guide
  • 批处理循环执行批处理
  • js上滑翻页
  • 数据类型 python
  • javascript的
  • android内存优化三 简书
  • python多进程多线程协程
  • Qt for Android - ANT_HOME is set incorrectly or ant could not be located
  • 河南税务局申报表下载
  • 普通发票红冲税务规定
  • 预到船舶是什么
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设