什么是事件委托：

事件委托——给父元素绑定事件，用来监听子元素的冒泡事件，并找到是哪个子元素的事件。(不理解冒泡的可以去百度下)

定义：
利用事件冒泡处理动态元素事件绑定的方法，专业术语叫事件委托。

使用事件委托技术可以避免对特定的每个节点添加事件监听器，相反，事件监听器是被添加到它们的父元素上。事件监听器会分析从子元素冒泡上来的事件，找到是哪个子元素的事件。

事件委托的好处：

事件委托技术可以避免对每个字元素添加事件监听器，减少操作DOM节点的次数，从而减少浏览器的重绘和重排，提高代码的性能。

使用事件委托，只有父元素与DOM存在交互，其他的操作都是在JS虚拟内存中完成的，这样就大大提高了性能。

什么时候用事件委托：

当子元素有很多，需要对子元素的时间进行监听的时候

案例：

（1）原生JS实现事件委托效果

<!DOCTYPE html>

<html>

<head>

<title>事件委托测试</title>

</head>

<body>

<style type="text/css">

*{margin: 0;padding: 0;}

a{text-decoration: none;}

ul,li{list-style: none;}

div{display: block;width: 500px;padding: 200px 0 0 200px;}

div ul li{display: block;width: 100%;text-align: center;height: 35px;line-height: 35px;}

div ul li:nth-child(2n){background: #f00;}

</style>

<div>

    <ul>

        <li><a>测试1</a></li>

        <li><a>测试2</a></li>

        <li><a>测试3</a></li>

        <li><a>测试4</a></li>

        <li><a>测试5</a></li>

        <li><a>测试6</a></li>

        <li><a>测试7</a></li>

        <li><a>测试8</a></li>

    </ul>

</div>

<script type="text/javascript">

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

    alert("点击的内容是："+e.target.innerHTML);

});

</script>

</body>

</html>

事件委托三部曲：
第一步：给父元素绑定事件
给元素ul添加绑定事件，通过addEventListener为点击事件click添加绑定

第二步：监听子元素的冒泡事件
这里默认是冒泡，点击子元素li会向上冒泡

第三步：找到是哪个子元素的事件

通过匿名回调函数的参数e用来接收事件对象，通过target获取触发事件的目标

（2）JQ实现事件委托

<!DOCTYPE html>

<html>

<head>

<title>事件委托测试</title>

</head>

<body>

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>

<style type="text/css">

*{margin: 0;padding: 0;}

a{text-decoration: none;}

ul,li{list-style: none;}

div{display: block;width: 500px;padding: 200px 0 0 200px;}

div ul li{display: block;width: 100%;text-align: center;height: 35px;line-height: 35px;}

div ul li:nth-child(2n){background: #f00;}

</style>

<div>

    <ul>

        <li><a>测试1</a></li>

        <li><a>测试2</a></li>

        <li><a>测试3</a></li>

        <li><a>测试4</a></li>

        <li><a>测试5</a></li>

        <li><a>测试6</a></li>

        <li><a>测试7</a></li>

        <li><a>测试8</a></li>

    </ul>

</div>

<script type="text/javascript">

$("ul").on('click',function(e){

    alert("点击的内容是："+$(e.target).text());

});

</script>

</body>

</html>

对JS中事件委托的理解的更多相关文章

  1. 对于js中事件冒泡的理解分析

    一. 事件 事件的三个阶段:事件捕获 -> 事件目标 -> 事件冒泡 捕获阶段:先由文档的根节点document往事件触发对象,从外向内捕获事件对象: 目标阶段:到达目标事件位置(事发地) ...

  2. JavaScript中事件委托(事件代理)详解

    在JavaScript的事件中,存在事件委托(事件代理),那么什么是事件委托呢? 事件委托在生活中的例子: 有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三个人在公司门口等快递:二是委托 ...

  3. js中事件三阶段

    js中事件三阶段 先贴代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  4. WinForm中 事件 委托 多线程的应用

    WinForm中 事件 委托 多线程的应用[以一个下载进度条为例] 第一步:首先我们创建一个winfor的项目 第二步:我们建一个窗体在一个窗体里面 打开一个另外的窗体 另外的窗体有一个按钮 点击后就 ...

  5. JS中事件绑定的三种方式

    以下是搜集的在JS中事件绑定的三种方式.   1. HTML onclick attribute     <button type="button" id="upl ...

  6. [js]js中事件的3要素

    js中事件的3要素 事件源 事件 事件处理程序 <!DOCTYPE html> <html> <head lang="en"> <meta ...

  7. JS中事件代理与委托

    在javasript中delegate这个词经常出现,看字面的意思,代理.委托.那么它究竟在什么样的情况下使用?它的原理又是什么?在各种框架中,也经常能看到delegate相关的接口.这些接口又有什么 ...

  8. js 利用事件委托解决mousedown中的click

    有一个需求是这样的: 父元素div绑定一个mousedown事件,子元素a绑定一个click事件. 看解构: <div id="nav"> <a href=&qu ...

  9. JS中同步与异步的理解

    你应该知道,javascript语言是一门“单线程”的语言,不像java语言,类继承Thread再来个thread.start就可以开辟一个线程,所以,javascript就像一条流水线,仅仅是一条流 ...

随机推荐

  1. Lamda过滤替换List元素的属性值

    import java.util.ArrayList;import java.util.HashMap;import java.util.Iterator;import java.util.List; ...

  2. 吴裕雄--天生自然python机器学习：使用Logistic回归从疝气病症预测病马的死亡率

    ,除了部分指标主观和难以测量外,该数据还存在一个问题,数据集中有 30%的值是缺失的.下面将首先介绍如何处理数据集中的数据缺失问题,然 后 再 利 用 Logistic回 归 和随机梯度上升算法来预测 ...

  3. D. Array Splitting(后缀数组）

    You are given an array

  4. mac用python读取文件常见问题（未完成）

    python读取文件常见问题(mac版) 让python的默认编码,和文件的编码保持一致

  5. 006.前端开发知识，前端基础CSS（2020-01-21）

    来源:第五天  01盒子水平居中 一.盒子中文字控制: 1.text-align: center; /*可以让盒子内容(文字 行内元素 行内块元素)居中对齐*/ 二.让盒子水平居中对齐: 方法1.ma ...

  6. spring cloud关于feign client的调用对象列表参数、设置header参数、多环境动态参数试配

    spring cloud关于feign client的调用 1.有些场景接口参数需要传对象列表参数 2.有些场景接口设置设置权限等约定header参数 3.有些场景虽然用的是feign调用,但并不会走 ...

  7. 前端之css引入方式/长度及颜色单位/常用样式

    1.css三种引入方式 <!DOCTYPE html><html><head> <meta charset="UTF-8"> < ...

  8. [LC] 64. Minimum Path Sum

    Given a m x n grid filled with non-negative numbers, find a path from top left to bottom right which ...

  9. JavaScript学习总结（七）Ajax和Http状态字

    转自:http://segmentfault.com/a/1190000000691919 Ajax及其工作原理 AJAX 是一种与服务器交换数据无需刷新网页的技术,最早由Google公司在谷歌地图里 ...

  10. [SDOI2006] 线性方程组

    洛谷 P2455 传送门 刚开始写了个消成上三角的,结果狂wa. 后来经过研究发现,消成上三角那种不能直接判断无解或无穷多解,需要其它的操作. 所以干脆学了个消成对角线的,写了一发A了. 其实两种消元 ...