什么是事件委托：

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

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

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

事件委托的好处：

事件委托技术可以避免对每个字元素添加事件监听器，减少操作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. linux的进程和管道符（二）

    回顾:进程管理:kill killall pkill问题:1.pkill -u root 禁止2.用户名不要用数字开头或者纯数字windows的用户名不要用中文3.pokit/etc/passwd 6 ...

  2. 让Spring不再难懂-aop篇

    什么是aop AOP(Aspect-OrientedProgramming,面向方面编程),可以说是OOP(Object-Oriented Programing,面向对象编程)的补充和完善.OOP允许 ...

  3. 106）PHP，缩略图代码和结果展示

    首先是 代码展示: <?php class CImage { /** * 生成保持原图纵横比的缩略图,支持.png .jpg .gif * 缩略图类型统一为.png格式 *@param $src ...

  4. .net core 读取json文件

    核心代码 Program.cs: using System; using System.IO; using Microsoft.Extensions.Configuration; namespace ...

  5. 线程同步Lock锁

    Lock接口历史 java1.5版本之前只有synchronized一种锁,lock是java1.5版本之后提供的接口.lock接口与synchronized接口功能相同,但是需要手动获取锁和释放锁. ...

  6. 批量修改ACCESS表列名

    问题来源:从ODBC导入数据到ACCESS 再从ACCESS导入到SQL数据库,ACCESS会多带个DBO. 所以需要批量修改ACCESS的表名. 首先需要引用ADOX引用方法:打开ACCESS的VB ...

  7. when|nobody|hazard|lane|circuit|

    How can I help them  they won't listen to me? 题目解析 考查从句.此句意为:如果他们要是不听我的话,我怎么帮助他们?此处,when引导的状语从句表示假设事 ...

  8. mudbox安装未完成，某些产品无法安装的解决方法

    mudbox提示安装未完成,某些产品无法安装该怎样解决呢?,一些朋友在win7或者win10系统下安装mudbox失败提示mudbox安装未完成,某些产品无法安装,也有时候想重新安装mudbox的时候 ...

  9. zabbix配置文件详解--服务（server）端、客户（agent）端、代理（proxy）端

    在zabbix服务(server)端.客户(agent)端.代理(proxy)端分别对应着一个配置文件,即:zabbix_server.conf,zabbix_agentd.conf,zabbix_p ...

  10. .net core && python

    最近.net core的发展,确实值得激动,强力推荐传教文章<.NET:持续进化的统一开发平台>http://www.cnblogs.com/wer-ltm/p/8776846.html ...