在谈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. Private Members in JavaScript

    Private Members in JavaScript Douglas Crockford www.crockford.com JavaScript is the world's most mis ...

  2. MYSQLI DEMO

    1.Select // DEMO mysqli连接方式参考 $db = new mysqli("localhost:3306", "root", "& ...

  3. C/C++ 中##(两个井号)和#(一个井号)用法

    ##(两个井号)和#(一个井号)都是什么意思 连接符 ##(两个井号) 不知道什么符 #(一个井号) ## 连接符号由两个井号组成,其功能是在带参数的宏定义中将两个子串(token)联接起来,从而形成 ...

  4. CentOS终端操作mysql

    1.停用mysql服务:service mysqld stop 重启mysql服务:service mysql restart 2.mysql 1045ERROR:mysqld_safe --user ...

  5. 挖掘机控制器与复制其MCU程序

    最近的时间都浪费在两台小松PW128UU-1上面.旧的一台拆了变速箱,装上去以后就变得换挡不行了.新的一台一直都不行,弄过液压泵以后下部分的行走又出现一时正常一时不动的情况. 先说说概况:PW128U ...

  6. Effective Java实作equals() - 就是爱Java

    equals()这个方法,定义在Object class中,这个是所有class的base class,因此所有的class都继承这个方法,默认是比较内存地址,不过Mix需要的是商业规则上的比较,所以 ...

  7. 《Programming WPF》翻译 第9章 5.默认可视化

    原文:<Programming WPF>翻译 第9章 5.默认可视化 虽然为控件提供一个自定义外观的能力是有用的,开发者应该能够使用一个控件而不用必须提供自定义可视化.这个控件应该正好工作 ...

  8. android UI之Shape详解_GradientDrawable

    在Android开发过程中,经常需要改变控件的默认样式, 那么通常会使用多个图片来解决.不过这种方式可能需要多个图片,比如一个按钮,需要点击时的式样图片,默认的式样图片. 这样就容易使apk变大. 那 ...

  9. jquery中table里面的tr里的input添加一行,并且第一列autoincrement

    实现添加一行并且第一列由A0开始autoincrement,代码如下(在文件的同一个文件夹下添加一个jquery.js文件): <!DOCTYPE html PUBLIC "-//W3 ...

  10. 记忆2--记忆的"记"和"忆"

    有时候也会想,我们是如何记住东西的?是如何想起来的?在写这篇文章的时候,想起初中的时候(应当是初二),语文老师检查唐诗背诵,在下面觉得已经能背起来的时候,去向老师背诵的时候,忘记了开头,干急想不起来, ...