Js中的事件委托/事件代理

时间: 2019-04-07阅读: 208标签: 事件

什么叫事件委托/事件代理呢 ?

JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。
 

事件冒泡:

当事件发生后,这个事件就要开始传播(从里到外或者从外向里),为什么要传播呢?因为事件源本身(可能)并没有处理事件的能力,即处理事件的函数(方法)并未绑定在该事件源上。
例如我们点击一个按钮时,就会产生一个click事件,但这个按钮本身可能不能处理这个事件,事件必须从这个按钮传播出去,从而到达能够处理这个事件的代码中.

事件委托:

是利用事件的冒泡原理来实现的,何为事件冒泡呢?
就是事件从最深的节点开始,然后逐步向上传播事件,举个例子:
div > ul > li > a
比如给最里面的a加一个click点击事件,那么这个事件就会一层一层的往外执行,执行顺序: 
有这样一个机制,那么我们给最外面的div加点击事件,那么里面的 ul,li,a 做点击事件的时候,都会冒泡到最外层的 div 上,所以都会触发,这就是事件委托,委托它们父级代为执行事件.
 

为什么要用事件委托:

一般来说,dom需要有事件处理程序,我们都会直接给它设事件处理程序就好了,那如果是很多的dom需要添加事件处理呢?比如我们有100个li,每个li都有相同的click点击事件,可能我们会用for循环的方法,来遍历所有的li,然后给它们添加事件,那这么做会存在什么影响呢 ?
在JavaScript中,添加到页面上的事件处理程序数量将直接关系到页面的整体性能,因为需要不断的与dom节点进行交互,访问dom的次数越多,引起浏览器重绘与重排的次数也就越多,就会延长整个页面的交互就绪时间,这就是为什么性能优化的主要思想之一就是减少DOM操作的原因;如果要用事件委托,就会将所有的操作放到js程序里面,与dom的操作就只需要交互一次,这样就能大大的减少与dom的交互次数,提高性能;


vue的事件冒泡

先说冒泡,我们都知道水中有气泡的时候,气泡会从水底往上升,由深往浅的。但是水在上升的过程中会经历不同的深度的水。那么我们再来解释一下什么是事件冒泡

jquery的bind跟on绑定事件的区别

Jquery的bind跟on绑定事件的区别:主要是事件冒泡(事件代理);jquery文档中bind和on函数绑定事件的用法:.bind(events [,eventData], handler);.on(events [,selector] [,data], handler)

原生js实现trigger方法

事件绑定成功之后,事件的执行函数就如同待字闺中的小姑娘。除了由坐在电脑前的大叔们用键盘、鼠标等硬件行为触发外,需要在代码中直接调用又该如何实现?

NodeJS事件

触发器Emitter会触发命名事件eventName来调用函数Listener,移除指定事件的指定监听器:emitter.removeListener(eName, listener)、emitter.off(eName,listener) 设置监听器最大绑定值:emitter.setMaxListeners(n)

JavaScript 事件

客户端 JavaScript 程序采用了异步事件驱动编程模型、事件不是 JavaScript 对象,不会出现在程序源代码中、事件类型是一个用来说明发生什么类型事件的字符串,有时会称之为事件名字

jQuery on()方法使用

本文实例讲述了jQuery中on()方法用法。分享给大家供大家参考。具体分析如下:此方法可以在匹配元素上绑定一个或者多个事件处理函数。使用off()方法可以删除on()方法绑定的事件。

JavaScript模拟事件的注意要点

DOM中的事件模拟三个步骤: 首先通过document.createEvent()方法创建event对象,接收一个参数,即表示要创建的事件类型的字符串:UIEvents(DOM3中的UIEvent)鼠标和键盘事件

手写事件代理函数

面试是不是听过无数遍呢 !今天我们来手写一个这样的事件委托函数,它是通过事件冒泡机制,即子元素上触发的事件会冒泡到父级上, 即父级也会触发该类型的事件

Selenium WebDriver 中鼠标和键盘事件分析及扩展

在使用 Selenium WebDriver 做自动化测试的时候,会经常模拟鼠标和键盘的一些行为。比如使用鼠标单击、双击、右击、拖拽等动作;或者键盘输入、快捷键使用、组合键使用等模拟键盘的操作

JavaScript 事件冒泡和捕获模式

捕获模式1,addEventListener 的第三个参数 useCapture 为 true 则为捕获模式2,点击 C 时事件触发顺序为 A -> B -> C

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全