事件冒泡和事件捕获是JavaScript中最常用的术语。在JavaScript中，事件流过程由三个概念完成：
- 事件捕获。
- 事件目标。
- 事件冒泡。
事件 Event：
事件负责JavaScript与HTML网页的交互。事件的一般定义是某人可以发生的任何行为。在Web开发中，事件的定义也相同。侦听器可以订阅事件，只有在可以触发特定事件时，事件才会发生。
事件的基本示例是单击按钮
事件流 Event Flow ：
事件流网页接收事件的顺序。如果在目标元素上执行单击之前，单击嵌套在其他元素上的div或button之类的元素。它必须首先触发其每个父元素的click事件，并从全局window对象的顶部开始。默认情况下，HTML的每个元素都是window对象的子级。
事件流的历史：
在第四代Web浏览器大战中，主要的浏览器社区，IE 4和网景 4相互聚在一起，以寻找事件流方式的解决方案。基本上，两个开发团队都开会，讨论哪种方法更适合事件流。有两种方法从上到下（事件捕获） 另一个是 从下到上（事件冒泡）。但不幸的是，它们两者都采用相反的方法。IE 4采用事件冒泡方法， 而网景通讯器4采用事件捕获方法。
事件冒泡：
事件冒泡是指事件从最深层的元素或目标元素到其父元素，然后是其所有由下而上的祖先 开始的事件。当前，所有现代浏览器都将事件冒泡作为事件流的默认方式。
考虑有关事件冒泡的示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Event Bubbling</title>
</head>
<body>
<div id="parent">
<button id="child">Child</button>
</div>
<script>
var parent = document.querySelector('#parent');
<!-- Add click event on parent div -->
parent.addEventListener('click', function(){
console.log("Parent clicked");
});
var child = document.querySelector('#child');
<!-- Add click event on child button -->
child.addEventListener('click', function(){
console.log("Child clicked");
});
</script>
</body>
</html>
事件冒泡
事件冒泡的运行示例
代码说明：
- 在上面的代码中，我们可以使用一行HTML代码和JavaScript代码创建一个html文件。
- 在HTML中，我们可以创建一个ID为parent的div。及其带有id子元素的嵌套按钮元素。
- 在Javascript代码中，首先我们可以借助
document.querySelector()函数将html元素分配给变量 - 之后，我们可以附加一个click事件到父div和子按钮。和这两个函数都只是使用来在控制台上打印字符串值
console.log()。 - 当我们单击按钮时，首先运行button上附加的功能，然后
onclick()运行div的功能。这是由于事件冒泡。首先运行与事件目标关联的事件，然后运行其父项进行window反对。
当您单击按钮时，事件从内部事件目标（其ID为孩子的按钮）传递到文档。点击事件传递按以下顺序进行：
<button><div><body><html>document
停止事件冒泡：
如果要停止事件冒泡，可以使用event.stopPropagation()方法来实现。如果要停止从事件目标到DOM中顶部元素的事件流，则event.stopPropagation()method停止事件以从下到上传播。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Event Bubbling</title>
</head>
<body>
<div id="parent">
<button id="child" onclick="event.stopPropagation()">Child</button>
</div>
<script>
var parent = document.querySelector('#parent');
<!-- Add click event on parent div -->
parent.addEventListener('click', function(){
console.log("Parent clicked");
});
var child = document.querySelector('#child');
<!-- Add click event on child button -->
child.addEventListener('click', function(){
console.log("Child clicked");
});
</script>
</body>
</html>
停止事件冒泡
代码说明：
- 在上面的代码中，我们可以使用一行HTML代码和JavaScript代码创建一个html文件。
- 在HTML中，我们可以创建一个ID为parent的div。及其带有id子元素的嵌套按钮元素。
- 在Javascript代码中，首先我们可以借助
document.querySelector()函数将html元素分配给变量 - 之后，我们可以附加一个click事件到父div和子按钮。和这两个函数都只是使用来在控制台上打印字符串值
console.log()。 - 另一任务是，我们可以附加
event.stopPropagation()来停止事件冒泡。在此代码中，我们可以添加event.stopPropagation()带有按钮以停止onclick事件从下到上的传播。因此，当我们单击按钮控制台时，仅打印“子级单击”。事件未从事件目标传递到网页文档。
事件捕获：
事件捕获是事件从顶部元素到目标元素的开始。现代浏览器默认情况下不支持事件捕获，但是我们可以通过JavaScript中的代码来实现。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Event Capturing</title>
</head>
<body>
<div id="parent">
<button id="child">Child</button>
</div>
<script>
var parent = document.querySelector('#parent');
var child = document.querySelector('#child');
parent.addEventListener('click', function(){
console.log("Parent clicked");
},true);
child.addEventListener('click', function(){
console.log("Child clicked");
});
</script>
</body>
</html>
事件捕捉
事件捕捉
代码说明：
- 在上面的代码中，我们可以使用一行HTML代码和JavaScript代码创建一个html文件。
- 在HTML中，我们可以创建一个ID为parent的div。及其带有id子元素的嵌套按钮元素。
- 在Javascript代码中，首先我们可以借助
document.querySelector()函数将html元素分配给变量 - 之后，我们可以附加一个click事件到父div和子按钮。和这两个函数都只是使用来在控制台上打印字符串值
console.log()。 - 我们可以使用addEventListner的第三个可选参数将true设置为启用父div中的事件捕获。
- 当我们单击按钮时，首先运行div附带的函数，然后运行按钮的onclick函数。这是由于事件捕获。首先运行与父元素关联的事件，然后运行事件目标。
当您单击按钮时，事件从父项（文档）传递到事件目标（ID为子项的按钮）。点击事件传递按以下顺序进行：
document<html><body><div><button>
事件流的完整视图：
每个事件流都分为三个阶段：
- 事件捕捉
- 活动目标
- 事件冒泡。
在事件流中，事件目标有两个阶段，一个阶段是在事件捕获结束和事件冒泡开始时。
结论 ：
事件冒泡和事件捕获是JavaScript中事件处理程序和事件委托的基础。在本文中，我们可以提供事件冒泡和事件捕获的概念性知识。
网友评论