js事件冒泡
什么是冒泡?
DOM事件流(event flow )存在三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段。
事件捕获*(****event capturing****)*:通俗的理解就是,当鼠标点击或者触发dom事件时,浏览器会从根节点开始由外到内进行事件传播,即点击了子元素,如果父元素通过事件捕获方式注册了对应的事件的话,会先触发父元素绑定的事件。
事件冒泡**(***dubbed bubbling***)**:与事件捕获恰恰相反,事件冒泡顺序是由内到外进行事件传播,直到根节点。
dom标准事件流的触发的先后顺序为:先捕获再冒泡,即当触发dom事件时,会先进行事件捕获,捕获到事件源之后通过事件传播进行事件冒泡。不同的浏览器对此有着不同的实现,IE10及以下不支持捕获型事件,所以就少了一个事件捕获阶段,IE11、Chrome 、Firefox、Safari等浏览器则同时存在。
addEventListener()方法
这个方法设定一个事件监听器,当某一事件发生通过设定的参数执行操作。语法是:
addEventListener(event, function, useCapture)
参数 event 是必须的,表示监听的事件,例如 click, touchstart 等,就是之前不加前缀 on 的事件。 参数 *function* 也是必须的,表示事件触发后调用的函数,可以是外部定义函数,也可以是匿名函数。 参数 useCapture 是选填的,填true或者false,用于描述事件是冒泡还是捕获,true表示捕获,默认的false表示冒泡。
移除事件监听
如果要移除 addEventListener() 添加的事件监听,就要使用removeEventListener(),语法是:
removeEventListener(event, function)
参数与addEventListener()一致。
兼容性
IE 8及更早的版本,和Opera 7.0及更早的版本,不支持 addEventListener() 和 removeEventListener() 方法,他们使用的是一下方法代替:
添加事件: attachEvent(event, function)
移除事件: detachEvent(event, function)
可以用以下方法解决兼容性问题:
if (div1.addEventListener) {
div1.addEventListener('click', function () {
console.log("支持")
});
} else if (div1.attachEvent) {
div1.attachEvent('onclick', function () {
console.log("不支持")
});
}
冒泡和捕获的具体区别
<div id="div1">
<div id="div2"></div>
</div>
<script>
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
div1.addEventListener('click',function(){
console.log("div1--捕获阶段")
},true);
div2.addEventListener('click',function(){
console.log("div2--捕获阶段")
},true);
div1.addEventListener('click',function(){
console.log("div1--冒泡阶段")
});
div2.addEventListener('click',function(){
console.log("div2--冒泡阶段")
});
</script>
输出结果(点击div2的时候执行的结果)
解决办法
function stopBubble(e) {
if (e && e.stopPropagation) {
e.stopPropagation(); //因此它支持W3C的stopPropagation()方法
} else {
window.event.cancelBubble = true; //否则,我们需要使用IE的方式来取消事件冒泡
}
}
- Git -- 分支与合并 (命令行+可视化工具p4merge) Fast Forward 合并禁用 Fast Forward 合并自动合并解决合并的冲突
- 使用Angular CLI进行单元测试和E2E测试
- Git - 使用命令和P4Merge进行diff
- 使用Angular CLI进行Build (构建) 和 Serve
- 使用Angular CLI生成路由
- 使用Angular CLI从蓝本生成代码
- 使用Angular CLI生成 Angular 5项目
- Git基本命令 -- 创建Git项目
- Entity Framework Core 2.0 入门
- 用VSCode开发一个asp.net core2.0+angular5项目(5): Angular5+asp.net core 2.0 web api文件上传
- 用VSCode开发一个asp.net core 2.0+angular 5项目(4): Angular5全局错误处理
- 用VSCode开发一个基于asp.net core 2.0/sql server linux(docker)/ng5/bs4的项目(3)
- 用VSCode开发一个基于asp.net core 2.0/sql server linux(docker)/ng5/bs4的项目(2)
- 用VSCode开发一个基于asp.net core 2.0/sql server linux(docker)/ng5/bs4的项目(1)
- 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 数组属性和方法
- Java——单例设计模式
- Java——包的定义及使用
- Java——Object类(基本概念、toString()方法、equals()方法、可以接收所有引用类型)
- JavaWeb——MyBatis框架之对数据库的增删改查操作CRUD实践及MyBatis参数的深入详解
- JavaWeb——MyBatis框架之入门总结及案例实战,常见坑处理:Failed to execute goal org.codehaus.mojo:exec-maven-plugin:3.0.0
- JavaWeb——MyBatis框架之执行过程原理与解析(通过自定义MyBatis查询所有操作的实现来观察整个过程)
- Java——抽象类(基本概念、使用原则、模板设计模式)
- Java——覆写(概念、覆写的意义、覆写的要求)
- Java——继承性(继承的作用、实现、限制)
- JavaWeb——JSON语法讲解与Jackson解析器完成JSON数据与Java对象的转换(应用Ajax与JSON实现校验用户名是否在的功能)
- JavaWeb——JQuery之高级案例实战(打开网页自动弹出广告效果、抽奖效果实现)
- JavaWeb——JQuery之高级操作应用及实践案例总结(动画、遍历、事件绑定)
- Java——简单Java类深入(数据表与简单Java类、一对多映射、双向一对多映射、多对多映射)
- Java——代码块(普通块、构造块、静态块)
- JavaWeb——JQuery之五种选择器的应用及实践案例总结(基本选择器、层级选择器、属性选择器、过滤选择器、表单过滤选择器)