在介绍JS中事件委派之前先来看看一个简单的需求：为每一个超链接绑定一个单击响应函数并在控制台打印一句话，内容是：” a 标签的单击响应函数“。下面是这个需求的代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <script>

        //  需求：为每一个超链接绑定一个单机响应函数

         window.onload = function() {

            // 获取页面中所有的 a 标签

            var allA = document.getElementsByTagName('a');

            for(var i = 0; i < allA.length; i++) {

                allA[i].onclick = function() {

                    console.log('我是 a 的单击响应函数');

                }

            }

         }

     </script>

 </head>

 <body>

     <ul id="ul">

         <li><a href="javascript:;">超链接1</a></li>

         <li><a href="javascript:;">超链接2</a></li>

         <li><a href="javascript:;">超链接3</a></li>

     </ul>

 </body>

 </html>

　　在浏览器中打开上部分代码，点击相应的超链接， 都可以在控制台打印“我是 a 的单击响应函数”。感觉好像是够用了，哈哈哈哈，其实还没完。

在此基础上升级，现在要做的是点击添加按钮追加一个 ul 的子元素 li。被新添加进去的 li 也能触发循环绑定的事件方法，下面是具体代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script>

        window.onload = function () {

            var ul = document.getElementById('ul');

            var allA = document.getElementsByTagName('a');

            var btn = document.getElementById('btn');

            btn.onclick = function () {

                //    创建一个li标签

                var li = document.createElement('li');

                li.innerHTML = '<a href="javascript:;" class="link">新添加的超链接</a>';

                ul.appendChild(li);

            }

            for (var i = 0; i < allA.length; i++) {

                allA[i].onclick = function () {

                    console.log('我是 a 的单击响应函数');

                }

            }

        }

    </script>

</head>

<body>

    <button id="btn">点击添加</button>

    <ul id="ul">

        <li><a href="javascript:;">超链接1</a></li>

        <li><a href="javascript:;">超链接2</a></li>

        <li><a href="javascript:;">超链接3</a></li>

    </ul>

</body>

</html>

在浏览器打开，点击添加一个子元素，可以看到之前循环绑定事件的函数不管用了，被新添加的元素不会触发 onclick 事件方法，不能在控制台打印 “我是a标签的响应函数 ”，这里就涉及到事件委派了，先来看看事件委派的原理。

　　事件委派：将事件统一绑定给元素共同的祖先元素（后代元素事件触发时，通过冒泡，通过祖先元素的响应函数来处理事件），这样可以只绑定一次，即可应用到多个元素上。事件的委派利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能event中的target表示的触发事件的对象 ，使用它对触发事件的元素进行判断。

　　我现在的需求是：只需要绑定一次事件并可以应用到多个元素上，即使元素是后添加的，也能触发这个事件方法。具体代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <!-- 需求：为每一个li绑定一个函数 -->

    <button id="btn">点击添加超链接</button>

    <ul id="ul" style="background-color: pink">

        <li><a href="javascript:;" class="link">超链接1</a></li>

        <li><a href="javascript:;" class="link">超链接2</a></li>

        <li><a href="javascript:;" class="link">超链接3</a></li>

    </ul>

    <script>

        window.onload = function () {

            var ul = document.getElementById('ul');

            var btn = document.getElementById('btn');

            btn.onclick = function () {

                //    创建一个li标签

                var li = document.createElement('li');

                li.innerHTML = '<a href="javascript:;" class="link">新添加的超链接</a>';

                ul.appendChild(li);

            }

            var allA = document.getElementsByTagName('a');

            ul.onclick = function (event) {

                if (event.target.className == 'link') {

                    alert(`我是a`);

                }

            }

        }

    </script>

</body>

</html>
target 返回目标元素，表示触发事件的对象。

js中的事件委派的更多相关文章

  1. 怎么理解js中的事件委托

    怎么理解js中的事件委托 时间 2015-01-15 00:59:59  SegmentFault 原文  http://segmentfault.com/blog/sunchengli/119000 ...

  2. js中冒泡事件和捕获事件

    js中冒泡事件和捕获事件: 冒泡事件:冒泡事件是从里向外,即是从被绑定元素开始一直向外到达页面的所有祖先元素都会被触发,这 一过程被称为事件冒泡.这个事件从原始元素开始一直冒泡到DOM树的最上层 捕获 ...

  3. 看懂此文，不再困惑于 JS 中的事件设计

    看懂此文,不再困惑于 JS 中的事件设计 今天刚在关注的微信公众号看到的文章,关于JS事件的,写的很详细也很容易理解,相关的知识点都有总结到,看完就有种很舒畅的感觉,该串起来的知识点都串起来了.反正一 ...

  4. js中冒泡事件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. DOM 以及JS中的事件

    [DOM树节点] DOM节点分为三大节点:元素节点,文本节点,属性节点. 文本节点,属性节点为元素节点的两个子节点通过getElment系列方法,可以去到元素节点 [查看节点] 1 document. ...

  6. 从零开始的JS生活（二）——BOM、DOM与JS中的事件

    上回书说道,JS中变量.运算符.分支结构.循环和嵌套循环等内容.本回就由本K给大伙唠唠JS中的BOM.DOM和事件. 一."花心大萝卜"--BOM 1.震惊,FFF团为何对BOM举 ...

  7. js中的事件，内置对象，正则表达式

    [JS中的事件分类] 1.鼠标事件: click/dbclick/mouseover/mouseout/mousemove/mousedown/mouseup 2.键盘事件: keydown: 键盘按 ...

  8. JS中的事件以及DOM 操作

    [DOM树节点] DOM节点分为三大节点:元素节点,文本节点,属性节点. 文本节点,属性节点为元素节点的两个子节点通过getElment系列方法,可以去到元素节点 [查看节点] 1 document. ...

  9. JS中的事件&对象

    一.JS中的事件 (一)JS中的事件分类 1.鼠标事件 click/dblclick/onmouseover/onmouseout 2.HTML事件 onload/onscroll/onsubmit/ ...

随机推荐

  1. Docker 领衔 OpenSource.com 2014十佳开源软件排行榜

    Docker 领衔 OpenSource.com 2014十佳开源软件排行榜 每年 Opensource.com 都会收集最佳的十个开源软件,今年也不例外,废话不多说,直接进入主题. Docker 应 ...

  2. Sublime插件：增强篇

    Sublime Text 如何安装插件详见:https://packagecontrol.io/installation WordCount:可以实时显示当前文件的字数. 安装后,后下角多出字数 En ...

  3. 带你进入 Activiti 工作流的世界

    Activiti 是一个针对企业用户.开发人员 .系统管理员的轻量级工作流业务管理平台,其核心是使用 java 开发的快速 . 稳定的 BPMN2.0 流程引擎 .它可以与 spring 完美集成. ...

  4. oracle 优化GROUP BY

    提高GROUP BY 语句的效率, 可以通过将不需要的记录在GROUP BY 之前过滤掉.下面两个查询返回相同结果但第二个明显就快了许多. 低效: SELECT JOB , AVG(SAL) FROM ...

  5. phpStudy本地环境测试，打开网页很慢的解决办法！

    很多人应该都遇到了在使用phpStudy本地环境测试软件时候打开很慢的问题,甚至动辄达到了1000ms以上,开篇直接给出解决办法: 下面给大家介绍phpstudy访问速度慢的解决办法. 1.修改mys ...

  6. python-字符编码数据类型转换

    1 - 编码格式转换 1.1 编码格式介绍 字符集 介绍 ASCII ASCII 码使用指定的7 位或8 位二进制数组合来表示128 或256 种可能的字符 ANSI ANSI是一种字符代码,为使计算 ...

  7. WPF 从零开始开发 dotnet Remoting 程序

    本文告诉大家如何不使用框架,从零开始开发一个 dotnet remoting 程序 在我的另一篇博客 WPF 使用RPC调用其他进程 就大概告诉了大家如何在 WPF 使用 dotnet remotin ...

  8. windows服务器运维日常--防火墙打开后ping不通

    1. 打开防火墙,有利于安全 2. 添加80端口,支持互联网访问:添加3389端口,以支持远程桌面连接 3. 发现开了防火墙之后,ping不通网址www.mjywxy.xin 4. 查找资料和测试发现 ...

  9. js 正则匹配 两个字符串之间，某个字符串之前（之后）的内容

    1.js截取两个字符串之间的内容: var str = "aaabbbcccdddeeefff"; str = str.match(/aaa(\S*)fff/)[1]; alert ...

  10. linux虚拟机设置固定IP并实现联网，主机与虚拟机实现互ping

    ifconfig eth0 up 启用第一块网卡 onboot=yes 自动启动 service network restart 重启网络服务 使用虚拟机添加一块桥接网卡 cp eth0 eth1 复 ...