位置: 编程技术 - 正文

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)

  • 外贸企业进项税不抵扣分录
  • 销项税转出是啥意思
  • 组成计税价格包括什么
  • 应收账款的期末余额在借方表示什么意思
  • 展位费怎么入账
  • 发票抬头写错了还能改吗
  • 社保费公司部分怎么算
  • 一般纳税人开红票怎么处理
  • 房产税和土地使用税会计分录
  • 单位起诉员工赔偿算劳动争议
  • 不动产修理领用原材料账务处理?
  • 代开专票需要去报税吗?
  • 固定资产提前报废
  • 统借统贷协议
  • 银行要求的补偿性余额所占比例为20%
  • 政府补助企业的钱要交税吗
  • 污水处理增值税征收品目
  • 汇算清缴补交所得税后报表需要调整吗
  • win11如何启用远程访问
  • 事业单位财务预算管理制度
  • 公司员工差旅费报销制度
  • 超市开票收回的钱怎么算
  • 经营出租固定资产折旧额计入什么科目
  • 汇算清缴是哪个报表
  • php字符串函数有哪些
  • 增值税价外费用如何开票
  • 职工福利费会计科目走管理费用
  • picfile什么意思
  • PHP:Memcached::add()的用法_Memcached类
  • Win11 Build 22000.348更新补丁KB5007262预览版发布(附更新修复内容汇总)
  • win7系统禁用u盘
  • 蜻蜓翅膀特写怎么画
  • 个人出租有形动产怎么交税
  • 资产证券化会计信息披露规范
  • 存货包括其他业务成本吗
  • 华侨是否适用个人所得税
  • php中实现文件上传需要用到哪几个函数
  • spring获取bean的完全限定类名
  • spring integration使用:消息转换器
  • php使用什么开发工具
  • ulimit设置不生效
  • 公司法关于公司变更后权利义务的规定
  • php发邮件系统源码
  • 收回投资收到的现金减少
  • 直接免征的税款属于政府补助吗
  • 无形资产入账价值错误怎么调
  • MySQL的主从复制基于什么实现的?
  • Windows Server 2003下修改MySQL 5.5数据库data目录
  • 雇用残疾人税收优惠
  • 哪些项目的进项不含税
  • 储备基金是什么
  • 股东分红需要
  • 固定资产后期可以折旧吗
  • 猪肉蔬菜是免税农产品吗
  • 期间费用是啥
  • 企业预提费用是什么科目
  • 各单位应当设置专职能源管理岗位
  • 投出业务会计分录
  • mysql删除的数据恢复
  • linux系统中的用户分为哪几类
  • centos sudoers
  • windows xp/2000/2003系统自动登陆设置方法无需输入密码
  • win10系统关闭防火墙服务
  • 一岁的宝宝可以喝枸杞水吗
  • linux配置ip地址文件
  • js let语句
  • 通过node-mysql搭建Windows+Node.js+MySQL环境的教程
  • iframe移动端自适应
  • jquery给表格赋值
  • python 异常处理方法
  • unity中播放视频
  • shell脚本实例精讲
  • python-shell
  • unity ti
  • unity 2021.2
  • jquery做下拉
  • 缴纳社保问题证明怎么查
  • 北京中关村海淀医院属于北京几环?
  • 2020年南通居民医保缴费标准
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设