位置: 编程技术 - 正文

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)

  • 个体户需要税务申报吗?
  • 建安行业是建筑行业吗
  • 公司的社保缴费基数不是工资数
  • 固定资产清理属于流动资产吗
  • 事业单位固定资产入账标准最新规定
  • 固定资产原值错误的账务处理
  • 公允价值变动损益和投资收益区别
  • 跨月的普通发票怎么开
  • 应交税金及附加包括哪些
  • 黄金以旧换新工费多少钱一克
  • 国有资产无偿划转管理办法
  • 简易计税在借方还是贷方
  • 工会经费应该计入人工成本吗
  • 没有增值税发票怎么出口
  • 滴滴客运服务费发票税率
  • 发票打印机的字偏上
  • 2018年生育保险报销
  • 工商年报单位缴费基数从哪看
  • 金税盘发票份数没有显示
  • 医保退休必须交多少年辽阳
  • 小规模纳税人如何转一般纳税人
  • 个体工商户减免房租政策2022年
  • 利润表有盈利能力吗
  • 特种设备年检费怎么开具发票
  • 简易征收发票能抵扣吗
  • 为什么WIN10系统打在画面进不去
  • 公司客户招待费用标准
  • 医疗保险在外地交了老家还要交吗
  • 怎么u盘装系统,u盘装系统教程图解
  • 百度地图api的基本使用
  • b/s架构的正确解释方式
  • 前端搭建项目
  • react 入门
  • dmsetup remove_all 会不会清掉数据
  • 简单易学的前端框架
  • 年金现值系数和复利现值系数的公式
  • 长期股权投资哪些用成本法
  • vue3.0用法
  • 帝国cms如何做网站
  • 专利费用计入什么会计科目
  • 买新车检测费
  • 代开发票相关问答有什么?
  • 电子承兑汇票是银行承兑汇票吗
  • 软件退税款会计如何处理
  • 转出未交增值税会计账务处理
  • 房地产企业收到政府土地补偿款如何入账
  • 企业所得税审计调整分录
  • 常用的加速折旧方法
  • 什么是内部报酬吗
  • 退了的社保能申请回来吗
  • 小规模纳税人所得税优惠政策2023
  • 残联对残疾人的补助资金是多少
  • 总分类账与明细分类账的关系
  • 新会计准则应用
  • 房地产开发企业销售自行开发的房地产项目
  • 如何更换会计账号
  • 租赁房屋期间发生事故谁负责
  • 酒店财务帐务处理方案
  • 懒癌患者如何自救
  • ubuntu20.10安装教程
  • 如何解决windows无法访问指定设备
  • Linux内核级别的资源隔离机制是
  • leerfel是什么牌子
  • win8双系统怎么切换
  • 禁用远程桌面服务登录
  • c盘越来越小了
  • linux服务器常用操作命令
  • win7声音扬声器设置
  • 深入react技术栈
  • [置顶] 《借.住.情.缘》
  • python定时利用QQ邮件发送天气预报的实例
  • animate javascript
  • Vuforia ImageTarget Native版本编译
  • jquery实战
  • flappy bird攻略
  • java script入门
  • python中url
  • 陕西电子税务局官网
  • 山西省网上营业执照申请官网?
  • 地税占税收的比例多少
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设