js中的事件委托或事件代理

Posted 30号

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js中的事件委托或事件代理相关的知识,希望对你有一定的参考价值。

一,概述

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

  举一个网上大牛们讲事件委托都会举的例子:就是取快递来解释,有三个同事预计会在周一收到快递。为签收快递,有两种办法:一是三个人在公司门口等快递;二是委托给前台MM代为签收。现实当中,我们大都采用委托的方案(公司也不会容忍那么多员工站在门口就为了等快递)。前台MM收到快递后,她会判断收件人是谁,然后按照收件人的要求签收,甚至代为付款。这种方案还有一个优势,那就是即使公司里来了新员工(不管多少),前台MM也会在收到寄给新员工的快递后核实并代为签收。即程序中不管是现有的DOM节点还是新添加的DOM节点都是有事件的。

二,原理

  事件委托是利用事件的冒泡原理实现的。事件冒泡的定义:事件从最深的节点开始,然后逐步向上传播事件。

  举例:一个节点树,div>ul>li>a,当我们给标签a添加一个click事件,当我们点击a标签的时候,事件就会按照a>li>ul>div一层一层像冒泡一样往外执行。所以如果我们在最外层的div上绑定一个click事件,那么当我们点击div中的ul, li, a的时候,都会冒泡到div上,触发最外层div上的click事件。这就是事件委托,委托父级标签代为执行事件。

三,实现

<ul id="ul1">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

  用事件委托的方式实现点击li时分别弹出对应的li中的内容。Event对象提供了一个属性叫target,可以返回事件的目标节点。也就是说target可以表示为当前事件操作的DOM,但是不是真正的DOM。这个地方有一个浏览器兼容的问题,那就是标准浏览器用ev.target,IE浏览器用event.srcElement。这个时候我们就可以用target.nodeName获取标签名。这个地方有一个小坑,target.nodeName的返回是大写的,我们可以将其转为小写的在做比较。下面直接贴代码

window.onload = function(){
  var ulObj = document.getElementById("ul1");
  ulObj.onclick = function(ev){
      var ev = ev || window.event;
     var target = ev.target || ev.srcElement;
     if (target.nodeName.toLowerCase() == ‘li‘){
      alert(target.innerhtml);
    }
  } }

四,使用事件委托的好处

  性能优化的主要方法之一就是减少DOM操作的次数。使用事件委托根本不需要去遍历元素的子节点,只需在父级元素上添加事件,只需与DOM交互一次,然后将所有的操作放到js程序里面,这样就能大大减少与DOM的交互次数,提高性能。而且,减少函数的个数,也可以减少内存占用率。







以上是关于js中的事件委托或事件代理的主要内容,如果未能解决你的问题,请参考以下文章

js中的事件委托/代理

JS——事件委托或代理

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

js中的事件委托或是事件代理详解

JS中的事件委托/代理详解

js中的事件委托(事件代理)详解