在介绍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. laravel5.4 发送SMTP邮件

    https://blog.csdn.net/qq_35843527/article/details/77880631 Lumen / Laravel 5.4 使用网易邮箱 SMTP 发送邮件 获取网易 ...

  2. 一个简单的hexo搭建博客网站的故事

    首先安装hexo mkdir hexo #创建一个文件夹 cd hexo #切换到hexo目录下面 npm install -g hexo-cli npm install hexo --save 然后 ...

  3. C#的类

    一.String类 1.Length 字符的长度 string x = Console.ReadLine();int i = x.Length;// Length 是获取字符串的长度(从1开始数)Co ...

  4. PyTorch里面的torch.nn.Parameter()

    在刷官方Tutorial的时候发现了一个用法self.v = torch.nn.Parameter(torch.FloatTensor(hidden_size)),看了官方教程里面的解释也是云里雾里, ...

  5. CodeForces 1243"Character Swap (Hard Version)"（multimap）

    传送门 •前置知识-multimap的用法 $multimap$ 与 $map$ 的区别在于一个 $key$ 可以对应几个值: 对于 $map$ 而言,一个 $key$ 只能对应一个值,并且按照 $k ...

  6. Css布局常用 1.盒子内容局中 2. 物理一像素 3.倒三角形 绘制

    布局 对象属性 new Person('') 原型链 (创建对象.使用对象中的属性,如果没有那么就去原型找) new Person()      Person{   name:'', getname( ...

  7. element-UI table分页之后保存已经勾选的标签

  8. WPF 使用 Composition API 做高性能渲染

    在 WPF 中很多小伙伴都会遇到渲染性能的问题,虽然 WPF 的渲染可以甩浏览器渲染几条街,但是还是支持不了游戏级的渲染.在 WPF 使用的 DX 只是优化等级为 9 和 DX 9 差不多的性能,微软 ...

  9. 2018-10-19-jekyll-添加-Valine-评论

    title author date CreateTime categories jekyll 添加 Valine 评论 lindexi 2018-10-19 09:10:40 +0800 2018-2 ...

  10. 2019-9-22-dotnet-core-导出-COM-组件

    title author date CreateTime categories dotnet core 导出 COM 组件 lindexi 2019-09-22 20:25:38 +0800 2019 ...