什么是事件委托：

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

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

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

事件委托的好处：

事件委托技术可以避免对每个字元素添加事件监听器，减少操作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. ionic3 发布订阅者模式实现

    在ionic3 中实现订阅发布模式,需要用到Events. Events下面有三个方法 events.subscribe()  订阅 events.publish()  发布 events.unsub ...

  2. How Cocoa Beans Grow And Are Harvested Into Chocolate

    What is Cocoa Beans Do you like chocolate? Most people do. The smooth, brown candy is deliciously sw ...

  3. nutzboot 项目打包排除或指定配置文件（夹）

    springboot 是一样的 我这里就是从springboot哪里拿过来的 (nutzboot2.x已测试可以使用) 排除指定文件 在pom 文件 build 标签内添加 resources < ...

  4. Java 线程池（二）

    简介 在上篇 Java 线程池(一) 我们介绍了线程池中一些的重要参数和具体含义,这篇我们看一看在 Java 中是如何去实现线程池的,要想用好线程池,只知其然是远远不够的,我们需要深入实现源码去了解线 ...

  5. [LC] 105. Construct Binary Tree from Preorder and Inorder Traversal

    Given preorder and inorder traversal of a tree, construct the binary tree. Note:You may assume that ...

  6. WebSecurityConfig

    package me.zhengjie.core.config; import me.zhengjie.core.security.JwtAuthenticationEntryPoint; impor ...

  7. OpenCV 亚像素级的角点检测

    #include "opencv2/highgui/highgui.hpp" #include "opencv2/imgproc/imgproc.hpp" #i ...

  8. Spring-增强方式注解实现方式

    SpringAOP增强是什么,不知道的到上一章去找,这里直接上注解实现的代码(不是纯注解,纯注解后续会有) 创建业务类代码 @Service("dosome")//与配置文件中&l ...

  9. linux openjdk安装

    sudo apt-get install openjdk-8-jdk 默认提示是 sudo apt-get install openjdk-8-jre, 这个只有jre https://openjdk ...

  10. linux debain systemd 开机启动 nodejs 兼容原initd启动 forever 开机自启

    布署环境为debian 7.5 布署到一台新机器,系统版本为debian 8.0 原启动项 /etc/init.d/mongo_service 开机居然无法自起 开机自启动不能用了,看页面输出就发觉不 ...