事件委托(事件代理)的原理以及优缺点是什么?

事件委托原理:事件冒泡机制。优点:1.可以大量节省内存占用,减少事件注册。比如ul上代理所有li的click事件就很不错。2.可以实现当新增子对象时,无需再对其进行事件绑定,对于动态内容部分尤为合适缺点:事件代理的常用应用应该仅限于上述需求,如果把所有事件都用事件代理,可能会出现事件误判。即本不该被触发的事件被绑定上了事件。

看下面的例子:
 1 <ul id="ul1">
 2     <li>111</li>
 3     <li>222</li>
 4     <li>333</li>
 5 </ul>
 6
 7 <script>
 8     var oUl1 = document.getElementById(‘ul1‘);
 9     myAddEvent(oUl1,‘click‘,function(e){
10         var e = e || window.event;
11         var target = e.target || e.srcElement;
12         if(target.nodeName === ‘LI‘){
13             alert(target.innerHTML);
14             target.style.background = ‘red‘;
15         }
16     });
17     // 事件绑定封装成js函数
18     function myAddEvent(obj, ev, fn){
19         if(obj.attachEvent){ // ie
20             obj.attachEvent(‘on‘+ev, fn);
21         }else{
22             obj.addEventListener(ev, fn, false);
23         }
24     }
25
26
27 </script>
时间: 2024-08-01 10:46:36

事件委托(事件代理)的原理以及优缺点是什么?的相关文章

JavaScript中事件委托(事件代理)详解

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

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

什么叫事件委托/事件代理呢 ? JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件. 事件冒泡: 当事件发生后,这个事件就要开始传播(从里到外或者从外向里),为什么要传播呢?因为事件源本身(可能)并没有处理事件的能力,即处理事件的函数(方法)并未绑定在该事件源上. 例如我们点击一个按钮时,就会产生一个click事件,但这个按钮本身可能不能处理这个事件,事件必须从这个按钮传播出去,从而到达能够处理这个事件的代码中. 事件委托: 是利

javascript 事件委托(代理)

事件委托(代理):就是利用事件冒泡机制,在最顶层触发事件的dom对象上绑定一个处理函数.在当有需要很多dom对象要绑定事件的情况下,可以使用事件委托. 事件委托的好处是:节省资源 和 新增的元素也会有事件处理机制(这是项目中比较常见的问题) 简要的用两个例子来解释一下事件委托这回事... 先说说要产生的效果:我的想法是利用按钮点击新增li标签,而且新增的li标签也要有点击事件... HTML 代码 <ul id="ul1"> <li>1111</li>

理解js事件冒泡事件委托事件捕获

js事件冒泡 javascript的事件传播过程中,当事件在一个元素上出发之后,事件会逐级传播给先辈元素,直到document为止,有的浏览器可能到window为止,这就是事件冒泡现象. <div id="col">    <p>        <a id="btn" href="#">button</a>    </p></div> <script> let b

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

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

JS——事件委托或代理

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

事件委托(代理)

事件委托:当我们需要对很多元素添加事件的时候,可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数.这主要得益于浏览器的事件冒泡机制. 例如: <ul id="ul1">                                  var oUl = document.getElementById("ul1"); <li>111</li>                             var aLi

事件监听 事件委托 事件绑定

1.事件冒泡 在类似 body > div > a 这样的结构中,如果单击a元素,click事件会从a一直冒泡到div和body(即document对象).因此,发生在a上面的单击事件,div和body元素同样可以处理 2.事件委托 利用事件传播(这里是冒泡)这个机制,就可以实现事件委托.具体来说,事件委托就是事件目标自身不处理事件,而是把处理任务委托给其父元素或者祖先元素,甚至根元素(document) (1)jQuery的 bind() 方法,使用.bind()方法只会给第一页中的50个单

0173 事件委托:原理、作用

事件冒泡本身的特性,会带来的坏处,也会带来的好处. 1.3.8.1 什么是事件委托 事件委托:也称为事件代理,在 jQuery 里面称为事件委派. 把事情委托给别人,代为处理. 说白了就是,不给子元素注册事件,给父元素注册事件,把处理代码在父元素的事件中执行. 生活中的代理: js事件中的代理: 1.3.8.2 事件委托的原理 ? 给父元素注册事件,利用事件冒泡,当子元素的事件触发,会冒泡到父元素,然后去控制相应的子元素[利用事件冒泡影响每一个子节点]. 1.3.8.3 事件委托的作用 我们只操