位置: 编程技术 - 正文

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)

  • 所得税费用的计提
  • 计提资本公积的处理
  • 货已到发票未到跨年怎么做账
  • 计算产品当月生产成本
  • 商业折扣的纳税影响
  • 不能计入外购固定资产成本的相关税费
  • 自产的产品无偿赠送职工
  • 偿还不起债务大约能判多少年
  • 公司法人信息变更是先去税务局还是先去银行
  • 个税手续费退还时间
  • 固定资产评估增值递延所得税
  • 最新契税优惠政策公告财政部
  • 总公司给分公司钱
  • 上季度多交的增值税怎么做账
  • 小微企业附加税减半
  • 初级备考需要多长时间
  • 总公司与分公司的税务关系怎么交税
  • ca证书延期不了
  • windows安全警报关不掉
  • 固定资产残值率可以为0吗
  • 未担保余值什么意思
  • 专家评审费报销仅附签字笔迹相似
  • 工资薪金所得包括差旅费津贴吗
  • linux获取网络接口及ip命令
  • 增值税进项税额转出的情况有哪些
  • 转让房屋土地增值税如何计算
  • 其他应付款不需要支付的怎么处理,预算会计
  • 在vue3项目中自定义组件通常存放在
  • phpstudy访问数据库
  • php递归实现1到100的和
  • php中.的作用
  • 投资性房地产公允价值大于账面价值计入
  • ChatGPT 被大面积封号,到底发生什么了?
  • 特征提取原理
  • 阿里云 gtm
  • php面向对象的机制
  • code .命令
  • 对公账号备用金怎么用
  • 企业为什么一定要签三方
  • 收据可以用来做账吗
  • 纳税证明和完税证明的金额为什么不一样
  • 织梦模板如何安装
  • css怎么制作
  • 个人劳务费免税额度 年度
  • 存货跌价准备怎么核算
  • sqlplus查询结果换行
  • SQL Server 2008 R2 应用及多服务器管理
  • 视同销售的会计分录有哪些?
  • 勾选认证能够勾选当月
  • 开票怎么凑齐小票
  • 冲销预付账款后怎么做账
  • 样品制作公司
  • 应收票据及应收账款怎么算
  • 银行日记账登记依据
  • 免抵税额什么意思
  • 客户重复付款了怎么礼貌回复
  • 用友t3普及版价格
  • 盘盈的固定资产按什么入账
  • 资产减值损失结转到本年利润吗
  • 企业如何做账可以不交企业所得税
  • 个体工商户个人经营所得税税率表
  • 修改mysql配置的两种方法
  • mysql优化参数详解
  • win8语言栏不见了 怎么调出来
  • win7一直弹广告怎么办
  • linux终端怎么运行
  • win10系统如何关闭窗口特效
  • Ubuntu14.04 的 SSH 无密码登录的设置方法
  • windows更新过程中
  • cleanmymac3激活码领取
  • win8系统自带应用都打不开了怎么办
  • win10 20h2怎么更新
  • cocos2d-x教程
  • js设计模式有什么用
  • isscroll.js
  • js处理时间格式
  • python嵌套语句
  • 从最近两会看苹果和谷歌的最大梦魇
  • 合规管理的基本要求
  • 江西国家税务局入围体检名单
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设