什么是事件委托：

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

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

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

事件委托的好处：

事件委托技术可以避免对每个字元素添加事件监听器，减少操作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. RegexUtil

    package org.linlinjava.litemall.core.util; import java.util.ArrayList; import java.util.Collections; ...

  2. PAT甲级——1061 Dating

    1061 Dating Sherlock Holmes received a note with some strange strings: Let's date! 3485djDkxh4hhGE 2 ...

  3. LootCode-链表排序-Java

    链表排序 0.来源 来源:力扣(LeetCode) 题目链接:https://leetcode-cn.com/problems/sort-list 1.题目描述 在 O(n log n) 时间复杂度和 ...

  4. 因为AI，所以爱

    作为技术驱动型公司 自我颠覆的核心就是技术上有所突破 2019技术奇点大会上,创始人行在提出 「未来,大数据和人工智能 将成为商业升级的智能发动机」 这与我们的使命不谋而合 时间退回到2016年的冬天 ...

  5. 77）PHP，将session数据写到不用的存储介质中

    首先我的siession数据可以写到:文件中    session数据区  或者数据库中, 那么怎么将文件中的session数据或者session数据区的数据写到  数据库中,,又或者任意挑选两个不同 ...

  6. 前端-js-长期维护

    ###############    JS简介和JS引入     ################ <!DOCTYPE html> <html lang="en" ...

  7. better-scroll插件的介绍及使用

    在我们日常的移动端项目开发中,处理滚动列表是再常见不过的需求了,可以是竖向滚动的列表,也可以是横向的,用better-scroll可以帮助我们实现这个 什么是 better-scroll better ...

  8. LeetCode Day 5

    LeetCode0005 给定一个字符串 s,找到 s 中最长的回文子串.你可以假设 s 的最大长度为 1000. 示例 1: 输入: "babad" 输出: "bab& ...

  9. CF-1117C-Magic Ship

    二分 C - Magic Ship GNU C++11 Accepted 31 ms 1700 KB #include "bits/stdc++.h" using namespac ...

  10. [CF1009F] Dominant Indices (+dsu on tree详解)

    这道题用到了dsu(Disjoint Set Union) on tree,树上启发式合并. 先看了CF的官方英文题解,又看了看zwz大佬的题解,差不多理解了dsu on tree的算法. 但是时间复 ...