关于JS的事件捕获与冒泡
时间:2022-07-22
本文章向大家介绍关于JS的事件捕获与冒泡,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
事件与事件流
事件,是文档或浏览器窗口发生的一些特定的交互事件。事件流,描述的是页面中接收事件的顺序。
默认情况下,事件使用冒泡事件流,不使用捕获事件流。
捕获与冒泡
- 事件捕获:执行顺序(
document->html->body->div
) - 事件冒泡:执行顺序(
div->body->html->document
) - IE < 9:只支持事件冒泡
- IE 9+|chrome|firefox|safari:
事件冒泡+事件捕获
阻止捕获与冒泡
event.stopPropagation()
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#outer {
display: block;
width: 300px;
height: 300px;
background-color: red;
}
#middle {
display: block;
width: 200px;
height: 200px;
background-color: green;
}
#inner {
display: block;
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div id="container">
<div id="outer">
outer
<div id="middle">
middle
<div id="inner">
inner
</div>
</div>
</div>
</div>
<script>
var outer = document.getElementById('outer');
var middle = document.getElementById('middle');
var inner = document.getElementById('inner');
outer.addEventListener('click', function (event) {
console.log('outer-->事件捕获');
// 阻止事件捕获,内层不会再捕获到事件
// event.stopPropagation();
}, true);
middle.addEventListener('click', function (event) {
console.log('middle-->事件捕获');
}, true);
inner.addEventListener('click', function (event) {
console.log('inner-->事件捕获');
}, true);
inner.addEventListener('click', function (event) {
console.log('inner-->事件冒泡');
}, false);
middle.addEventListener('click', function (event) {
console.log('middle-->事件冒泡');
// 阻止事件冒泡,外层不会再捕获到事件
// event.stopPropagation();
}, false);
outer.addEventListener('click', function (event) {
console.log('outer-->事件冒泡');
}, false)
</script>
</body>
</html>
- 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 数组属性和方法
- GET和POST的区别
- String - 68. Text Justification
- String - 273. Integer to English Words
- String - 12. Integer to Roman
- Dynamic Programming - 62. Unique Paths
- Dynamic Programming - 70. Climbing Stairs
- LinkedList - 23. Merge k Sorted Lists
- LinkedList - 86. Partition List
- LinkedList - 148. Sort List
- LinkedList - 61. Rotate List
- LinkedList - 143. Reorder List
- LinkedList - 160. Intersection of Two Linked Lists
- LinkedList - 21. Merge Two Sorted Lists
- LinkedList - 82. Remove Duplicates from Sorted List II
- LinkedList - 203. Remove Linked List Elements