位置: 编程技术 - 正文

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)

  • 个税要计提吗?
  • 计提附加税金额
  • 发票开具就能做账了吗
  • 个体经营所得税核定征收2023标准
  • 农民合作社交哪些税
  • 农业免税企业账户怎么查
  • 交易性金融资产公允价值变动计入
  • 外贸企业当月没交税
  • 可供出售权益工具投资公允价值的增加
  • 短期借款,应付票据,应付账款和应交税费属于
  • 国地税合并后有多少个税种
  • 进口商品不提供发票合法吗
  • 福利费结转以后年度
  • 出售旧机床的账务处理
  • 忘记申报印花税,但是公司已经注销了怎么办
  • 企业与个人租赁合同范本
  • 搅拌站需要什么土地
  • 差额发票开具的步骤
  • 单位汽车按揭贷款怎么贷
  • 建筑业简易计税税率
  • 法人一证通报建
  • 贴息债券计算公式
  • 库存商品在贷方怎么调回借方
  • 去年开的增值税普通发票今年可以作废吗
  • 劳务费个税计算方式
  • 收到购买商品发票怎么做账
  • win10桌面网络图标怎么调出来
  • 购买种子怎么做账
  • win10专业版19042.630
  • 电脑安全模式有声音吗
  • ghost还原问题1823
  • 酒店采购布草如何入账
  • 公司收入没有进项税额
  • php unset()
  • 购买生产用品计入什么科目
  • 企业研发费用的优惠政策
  • 房地产企业如何计算土地使用税
  • 前端播放视频的插件
  • 难以置信含义
  • 单文件php文件列表
  • 实收资本注入怎么操作
  • 增值税专票和普票的区别图片
  • 存货的成本包括哪几项
  • 接待客户的住宿费计入什么科目
  • 购买图书的会计账务处理
  • 付国外专利费用需办什么手续
  • 以前年度未入账固定资产账务处理
  • 工程行业预交税款怎么算
  • 发票行业税目怎么选
  • mysql修改表结构的关键字
  • 税率变更对企业的影响
  • 生产车间为生产产品
  • 研发折旧怎么分类
  • 银行承兑汇票收款人是谁
  • 支付结算办法是部门规章吗
  • 安装生产流水线工程领用原材料
  • 建筑工程承包合同保证保险中,承保工程所有人
  • 建安企业无收入证明模板
  • 固定资产更换配件 资本化标准
  • 其他综合收益转出
  • 建筑材料检测费入账科目
  • 企业分红给个人的税收
  • 总账会计工作流程表
  • 利润总额与应纳税所得额的差异国内动态
  • sql server 2000中的安全性包含
  • windows8.1开机
  • 密码多次错误被锁定怎么办
  • centos etc
  • printnow.exe - printnow是什么进程 有什么作用
  • win7系统电脑硬盘图标变了,控制面板也打不开
  • win10飞行模式开关是灰色的
  • win7电脑能玩啥游戏
  • win7怎么截屏幕
  • win8没有开始菜单 点键盘开始菜单黑屏
  • shell删除一个文件
  • 河南12306区号
  • 国家税务总局商洛市税务局
  • 发票校验码不清楚
  • 国税局巡察整改方案
  • 电子税务局怎么删除办税员
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设