之前有接触过事件代理,但是印象并不深刻。这次记下来加强印象。

  用个大家比较常见的代码举例子:

 html dom结构:

<ul id="ul1">
<li>001</li>
<li>002</li>
<li>003</li>
</ul>
需求:如果需要给每个li添加点击事件。js代码如下
<script>
var oUl = document.getElementById('ul1');
var aLi = oUl.getElementsByTagName('li');
for (var i = 0, i = aLi.length; i++) {
  aLi[i].onclick = fn;
}
</script>

   常规实现方法:遍历每个li,给每个li单独加点击事件。

  缺点:

    1、假如现在页面有很多个li,比如门户新闻网站新闻列表。如果需要遍历的话,比较影响性能。

    2、如果新添加一个li,比如发微博的时候,刚刚发出来的微博,会不会刚发出来的微博就带事件了。

      针对第2点:答案是新创建的元素是不带有之前遍历的事件,因为在创建元素之前,已经遍历完li,给已经存在的li加事件了。

  解决方案:

    为了解决上面这两个缺点,我们用事件代理,也叫事件委托的方式实现。

    为了更好理解事件委托,应该先了解一下事件冒泡知识。在这里,我就不详细说事件冒泡了。

    根据事件冒泡或者捕获的特性,我们可以给ul加点击事件。

  代码:

var oUl = document.getElementById('ul1');
oUl.onclick = function(ev) {
var ev = ev || event;
//兼容处理
var target = ev.target || ev.srcElement;
  //找到li元素
if (target.nodeName.toLowerCase() == 'li') {
//li添加的事件
fn();
}
}

  总结:虽然ev对象有一定的兼容性,但是在此处兼容性处理并不难。其实事件委托本质就是给多组元素的父级加事件,再利用冒泡或者捕获找到下面的子元素,然后单独绑定事件。

javascript事件代理(委托)的更多相关文章

  1. JavaScript事件代理和委托(Delegation)

    JavaScript事件代理 首先介绍一下JavaScript的事件代理.事件代理在JS世界中一个非常有用也很有趣的功能.当我们需要对很多元素添加事件的时候,可以通过将事件添加到它们的父节点而将事件委 ...

  2. JavaScript事件代理和委托

    在javasript中,代理.委托经常出现. 那么它究竟在什么样的情况下使用?它的原理又是什么? 这里介绍一下javascript delegate的用法和原理,以及Dojo,jQuery等框架中de ...

  3. JavaScript 事件代理

    转自:http://www.cnblogs.com/silence516/archive/2009/09/03/delegateEvent.html 如果你想给网页添加点JavaScript的交互性, ...

  4. JavaScript事件代理和事件委托

    一.概述: 那什么叫事件委托呢?它还有一个名字叫事件代理,JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件.那这是什么意思呢?网上的 ...

  5. JavaScript中的事件代理/委托

    事件委托在JS高级程序设计中的定义为"利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件" 如何理解上面的这句话呢,在网上,大牛们一般都使用收快递这个例子来解释的, ...

  6. JavaScript事件代理入门

    事件代理(Event Delegation),又称之为事件委托.是 JavaScript 中常用绑定事件的常用技巧. 顾名思义,“事件代理”即是把原本需要绑定的事件委托给父元素,让父元素担当事件监听的 ...

  7. javascript 事件代理及应用

    事件代理又叫事件委托在前端发开中实际是非常有用的,说事件代理之前我们先说说事件绑定 <p onclick="test()" ></p> function t ...

  8. 【转载】浅谈事件冒泡与事件捕获 - javascript 事件代理

    原文:https://segmentfault.com/a/1190000000749838 事件冒泡与事件捕获 事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念都是为了解决页面中事件流(事件发 ...

  9. javascript事件代理(Event Delegation)

    看了几篇文章,放上来供参考 司徒正美的文章,Event Delegation Made Easy --------------------------------------------------- ...

随机推荐

  1. 使用Vagrant在Windows下部署开发环境

    做Web开发少不了要在本地搭建好开发环境,虽然说目前各种脚本都有对应的Windows版,甚至是一键安装包,但很多时候和Windows环境的相性并不是那么好,各麻烦的问题是实际部署的环境通常是Linux ...

  2. SCCM 2012系列之新特性

    SCCM 2012站点类型: 站点 作用 相对于SCCM 2007 的变化 中心管理站点The central administration site(CAS) 中心管理站点协调内部站点的数据复制.使 ...

  3. ISO13485给企业带来的益处

    1.ISO13485变强制性认证,日益受到欧美和中国政府机构的重视,有利于消除国际贸易中的技术壁垒,是进入国际市场的通行证: 2.提高和改善企业的管理水平,增加企业的知名度: 3.提高和保证产品的质量 ...

  4. 推荐系统之基于二部图的个性化推荐系统原理及C++实现

    1.引言 许多网站都喜欢让用户点击“喜欢/不喜欢”,“顶/反对”,也正是这种很简单的信息也可以利用起来对用户进行推荐!这里介绍一种基于网络结构的推荐系统! 由于推荐系统深深植根于互联网,用户与用户之间 ...

  5. Codeforces Gym 100531D Digits 暴力

    Problem D. Digits 题目连接: http://codeforces.com/gym/100531/attachments Description Little Petya likes ...

  6. Delphi调用WebService(通过SoapHeader认证)经验总结

    项目(Delphi开发)需要调用另一个系统的WebService.走了不少弯路,现记录总结一下经验.以下是WebService要求: 1.WebService概述 营销Webservice接口采用Ap ...

  7. [AngularJS] Accessing Data in HTML -- controllerAs, using promises

    <!DOCTYPE html> <html> <head> <title>Access Data From HTML</title> < ...

  8. iOS-swift环形进度指示器+图片加载动画

    demo.gif 如图,这个动画的是如何做的呢? 分析: 1.环形进度指示器,根据下载进度来更新它 2.扩展环,向内向外扩展这个环,中间扩展的时候,去掉这个遮盖 一.环形进度指示器 1.自定义View ...

  9. 深入理解MYSQL的MDL元数据锁

    1 前言 2 MDL锁与实现 3 MDL锁的性能与并发改进 4 MDL锁的诊断 前言 好久没更新,主要是因为Inside君最近沉迷于一部动画片——<新葫芦娃兄弟>.终于抽得闲,完成了本篇关 ...

  10. mfc extention dll 與 normal dll 的區別

    extention dll 1.指從MFC中繼承過來的DLL,一般要求使用共享MFC DLL進行連接,也要求調用者也使用MFC且使用共享MFC,如此可保證DLL與調用者有相同的MFC庫. 2.在使用資 ...