JS事件,你真的懂吗(捕获,冒泡)?
说到js事件大家肯定都知道,那么今天讲一点大家不知道的(假设大家不知道?)。 所有的js事件都会分为两个阶段捕获和冒泡。那么问题来了,我们通常看到的事件都是直接触发之后就执行了,那么我们怎么才能看到事件的捕获和冒泡都是怎么进行的呢,这里给大家准备了一个例子
addEventListener()
例子之前首先给大家简单介绍一下addEventListener
方法,从字面上的解释可以看到这种方法叫做添加事件监听者,就是以监听的形式来控制时间的触发
- 意义 addEventListener()可以监听事件的触发,来达到绑定事件的目的,他的原理是监听,当有事件触发的时候它就会做出相应的动作
参数
addEventListener(event,function,useCapture);
event:字符串,表示需要监听的事件,事件前面不用加on
。例如:单击事件直接可以写成click
。
function:回调函数,表示事件触发后要执行的函数。
useCapture:布尔值 true
或 false
不传的话默认为false
。true
表示监听事件的捕获阶段,false
表示监听事件的冒泡阶段。
- 返回值 没有返回值
示例:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#outer {
width: 100px;
height: 100px;
background-color: red;
}
#inner {
width: 50px;
height: 50px;
background-color: blue;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner"></div>
</div>
<script>
var outer = document.getElementById("outer");
var inner = document.getElementById("inner");
outer.addEventListener("click",function(e){
console.log("outer捕获阶段");
},true);
outer.addEventListener("click",function(e){
console.log("outer冒泡阶段");
},false);
inner.addEventListener("click",function(e){
console.log("inner捕获阶段");
},true);
inner.addEventListener("click",function(e){
console.log("inner冒泡阶段");
},false);
</script>
</body>
</html>
当我们点击篮框的时候,会发现终端打印出来如下图所示
首先是outer捕获阶段
其次是inner捕获阶段
然后是inner冒泡阶段
最后是outer冒泡阶段
由此我们可以看到,事件触发的时候实际上都是有捕获和冒泡阶段的,并且捕获阶段会从最外层的父级元素开始捕获,一直捕获到最后触发事件的那个元素点才会停止,那么冒泡阶段反之,会从最内层触发的那个元素开始往外层的父级元素一直冒泡。并且事件的触发是先捕获,在冒泡。
阻止事件冒泡
事件的冒泡会让我们实现某些功能的时候产生阻碍,那么我们怎么怎么阻止事件的冒泡呢,这个时候就会用到一个方法。
e.stopPropagation();
当我们吧这个方法放到inner冒泡阶段的下面的时候,神奇的事情发生了,当代码执行到这里,默认直接把冒泡的事件给阻止了,这时候会呈现出这个样子。
这样就成功的阻止了事件的冒泡,是不是很神奇,那么我们阻止事件冒泡还有别的方法吗,答案是肯定的,这时候就得了解一下我们的event对象了,我们打印一下event对象,如下:
打印发现当我们触发事件时,event对象里面默认会有一个target对象,这个target对象正好就是我们元素触发的节点,那么我们是不是可以通过判断
if(e.target == this){console.log("...")}
方法来判断触发的节点是不是当前我们点击的节点,就可以很巧妙的阻止事件的冒泡了。
应用场景举例
可能很多朋友感觉,这个东西我根本用不到啊,不会出现这种情况,我怎么会把父元素和子元素绑定相同的事件呢? 我们在使用中多数情况下只使用冒泡监听。例如一条购物车信息,在这条信息中,右下角有一个删除按钮。点击这条消息可查看详情,点击删除按钮可将此商品移除。我们会分别给信息的div和删除button添加一个冒泡的click事件监听。如果不做阻止传递,点击删除button后,会显示商品详情。显然这不是我们想看到的。这时我们给button一个阻止事件传递的功能,点击删除按钮后,事件就会结束,就不再显示商品详情。
本文为作者原创,手码不易,允许转载,转载后请以链接形式说明文章出处。
- 撩妹必备,3行代码伪造出一个“好莱坞黑客”屏幕
- [译]Laravel 5.0 之事件调度程序 (定时任务)
- Laravel 5.5 在浏览器中渲染 Mailable 类型
- Laravel 5.4 及 5.5 中的全新字符串辅助方法
- Laravel 5.5 的自定义验证对象/类
- Laravel 5.5 为响应请求提供的可响应接口
- Laravel 5.5 为 Mailables 类型新增 theme 属性
- Laravel 5.5 的 “vendor:publish” 新增 provider 提示
- 3秒钟,用python破解加密PDF|附工具地址
- [译]Laravel 5.0 之云存储驱动
- [译]Laravel 5.0 之自定义错误页面
- 使用Google的Quickdraw创建MNIST样式数据集!
- CentOS 7 开启 BBR 加速
- 开源项目Minio:提供非结构化数据储存服务
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法