在谈js的事件委托之前,先来简单说说js事件的一些基础知识吧。

什么是事件?Javascipt与HTML之间的交互是通过事件实现的。事件,就是文档或浏览器中发生的一些特定的交互瞬间。

什么是事件流?事件流描述的是从页面接受事件的顺序。事件流主要分为两种,事件冒泡和事件捕获。

什么是事件冒泡和事件捕获?

事件冒泡即事件开始时有最具体的元素(文档中嵌套最深的那个节点) 接收,然后逐级向上传播到较为不具体的节点。

比如有那么一个节点树,document>html>body>div,当我们给div加上一个点击事件的时候,那么这个点击事件会按照div>body>html>document这个顺序传播。

事件捕获恰好与事件冒泡相反,它的机制是从不太具体的节点应该更早的接收到事件,而最具体的节点应该最后收到事件。

还是刚刚那个例子,有那么一个节点树,document>html>body>div,当我们给div加上一个点击事件的时候,那么这个时候的触发顺序应该是document>html>body>div。

事件委托

什么叫事件委托呢?也叫叫事件代理,事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。

对于如何解释清楚事件委托,下面有一个示例,是从其他大牛上的博客看到的,解释的非常清楚,这里就拿过来摘抄了。

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

这里其实还有2层意思的:

第一,现在委托前台的同事是可以代为签收的,即程序中的现有的dom节点是有事件的;

第二,新员工也是可以被前台MM代为签收的,即程序中新添加的dom节点也是有事件的。

比如对ul下4个li设置点击事件,原来的方法可能是对li遍历,然后加上点击事件。用事件委托的话直接对ul设置点击事件,可以达到少操作几次DOM,提高性能。

 

Javascript的事件委托的更多相关文章

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

    在JavaScript的事件中,存在事件委托(事件代理),那么什么是事件委托呢? 事件委托在生活中的例子: 有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三个人在公司门口等快递:二是委托 ...

  2. javascript使用事件委托

    事件委托是javascript中一个很重要的概念,其基本思路就是利用了事件冒泡的机制,给上级(父级)元素触发事件的dom对象上绑定一个处理函数.在当有需要很多dom对象要绑定事件的情况下,可以使用事件 ...

  3. JavaScript / JQuery事件委托如何实现?

    一:什么是事件委托? 事件委托是利用事件冒泡,只指定一个事件处理程序来管理某一类型的所有事件. 事件委托就是利用事件冒泡原理实现的! 事件冒泡:就是事件从最深节点开始,然后逐步向上传播事件: 例:页面 ...

  4. javaScript绑定事件委托 demo

    事件绑定通常发生在 onload 或 DOMContentReady , 事件绑定占用 处理时间 占用内存, 而且不是每个事件都会被 点击执行. 由此 事件委托 可以优化事件绑定行为.. 事件逐层冒泡 ...

  5. JavaScript之事件委托(附原生js和jQuery代码)

    事件委托的原理依赖于事件冒泡,可以通过给父元素的事件委托来确定是哪个子元素触发了事件从而做一系列操作. 使用事件委托的优点 1.操作子元素时不用一一遍历,可以根据事件触发的对象而进行相应操作 dom结 ...

  6. JavaScript, JQuery事件委托

    1.引言 现实当中,前台MM收到快递后,她会判断收件人是谁,然后按照收件人的要求签收,甚至代为付款.(公司也不会容忍那么多员工站在门口就为了等快递); 这种事件委托还有个好处,就是即便公司又来很多员工 ...

  7. Javascript事件模型系列(二)事件的捕获-冒泡机制及事件委托机制

    一.事件的捕获与冒泡 由W3C规定的DOM2标准中,一次事件的完整过程包括三步:捕获→执行目标元素的监听函数→冒泡,在捕获和冒泡阶段,会依次检查途径的每个节点,如果该节点注册了相应的监听函数,则执行监 ...

  8. 简单说 JavaScript中的事件委托(下)

    说明 上次我们说了一些,关于 JavaScript中事件委托的 基础知识,这次我们继续来看. 解释 先来一段代码 <!doctype html> <html lang="e ...

  9. javascript事件监听与事件委托

      事件监听与事件委托 在js中,常用到element.addEventListener()来进行事件的监听.但是当页面中存在大量需要绑定事件的元素时,这种方式可能会带来性能影响.此时,我们可以用事件 ...

随机推荐

  1. OpenGL ES 2.0 雾

    在场景中使用雾不但可以提高真实感,特定的情况下还能优化性能.具体是指当物体离摄像机足够远时,雾就足够浓,此时只能看到雾而看不到物体,也就不必对物体着色进行详细计算,这样可以大大提高渲染效率. 雾有很多 ...

  2. Light oj 1030 二分查找

    1088 - Points in Segments   PDF (English) Statistics Forum Time Limit: 2 second(s) Memory Limit: 32 ...

  3. WordPress插件制作教程(三): 添加菜单的方法

    上一篇编写了一个简单的插件,让大家对插件的简单制作有个了解,这一篇我们在更深一步,当我们激活插件后后台会显示菜单出来,然后通过单击菜单显示自己定义好的信息.激活之后会在WordPress后台显示一个菜 ...

  4. memcached的安装

    最近在研究怎么让Discuz!去应用Memcache去做一些事情,记录下Memcache安装的过程. Linux下Memcache服务器端的安装 服务器端主要是安装memcache服务器端,目前的最新 ...

  5. 集合:在我的世界里,你就是唯一 - 零基础入门学习Python027

    集合:在我的世界里,你就是唯一 让编程改变世界 Change the world by program 好,上课之前小甲鱼考考大家还记不记得上节课的内容?上节课我们讲Python中的"字典& ...

  6. easy ui 实现gridview效果

    前台: // 加载审批步骤列表 function FillStep(flowID) { $('#tbStepList').datagrid({ url: "/System/ApproverS ...

  7. 自定义JsonResult处理JSON序列化DateTime类型数据(Ext4.2+ASP.NET MVC 4)

    最近项目中前台页面使用Extjs4.2 ,在后台ASP.NET MVC4返回的DateTime类型的数据错返回的DateTime类型的JsonResult的结果中的值是“\/Date(13784461 ...

  8. 【HDU1233】还是畅通工程(MST基础题)

    无坑,裸题.直接敲就恩那个AC. #include <iostream> #include <cstring> #include <cstdio> #include ...

  9. Fancy

    Fancy 在欢喜您可以轻易发现并购买由全球最具品味的社区为您挑选的精美商品.

  10. Javascript刷新页面的几种方法:

    Javascript刷新页面的几种方法: 1    history.go(0) 2    window.location.reload() window.location.reload(true)  ...