在介绍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. Oracle数据字典全解

    一.概念: 1．数据字典(data dictionary)是 Oracle 数据库的一个重要组成部分,这是一组用于记录数据库信息的只读(read-only)表. 数据字典里存有用户信息.用户的权限信息 ...

  2. laravel5.6 发送邮件附带邮件时，Unable to open file for reading，报错文件路径问题

    https://stackoverflow.com/questions/48568739/unable-to-open-file-for-reading-swift-ioexception-in-la ...

  3. 2016 年度开源中国新增开源软件排行榜 TOP 100

    2016 年度开源中国新增开源软件排行榜 TOP 100 2016 年度开源中国新增开源软件排行榜 TOP 100 新鲜出炉!本榜单根据 2016 年开源中国新收录的 3030 款软件的关注度和活跃度 ...

  4. 【b801】笨小猴

    Time Limit: 1 second Memory Limit: 50 MB [问题描述] 笨小猴的词汇量很小,所以每次做英语选择题的时候都很头疼.但是他找到了一种方法,经试验证明,用这种方法去选 ...

  5. Linux环境下第一次提交项目

    Linux环境下第一次提交项目: vi 日记 新增一个文件名为“日记”的文件 git status 工作区的状态 git add 日记 建立跟踪 git commit 提交变更 ----------- ...

  6. Failed to execute goal org.springframework.boot:spring-boot-maven-plugin:2.1.3.RELEASE:repackage (repackage)

    解决方案是删除 pom.xml配置的问题 <build> <plugins> <plugin> <groupId>org.springframework ...

  7. Spring Data Jpa一对多单向映射

    /** @author StormMaybin @date 2017-01-17 */ 生命不息,奋斗不止! 一对多映射关系 在JPA中,用@OneToMany来标识一对多的关系.实现一对多的单向关联 ...

  8. H3C 单路径网络中环路产生过程（1）

  9. H3C 静态默认路由配置

  10. laravel5数据库配置及其注意事项

    今天分享一个Laravel5数据库配置上的坑. Laravel5作为一套简洁.优雅的PHP Web开发框架(笑),唯一不足的一点就是中文手册或者说是资料比较少,虽然现在很多大神也开始普及这些东西,但是 ...