js事件委托

1、普通事件绑定的弊端：

事件绑定只能绑已经存在的元素，对新增的元素无能为力，而且当元素非常多的时候，比如一个很大的表格的单元格，
每个单元格绑定一个事件很明显开销很大

2、事件委托意义：

解决矛盾是发展的源动力，事件委托就是专门解决这两个问题的，原理是事件捕获的冒泡捕获原理，单元格的事件可以
冒泡到其父元素（如表格，body）再进行捕获处理，减少了事件绑定的数量。新增的单元格事件同样也会冒泡到这些元
素上进行处理，一箭双雕，妙妙妙。

3、事件委托的实现：

jquery.live()函数
时间： 2024-10-11 07:03:28

js事件委托的相关文章

js事件委托及其原理

1,什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件. 也就是:利用冒泡的原理,把事件加到父级上,触发执行效果. 好处呢:1,提高性能. 我们可以看一个例子:需要触发每个li来改变他们的背景颜色. <ul id="ul"> <li>aaaaaaaa</li> <li>bbbbbbbb&l

JS事件委托学习

JS 事件委托就是利用冒泡原理,把事件加到父级上触发,执行效果. 好处: 1.提高性能 2.新添加的元素还会有之前的事件 <ul id="ul">     <li>111111</li>     <li>22222</li>     <li>333333</li>     <li>444444</li></ul> 这样一个HTML结构 我想要给LI增加一个鼠标点击的效

JS——事件委托或代理

那什么叫事件委托呢?它还有一个名字叫事件代理,JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件.那这是什么意思呢?网上的各位大牛们讲事件委托基本上都用了同一个例子,就是取快递来解释这个现象,我仔细揣摩了一下,这个例子还真是恰当,我就不去想别的例子来解释了,借花献佛,我摘过来,大家认真领会一下事件委托到底是一个什么原理: 有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三个人在公司门口等快递:二是委托给前台MM代为签收

js事件委托（事件代理）

事件委托 js中事件冒泡我们知道,子元素身上的事件会冒泡到父元素身上,事件代理就是本来加载子元素身上的事件,加在其父元素身上,其问起产生了,那么多的子元素怎么区分事件本应该是哪个子元素的. 答案就是event对象记录的事件源,他就是发生事件的子元素: 事件委托的好处? 1.效率高,比如不用for循环 2.js新生成的子元素也不用新其添加事件,程序逻辑比较方便 例子1. 页面有个ul包含着4个li,鼠标移动到li上,li背景变成粉色,移出,背景恢复原色. <!DOCTYPE html> <

JS事件委托机制简介

目的--为了减少对DOM的操作,使用事件委托. 理解--举例说明:有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三个人在公司门口等快递:二是委托给前台MM代为签收.现实当中,我们大都采用委托的方案(公司也不会容忍那么多员工站在门口就为了等快递).前台MM收到快递后,她会判断收件人是谁,然后按照收件人的要求签收,甚至代为付款.这种方案还有一个优势,那就是即使公司里来了新员工(不管多少),前台MM也会在收到寄给新员工的快递后核实并代为签收. 原理--事件委托是利用事件的冒泡原理来实现的

[转载]JS事件委托(事件代理)的原理以及优缺点

1,什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件. 也就是:利用冒泡的原理,把事件加到父级上,触发执行效果. 好处呢:1,提高性能. 我们可以看一个例子:需要触发每个li来改变他们的背景颜色. <ul id="ul"> <li>aaaaaaaa</li> <li>bbbbbbbb&l

js 事件委托

随着DOM结构的复杂化和Ajax等动态脚本技术的运用,事件委托自然浮出了水面.jQuery为绑定和委托事件提供了.bind()..live()和.delegate()方法.本文在讨论这几个方法内部实现的基础上,展示它们的优劣势及适用场合. 事件委托 事件委托的事例在现实当中比比皆是.比如,有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三个人在公司门口等快递:二是委托给前台 MM代为签收.现实当中,我们大都采用委托的方案(公司也不会容忍那么多员工站在门口就为了等快递).前台MM收到快

js事件委托和事件冒泡

<div id="ulbox" class="ulbox"> <a> <img src="../../dist/img/77014842_5.jpg" width="30px" /> <p>aaa</p> <span>111</span> <input type="radio" name="sex"

JS事件委托应用场景

给列表元素添加点击事件: 在javaScript中,添加到页面上的事件处理程序的数量,将直接关系到页面的整体运行性能. <li>标签的数量很大时,循环为每个子元素添加事件,绝非好方法. 有一种优雅的方法,就是事件委托. 使用事件委托只为<ul>元素添加一个onclick事件处理程序. 因为有事件冒泡机制,单击每个<li>标签时,都会被这个函数处理. 1 <!DOCTYPE html> 2 <html lang="en"> 3