对JS中事件委托的理解
什么是事件委托:
事件委托——给父元素绑定事件,用来监听子元素的冒泡事件,并找到是哪个子元素的事件。(不理解冒泡的可以去百度下)
定义:
利用事件冒泡处理动态元素事件绑定的方法,专业术语叫事件委托。
使用事件委托技术可以避免对特定的每个节点添加事件监听器,相反,事件监听器是被添加到它们的父元素上。事件监听器会分析从子元素冒泡上来的事件,找到是哪个子元素的事件。
事件委托的好处:
事件委托技术可以避免对每个字元素添加事件监听器,减少操作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中事件委托的理解的更多相关文章
- 对于js中事件冒泡的理解分析
一. 事件 事件的三个阶段:事件捕获 -> 事件目标 -> 事件冒泡 捕获阶段:先由文档的根节点document往事件触发对象,从外向内捕获事件对象: 目标阶段:到达目标事件位置(事发地) ...
- JavaScript中事件委托(事件代理)详解
在JavaScript的事件中,存在事件委托(事件代理),那么什么是事件委托呢? 事件委托在生活中的例子: 有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三个人在公司门口等快递:二是委托 ...
- js中事件三阶段
js中事件三阶段 先贴代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- WinForm中 事件 委托 多线程的应用
WinForm中 事件 委托 多线程的应用[以一个下载进度条为例] 第一步:首先我们创建一个winfor的项目 第二步:我们建一个窗体在一个窗体里面 打开一个另外的窗体 另外的窗体有一个按钮 点击后就 ...
- JS中事件绑定的三种方式
以下是搜集的在JS中事件绑定的三种方式. 1. HTML onclick attribute <button type="button" id="upl ...
- [js]js中事件的3要素
js中事件的3要素 事件源 事件 事件处理程序 <!DOCTYPE html> <html> <head lang="en"> <meta ...
- JS中事件代理与委托
在javasript中delegate这个词经常出现,看字面的意思,代理.委托.那么它究竟在什么样的情况下使用?它的原理又是什么?在各种框架中,也经常能看到delegate相关的接口.这些接口又有什么 ...
- js 利用事件委托解决mousedown中的click
有一个需求是这样的: 父元素div绑定一个mousedown事件,子元素a绑定一个click事件. 看解构: <div id="nav"> <a href=&qu ...
- JS中同步与异步的理解
你应该知道,javascript语言是一门“单线程”的语言,不像java语言,类继承Thread再来个thread.start就可以开辟一个线程,所以,javascript就像一条流水线,仅仅是一条流 ...
随机推荐
- AC和路由器
无线AC控制器是一种网络设备,比如我曾接触过的丰润达的AC100和AC180等,用它们可以来集中控制和管理无线AP,比如下发配置.修改相关配置参数.射频智能管理.接入安全控制等. 路由器是一种连接多个 ...
- 吴裕雄--天生自然 JAVA开发学习:多线程编程
class RunnableDemo implements Runnable { private Thread t; private String threadName; RunnableDemo( ...
- LeetCode No.100,101,102
No.100 IsSameTree 相同的树 题目 给定两个二叉树,编写一个函数来检验它们是否相同. 如果两个树在结构上相同,并且节点具有相同的值,则认为它们是相同的. 示例 输入: 1 1 / \ ...
- 苹果为啥不愿意替美国FBI解锁,这是一种创新态度?
国外媒体报道,苹果计划对iPhone进行安全更新,最新版的iOS会在手机锁定一个小时后禁用手机充电和数据端口,这意味着,消费者丢失手机或者非正常离开iPhone之后,可以通过锁定手机,来避免手机数据被 ...
- python之time模块和hashlib模块
一.time模块 import time print(time.strftime('%Y-%m-%d %H:%M:%S'))#获取当前的格式化时间,time.strftime(format) prin ...
- Linux系统安装及配置ftp服务
1. 先用rpm -qa| grep vsftpd命令检查是否已经安装,如果ftp没有安装,使用yum -y install vsftpd 安装,(ubuntu 下使用apt-get instal ...
- 分布式锁 -- Java常用技术方案
来自博客园http://www.cnblogs.com/PurpleDream/p/5559352.html , 前言: 由于在平时的工作中,线上服务器是分布式多台部署的,经常会面临解决分 ...
- pycharm2018后版本执行Flask app.run()深坑
在2018年以前的版本,以上配置在app.run()里面的内置方法
- python语法基础-常用模块-re模块
############### re模块 ################ 正则表达式的规则: # re模块 # 正则表达式,就是做字符串匹配的,在re模块出现之前就有这个正则表达式了,任 ...
- Centos_7安装python-pip
使用yum -y install python-pip安装pip时,会报出”No package python-pip available.“. 使用命令: yum -y install epel-r ...