简单说 JavaScript中的事件委托(下)
说明
上次我们说了一些，关于 JavaScript中事件委托的 基础知识，这次我们继续来看。
解释
先来一段代码
<!doctype html>
<html lang="en">
</head>
<body>
<ul id=ul>
<li id='li1'>1</li>
<li id='li2'>2</li>
</ul>
<script>
ul.onclick = function (e){
if(e.target.nodeName == 'LI'){
console.log('li 被点击了');
}
}
</script>
</body>
</html>上面这段代码，用了事件委托，把事件绑在了ul上，没有给每个 li 都去绑定事件，看上去也是实现效果了，但是如果 li 里面还有子元素，那么这么去绑定事件就不行了，当点击 li 里面的子元素时，就出现问题了。
比如，我们把上面的代码改成这样，看看效果。
<!doctype html>
<html lang="en">
<head>
<style>
li{
padding:20px;
background:red;
}
span{
padding:10px;
background:blue;
}
</style>
</head>
<body>
<ul id=ul>
<!-- 增加子元素 -->
<li id='li1'><span>1</span></li>
<li id='li2'><span>2</span></li>
</ul>
<script>
ul.onclick = function (e){
console.log('span 被点击了');
if(e.target.nodeName == 'LI'){
console.log('li 被点击了');
}
}
</script>
</body>
</html>效果图
看图，当点击 蓝色 span 的时候，没有打印 li 被点击了 ，当点击 红色 li 的时候，才都打印出来，这是因为当点击 span 的时候，事件源是 span，虽然也能触发事件，但是并没有走 if判断，所以就不会打印 li 被点击了 ，当点击 li 的时候，事件源是 li ，所以就可以了，但是我们往往需要的是，不管是点击li，还是点击 了 li 的子元素，都需要执行操作。
好的，我们来改改代码。
这次我们需要 Element.matches( ) 这个方法，
作用：
判断当前DOM节点是否能完全匹配对应的css选择器规则；如果匹配成功，返回true，否则返回false。
语法：
let result = element.matches(selectorString); result 的值为 true 或 false
selectorString 是个css选择器字符串
举例：
<div id="d"> 这是一个div元素 </div>
<script type="text/javascript">
var el = document.getElementById("d");
if (el.matches("div")) {
alert("匹配到了!"); //能显示弹框，因为"div"选择器可以选择到el元素
}
</script>至于更多关于 Element.matches( ) 方法的细节，和对于不支持 Element.matches( ) 方法的浏览器的替代方案，请到这里查看
Element.matches( )
<!doctype html>
<html lang="en">
<head>
<style>
li{
padding:20px;
background:red;
}
span{
padding:10px;
background:blue;
}
</style>
</head>
<body>
<ul id=ul>
<!-- 增加子元素 -->
<li id='li1'><span>1</span></li>
<li id='li2'><span>2</span></li>
</ul>
<script>
ul.onclick = function (e){
//获取事件源
var target = e.target;
//如果 事件源 不是 li 就进入循环
while(!target.matches('li')){
//如果事件源 是 ul 就把事件源 赋值为null，跳出循环
//如果事件源 不是 ul 就把事件源 赋值为事件源的父元素
if(target === ul){
target = null;
break;
}
target = target.parentNode;
}
// 如果 target为 true
//也就是说 事件源是 li，就执行if语句里的代码
if(target){
console.log('li 被点击了');
}
}
</script>
</body>
</html>效果图
看图，现在这样，不管是点击 li 还是 li 的子元素，就都可以打印出内容了。
jQuery中的事件委托
jQuery中事件委托主要是靠on( ) 方法，我们先来看看 on( ) 方法的使用说明
on( ) 方法主要有以下两种形式的用法
用法一
jQueryObject.on( events [, selector ] [, data ], handler )用法二
jQueryObject.on( eventsMap [, selector ] [, data ] )| 参数 | 描述 |
|---|---|
| events | String类型，一个或多个用空格分隔的事件类型和可选的命名空间，例如"click"、"focus click"、"keydown.myPlugin"。 |
| eventsMap | Object类型，一个Object对象，其每个属性对应事件类型和可选的命名空间(参数events)，属性值对应绑定的事件处理函数(参数handler)。 |
| selector | 可选/String类型，一个jQuery选择器，用于指定哪些后代元素可以触发绑定的事件。如果该参数为null或被省略，则表示当前元素自身绑定事件(实际触发者也可能是后代元素，只要事件流能到达当前元素即可)。 |
| data | 可选/任意类型，触发事件时，需要通过event.data传递给事件处理函数的任意数据。 |
| handler | Function类型，指定的事件处理函数。 |
我们再用jQuery的 on( ) 方法实现下，最开始的例子
<!doctype html>
<html lang="en">
<head>
<style>
li{
padding:20px;
background:red;
}
span{
padding:10px;
background:blue;
}
</style>
</head>
<body>
<ul id=ul>
<!-- 增加子元素 -->
<li id='li1'><span>1</span></li>
<li id='li2'><span>2</span></li>
</ul>
<script src="http://code.jquery.com/jquery-2.2.4.js"></script>
<script>
$('#ul').on('click','li',function (){
console.log('li 被点击了');
});
</script>
</body>
</html>更加详细的关于 JQuery中on( )方法的解释，推荐看这里
jQuery.on() 函数详解
总结
用到 事件委托 的地方，应该还是比较多的，希望大家都能理解这个东西。
简单说 JavaScript中的事件委托(下)的更多相关文章
- js实例分析JavaScript中的事件委托和事件绑定
我们在学习JavaScript中,难免都会去网上查一些资料.也许偶尔就会遇到“事件委托”(也有的称我“事件代理”,这里不评论谁是谁非.以下全部称为“事件委托”),尤其是在查JavaScript的事件处 ...
- JavaScript中的事件委托机制跟深浅拷贝
今天聊下JavaScript中的事件委托跟深浅拷贝 事件委托 首先呢,介绍一下事件绑定 //方法一:通过onclick <button onclick="clickEvent()&qu ...
- JavaScript中的事件委托（转至大佬）
转至:https://www.cnblogs.com/liugang-vip/p/5616484.html 起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没 ...
- javascript中的事件委托
这几天看到一个面试题,大概就是,让你给1000个li都添加一个click事件,应该怎么添加?大多数人第一开始的感觉可能就是,每个li上边都添加一个呗,那要是这样的话,估计面试的时候就会GG了,这里就是 ...
- 理解Javascript中的事件绑定与事件委托
最近在深入实践js中,遇到了一些问题,比如我需要为动态创建的DOM元素绑定事件,那么普通的事件绑定就不行了,于是通过上网查资料了解到事件委托,因此想总结一下js中的事件绑定与事件委托. 事件绑定 ...
- 怎么理解js中的事件委托
怎么理解js中的事件委托 时间 2015-01-15 00:59:59 SegmentFault 原文 http://segmentfault.com/blog/sunchengli/119000 ...
- 了解javascript中的事件（二）
本文目录如下: 零.寒暄 一.事件的分类 二.事件代理 2.1 问题引出 2.2 什么是事件代理 2.3 完整示例 二.事件代理 三.事件代理思想的用处 四.总结 零.寒暄 这篇博客本该出现在两个月以 ...
- 深入理解javascript中的事件循环event-loop
前面的话 本文将详细介绍javascript中的事件循环event-loop 线程 javascript是单线程的语言,也就是说,同一个时间只能做一件事.而这个单线程的特性,与它的用途有关,作为浏览器 ...
- JavaScript中的事件循环机制跟函数柯里化
一.事件循环机制的理解 test();//按秒输出5个5 function test() { for (var i = 0; i < 5; i++) { setTimeout(() => ...
随机推荐
- MTSP问题
问题描述:m个旅行商去旅游 n个城市,规定都必须从同一个出发点出发,而且返回原出发点,需要将所有的城市遍历完毕,每个城市只能游历一次,但是为了路径最短可以路过这个城市多次.这个就是多旅行商问题.是在T ...
- Codeforces Round #572 (Div. 1) 差E
Codeforces Round #572 (Div. 1) A2 题意:给一棵树,带边权,互不相同且为偶数.每次操作是选两个叶子然后在路径上同时加一个数.初始边权全是0,求一个操作序列使得最终边权与 ...
- python之urllib模块和requests模块
一.urllib模块 python标准库自带的发送网络请求的模块. # 用python怎么打开浏览器,发送接口请求 import urllib from urllib.request import u ...
- VisualStudioAddIn2017.vsix的下载安装和使用
本加载项是用于Visual Studio的,下载以后按照如下步骤进行安装: 完全退出Visual Studio 把下载了的文件解压缩,会产生一个VisualStudioAddIn2017.vsix文件 ...
- 非IoC方式访问Servlet API的两种方法
使用ActionContext访问 ActionContext来自com.opensymphony.xwork2.ActionContext 具体实现代码段如下: <span style=&qu ...
- phpcms添加图片投票
1phpcms加入投票选项的图片上传功能,从我的文件下载,然后到phpcms目录下直接覆盖即可. 当然这边出现了一个bug,修改投票选项不能修改的bug,只需要修改vote_option_class. ...
- Windows CMD 终端使用代理
Windows 终端使用代理 # 使用 http 类型代理 set http_proxy=http://127.0.0.1:8484 set https_proxy=http://127.0.0.1: ...
- python数据类型：字典Dictionary
python数据类型:字典Dictionary 字典是一种可变容器模型,可以存储任意类型对象 键是唯一的,但是值不需要唯一 值可以取任何数据类型,但是键必须是不可变的,如字符串,数字,元组 创建字典: ...
- 【Linux_Shell 脚本编程学习笔记三、分支与循环结构】
if 语句是实际生产工作中最重要且最常用的语句,所以,必须掌握牢固 if 条件语法 1. 单分支机构 if [ 条件 ] then 指令 fi 或 if [ 条件 ]; then 指令 fi ...
- B-Tree索引
翻译自http://dev.mysql.com/doc/refman/5.6/en/index-btree-hash.html 理解B-Tree和Hash的数据结构能够帮助我们预测不同存储引擎下的查询 ...