在介绍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. 学习PHP好，还是Python好呢？

    首先简单介绍一下Python. Python在出现以来,已经有数以千计基于这项技术的网站和软件项目,Python因其独有的特点从众多开发语言中脱颖而出,深受世界各地的开发者喜爱. 下面,我们列举了Py ...

  2. laravel validate 设置为中文（验证提示为中文）

    把 resources\lang 下en 的文件夹 复制在同一目录并改名为 zn 把zn 中的 validation.php文件修改为 https://laravel-china.org/articl ...

  3. title与h1的区别、b与strong的区别、i与em的区别？

    title与h1的区别 定义: title是网站标题, h1是文章主题 作用: title概括网站信息,可以直接告诉搜索引擎和用户这 个网站是关于什么主题和内容的,是显示在网页Tab栏里的: h1突出 ...

  4. 洛谷P2590 [ZJOI2008]树的统计 题解 树链剖分+线段树

    题目链接:https://www.luogu.org/problem/P2590 树链剖分模板题. 剖分过程要用到如下7个值: fa[u]:u的父节点编号: dep[u]:u的深度: size[u]: ...

  5. JPA 一对多、多对一注解

    1. @OneToMany @OneToMany 是属性或方法级别的注解,用于定义源实体与目标实体是一对多的关系. 参数 类型 描述 targetEntity Class 源实体关联的目标实体类型,默 ...

  6. 21个项目玩转深度学习：基于TensorFlow的实践详解01—MNIST机器学习入门

    数据集 由Yann Le Cun建立,训练集55000,验证集5000,测试集10000,图片大小均为28*28 下载 # coding:utf-8 # 从tensorflow.examples.tu ...

  7. H3C 什么是路由

  8. element-ui后台管理系统表单resetFields功能实现

    项目中有‘新增’和‘编辑’弹出dialog功能,并且为同一个dialog. html代码: 新增时,这样的样式 编辑时,这样的样式 所以在编辑完关闭dialog后,需要清空表单,一开始简单的使用了el ...

  9. JS 逻辑运算符 ||、 &&， 位运算符 |、&

    1.JS中的||符号: 运算方法: 只要“||”前面为false,不管“||”后面是true还是false,都返回“||”后面的值. 只要“||”前面为true,不管“||”后面是true还是fals ...

  10. fetch是什么？写一个fetch请求

    fetch是web提供的一个可以获取异步资源的api,目前还没有被所有浏览器支持,它提供的api返回的是Promise对象,所以你在了解这个api前首先得了解Promise的用法. 参考链接:http ...