JavaScript事件学习小结（一）事件流
前言
JavaScript 是一种基于事件驱动的编程语言，而事件机制也是 JavaScript 中非常重要的一部分。本篇笔记介绍的是事件流的相关知识，对于理解事件机制起着重要的作用。
什么是事件流？
当一个事件发生时，JavaScript 引擎会按照一定的顺序处理事件。这个顺序就是事件流。
事件流分为两种：冒泡流和捕获流。
冒泡流
冒泡流是指当一个事件触发时，首先执行最内层元素上的事件处理程序，然后逐步向外层元素冒泡，直到最外层元素。
例如，我们有以下 HTML 结构：
<div>
<p>text</p>
</div>
当我们在 <p> 元素上绑定一个 click 事件，且点击了 <p> 元素，事件触发顺序如下：
- 最先执行
<p>元素上的 click 事件处理程序。 - 然后向外层元素
<div>冒泡，执行<div>元素上的 click 事件处理程序。
捕获流
捕获流是指当一个事件触发时，首先执行最外层元素上的事件处理程序，然后逐渐向里层元素捕获，直到最内层元素。
例如，我们有以下 HTML 结构：
<div>
<p>text</p>
</div>
当我们在 <p> 元素上绑定一个 click 事件，且点击了 <p> 元素，事件触发顺序如下：
- 最先执行
<div>元素上的 click 事件处理程序。 - 然后向内层元素
<p>捕获，执行<p>元素上的 click 事件处理程序。
事件流总结
事件流有两种：冒泡流和捕获流。冒泡流是从内向外执行事件处理程序，而捕获流则相反，是从外向内执行事件处理程序。
示例说明
示例一
下面是一个简单的 HTML 页面：
<!DOCTYPE html>
<html>
<head>
<title>Event Flow Demo</title>
</head>
<body>
<div id="outerDiv">
<div id="innerDiv">
<button id="myButton">Click me!</button>
</div>
</div>
<script>
document.getElementById("outerDiv").addEventListener(
"click",
function (event) {
console.log("outerDiv clicked");
},
false
);
document.getElementById("innerDiv").addEventListener(
"click",
function (event) {
console.log("innerDiv clicked");
},
false
);
document.getElementById("myButton").addEventListener(
"click",
function (event) {
console.log("button clicked");
},
false
);
</script>
</body>
</html>
在示例中，我们绑定了三个元素的 click 事件，分别是外部 div 元素、内部 div 元素和按钮元素。
当我们点击按钮时，事件触发的顺序如下：
- 首先执行按钮元素上的 click 事件处理程序，输出
button clicked。 - 然后向外层元素
<div id="innerDiv">冒泡，执行<div id="innerDiv">元素上的 click 事件处理程序，输出innerDiv clicked。 - 最后向外层元素
<div id="outerDiv">冒泡，执行<div id="outerDiv">元素上的 click 事件处理程序，输出outerDiv clicked。
示例二
下面是一个在 ul 元素上进行事件委托的例子：
<!DOCTYPE html>
<html>
<head>
<title>Event Flow Demo</title>
</head>
<body>
<ul id="myList">
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
</ul>
<script>
var myList = document.getElementById("myList");
myList.addEventListener("click", function (event) {
if (event.target.tagName === "LI") {
console.log(event.target.innerHTML);
}
});
</script>
</body>
</html>
在示例中，我们绑定了 ul 元素上的 click 事件，而我们只关心对 li 元素的点击事件。因此，我们通过在 ul 上进行事件委托，只在 ul 元素上绑定一个事件处理程序，通过判断 event.target 来确定触发事件的元素是否为 li 元素。
当我们点击 li 元素时，事件触发的顺序如下：
- 执行 ul 元素上的 click 事件处理程序。
- 判断触发事件的元素是否为 li 元素。
- 如果是，则输出 li 元素的文本内容。
通过事件委托，我们可以精简代码，减少绑定事件处理程序的次数，提高代码效率。
结论
以上就是事件流的相关知识和示例说明。掌握事件流的原理和使用方法，有利于我们正确处理事件操作，避免出现因事件触发顺序而产生的问题。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript事件学习小结（一）事件流 - Python技术站
微信扫一扫 
支付宝扫一扫 