什么是事件委托：

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

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

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

事件委托的好处：

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

    1.首先安装redis docker run –name my-redis -d redis 2.安装tomcat并启动 docker run -p 8383:8383 –name tomcat -v ...

  2. 49),PHP, 重写

  3. 吴裕雄--天生自然python学习笔记：python 用pygame模块处理音频文件

    除了对图片. Word 等普通格式的文件进行处理外, Python 还有强大的多媒体文件操作能力,如对音频.视频 文件的操作 . 如果要播放音乐,我们可以用 pygame 包中的 mixer 对 象. ...

  4. css3应用

    画出一个禁行标志 border-radius: 50%; width: 100px; height: 100px; border: 10px solid red; background: linear ...

  5. 吴裕雄--天生自然python学习笔记：python下载安装各种模块的whl文件网址

    python下载安装各种模块的whl文件网址:https://www.lfd.uci.edu/~gohlke/pythonlibs/#lxml

  6. axious设置携带cookie同时允许跨域的问题

    axious设置携带cookie同时允许跨域的问题

  7. mpvue框架的小程序和H5同时开发

    demo链接1.样式统一为了达到共用一套样式,采用px2rem-loader和px2rpx-loader进行代码的打包,细节如下: 由于UI设计图是在蓝湖上标注,宽度750,选择像素 PX 样式中直接 ...

  8. C++对数组进行复制

    C++ 风格的复制操作 使用STL中的copy算法 int a[] = {1,2,3,4,5}; int b[5]; std::copy(std::begin(a),std::end(a),std:: ...

  9. OpenWrt Web 开发 LuCI框架 lua语言

    LuCI作为“FFLuCI”诞生于2008年3月份,目的是为OpenWrt固件从 Whiterussian 到 Kamikaze实现快速配置接口.Lua是一个小巧的脚本语言,很容易嵌入其它语言.轻量级 ...

  10. Web前端性能

    6.1前端性能示例 性能测试工具: Apache Benchmark(ab)得到的响应时间仅为从请求发出开始到接收到HTML的最后一个字节所消耗的全部时间.ab命令行如下: ab -c [并发用户数] ...