事件委托主要用于一个父容器下面有很多功能相仿的子容器，这时候就需要将子容器的事件监听交给父容器来做。父容器之所以能够帮子容器监听其原理是事件冒泡，对于子容器的点击在冒泡时会被父容器捕获到，然后用e.target来判断到底是哪个子容器触发了事件

示例代码：

<html>

    <head></head>

    <body>

        <ul id="myul">

            <li>1</li>

            <li>2</li>

            <li>3</li>

            <li>4</li>

        </ul>

    </body>

    <script type="text/javascript">

        var ul = document.getElementById("myul")

        ul.addEventListener('click',function(e){

            alert("选中了："+e.target.innerHTML)

            console.log(e.target)

        })

    </script>

</html>

点击第二个li，console输出<li>2</li>从console的输出我们可以判断出e.target返回的是触发事件的element类型

然后我们看看这个事件委托会不会冒泡

<html>

    <head></head>

    <body>

        <div id="mydiv">

            <div>

            234

                <p>123</p>

            </div>

        </div>

    </body>

    <script type="text/javascript">

        var div = document.getElementById("mydiv")

        div.addEventListener('click',function(e){

            alert("选中了："+e.target.innerHTML)

            console.log(e.target)

        })

    </script>

</html>

点击p，发现只有p的事件触发了，上一级的父组件并没有被输出，所以事件委托中e.target就单指那个被点击的组件

最后试一下stopPropagation会不会阻止委托的父元素接收事件

<html>

    <head></head>

    <body>

        <ul id="myul">

            <li>1</li>

            <li>2</li>

            <li>3</li>

            <li>4</li>

        </ul>

    </body>

    <script type="text/javascript">

        var ul = document.getElementById("myul")

        ul.addEventListener('click',function(e){

            alert("选中了："+e.target.innerHTML)

            console.log(e.target)

        })

        document.getElementsByTagName("li")[0].addEventListener('click',function(e){

            e.stopPropagation()

        })

    </script>

</html>

由于阻断了了事件冒泡，所以点击第一个li没有反应。

面试整理（3）js事件委托的更多相关文章

  1. JS事件委托学习（转）

    JS 事件委托就是利用冒泡原理,把事件加到父级上触发,执行效果. 好处: 1.提高性能 2.新添加的元素还会有之前的事件     <</</</</li></ ...

  2. JS事件委托的原理和应用

    js事件委托也叫事件代理,实际上事件委托就是通过事件冒泡实现的,所谓的事件就是onclick,onmouseover,ondown等等,那么委托呢?委托就是指本来这个事是要你自己做的,但是你却让别人帮 ...

  3. js事件委托 jQuery写法

    http://www.cnblogs.com/liugang-vip/p/5616484.html 不是抄的,这篇文章写的细 这是js 事件委托写法 <!DOCTYPE html> < ...

  4. 原生js事件委托（事件代理）方法扩展

    原生js事件委托(事件代理)方法扩展: 通过Node底层原型扩展委托方法 /** * 事件委托方法 * @param eventName {string}:事件名称,如'click' * @param ...

  5. js事件委托或事件代理

    起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...

  6. js事件委托

    什么是事件委托:通俗的讲,onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件. 也 ...

  7. 彻底弄懂JS事件委托的概念和作用

    一.写在前头    接到某厂电话问什么是事件代理的时候,一开始说addEventListener,然后他说直接绑定新的元素不会报dom不存在的错误吗?然后我就混乱了,我印象中这个方法是可以绑定新节点的 ...

  8. js事件委托篇(附js一般写法和js、jq事件委托写法)

    参考: jQuery代码优化:事件委托篇 使用该技术能让你避免对特定的每个节点添加事件监听器:相反,事件监听器被添加在他们的父元素上,事件监听器会分析从子元素上冒泡上来的事件,并找到是哪个子元素事件. ...

  9. js事件委托和jQuery事件绑定on , off , one , bind , unbind , die

    一. 事件委托什么是事件委托?用现实中的理解就是:有100 个学生同时在某天中午收到快递,但这100 个学生不可能同时站在学校门口等,那么都会委托门卫去收取,然后再逐个交给学生.而在jQuery 中, ...

随机推荐

  1. 什么是HotSpot

    Java 是动态编译,跟C++静态编译不同,这就是JIT编译器的原因(Just In Time) HotSpot会把这些部门动态地编译成机器码,Native code, 并对机器码进行优化, 静态编译 ...

  2. css实现 显示一行文字，超出用...代替

    overflow:hidden; white-space:nowrap; text-overflow:ellipsis;

  3. HDU4472_Count

    题目的意思简单,给你n个点,每个点(除根节点)都有且只有一个父节点.现在问你这些节点关系组成的图有多少种情况满足同一层节点上每个点的后继节点数量相等. 很简单,对于n节点,直接枚举n-1的的所有约数情 ...

  4. 从原理上搞定编码（二）-- Web编码

    周末宅在家里睡完觉就吃饭,吃完饭接着睡觉,这日子过的实在是没劲啊.明明还有计划中的事情没有做, 为什么就是不想去做呢,这样的生活持续下去,必然会成为一个彻头彻尾的loser.上一篇写的 初识编码 ,这 ...

  5. PyCharm入门教程——在编辑器中打开和重新打开文件

    PyCharm最新版本下载 JetBrains PyCharm是一种Python IDE,其带有一整套可以帮助用户在使用Python语言开发时提高其效率的工具.此外,该IDE提供了一些高级功能,以用于 ...

  6. 【HDU5730】Shell Necklace（多项式运算，分治FFT）

    [HDU5730]Shell Necklace(多项式运算,分治FFT) 题面 Vjudge 翻译: 有一个长度为\(n\)的序列 已知给连续的长度为\(i\)的序列装饰的方案数为\(a[i]\) 求 ...

  7. 20135239 益西拉姆 linux内核分析 跟踪分析Linux内核的启动过程

    回顾 1.中断上下文的切换——保存现场&恢复现场 本节主要课程内容 Linux内核源代码简介 1.打开内核源代码页面 arch/目录:支持不同CPU的源代码:其中的X86是重点 init/目录 ...

  8. mysql主从配置的过程

    首先参考MySQL5.5官方手册 以下章节: 6.4节如何设置复制 13.6.1节 用于控制主服务器的SQL语句 13.6.2节 用于控制从服务器的SQL语句 6.8节 复制启动选项 6.5节 不同M ...

  9. 2656: [Zjoi2012]数列(sequence)（递归+高精度）

    好久没写题了T T NOIP 期中考双血崩 显然f(x)=f(x>>1)+f((x>>1)+1),考虑每次往x>>1递归,求出f(x),复杂度O(logN) 我们设 ...

  10. SSH 阿里云服务器

    1.在服务机上操作 创建要远程登录的用户和密码 sudo adduser username    正在添加用户“username”... 正在添加新组“username”(1001)... 正在添加新 ...