昆明企业网站制作,临沂网站建设选盛誉,哪个网站可以找人做橱柜,设计公司设计费报价单DOM事件的传播机制是指当一个事件在DOM树中触发时#xff0c;它是如何在各个元素之间传播的。DOM事件传播机制分为三个阶段#xff1a;捕获阶段、目标阶段和冒泡阶段。此外#xff0c;还有一种常用的技术称为事件委托#xff0c;它能够简化事件处理程序的绑定和管理。本文将…DOM事件的传播机制是指当一个事件在DOM树中触发时它是如何在各个元素之间传播的。DOM事件传播机制分为三个阶段捕获阶段、目标阶段和冒泡阶段。此外还有一种常用的技术称为事件委托它能够简化事件处理程序的绑定和管理。本文将详细介绍这些概念并提供相应的代码示例。
事件与事件流
在介绍事件传播机制之前我们先来了解一下什么是事件和事件流。在DOM中事件是指用户与页面交互时发生的动作比如点击、鼠标移动等。而事件流则是指这些事件在DOM树中传播的路径。
每次用户与一个网页进行交互例如点击链接按下一个按键或者移动鼠标时就会触发一个事件。我们的程序可以检测这些事件然后对此作出响应。从而形成一种交互。
这样可以使我们的页面变得更加的有意思而不仅仅像以前一样只能进行浏览。
JavaScript 中采用一个叫做事件监听器的东西来监听事件是否发生。这个事件监听器类似于一个通知当事件发生时事件监听器会让我们知道然后程序就可以做出相应的响应。
通过这种方式就可以避免让程序不断地去检查事件是否发生让程序在等待事件发生的同时可以继续做其他的任务。
标准 DOM 事件流
DOM事件流是指在DOM树中事件从最外层的节点开始传播逐级向下直到达到目标节点然后再从目标节点向上传播到最外层的节点。
DOM事件流分为三个阶段捕获阶段、目标阶段和冒泡阶段。
捕获阶段事件从最外层的节点开始传播逐级向下直到达到目标节点。在捕获阶段中事件会依次触发每个经过的节点上绑定的捕获型事件处理函数。目标阶段事件达到目标节点后在目标节点上触发绑定的事件处理函数。在这个阶段中只会触发目标节点上绑定的事件处理函数。冒泡阶段事件从目标节点开始向上传播逐级向上直到达到最外层的节点。在冒泡阶段中事件会依次触发每个经过的节点上绑定的冒泡型事件处理函数。
在实际应用中默认情况下大部分DOM事件都是按照冒泡方式进行传播。但是也可以通过调用addEventListener方法时传入第三个参数为true来将其设置为捕获方式进行传播。
总结起来DOM事件流就是指从最外层的节点开始传播逐级向下到达目标节点然后再从目标节点向上传播到最外层的节点的过程。这个过程分为捕获阶段、目标阶段和冒泡阶段。
下面是一个示例演示了标准 DOM 事件流的传播顺序 div idouterdiv idinnerbutton idbtn点击我/button/div
/divconst outer document.getElementById(outer);
const inner document.getElementById(inner);
const btn document.getElementById(btn);outer.addEventListener(click, function() {console.log(外层元素被点击);
}, true);inner.addEventListener(click, function() {console.log(内层元素被点击);
}, true);btn.addEventListener(click, function() {console.log(按钮被点击);
});当我们点击按钮时控制台会输出以下内容
外层元素被点击 内层元素被点击 按钮被点击
可以看到事件首先在捕获阶段从外层元素开始传播然后到达目标元素最后在冒泡阶段从目标元素向上冒泡。
事件冒泡流
事件冒泡是指在DOM树中事件从目标元素开始向上冒泡传播的过程。也就是说在冒泡阶段事件会依次触发父级元素的相同类型事件处理程序。
下面是一个示例演示了事件冒泡的过程 div idouterdiv idinnerbutton idbtn点击我/button/div
/divconst outer document.getElementById(outer);
const inner document.getElementById(inner);
const btn document.getElementById(btn);outer.addEventListener(click, function() {console.log(外层元素被点击);
});inner.addEventListener(click, function() {console.log(内层元素被点击);
});btn.addEventListener(click, function() {console.log(按钮被点击);
});当我们点击按钮时控制台会输出以下内容
按钮被点击 内层元素被点击 外层元素被点击
可以看到事件首先在目标元素上触发然后在冒泡阶段依次触发父级元素的相同类型事件处理程序。
事件捕获流
事件捕获是指在DOM树中事件从最外层的父级元素开始向下捕获传播的过程。也就是说在捕获阶段事件会依次触发父级元素的相同类型事件处理程序。
下面是一个示例演示了事件捕获的过程 div idouterdiv idinnerbutton idbtn点击我/button/div
/divconst outer document.getElementById(outer);
const inner document.getElementById(inner);
const btn document.getElementById(btn);outer.addEventListener(click, function() {console.log(外层元素被点击);
}, true);inner.addEventListener(click, function() {console.log(内层元素被点击);
}, true);btn.addEventListener(click, function() {console.log(按钮被点击);
});当我们点击按钮时控制台会输出以下内容
外层元素被点击 内层元素被点击 按钮被点击
可以看到事件首先在捕获阶段依次触发父级元素的相同类型事件处理程序然后到达目标元素。
事件委托流
事件委托是一种常用的技术它利用了事件冒泡的特性。通过在父级元素上绑定一个事件处理程序可以监听子级元素触发的事件。这样一来无论子级元素是已经存在的还是动态生成的都可以通过父级元素来管理它们的事件。
下面是一个示例演示了事件委托的过程 ul idlistli列表项1/lili列表项2/lili列表项3/li
/ulconst list document.getElementById(list);list.addEventListener(click, function(event) {if (event.target.tagName LI) {console.log(列表项被点击);console.log(触发事件的目标元素是, event.target);}
});当我们点击任意一个列表项时控制台会输出以下内容
列表项被点击 触发事件的目标元素是 li列表项1/li
可以看到通过在父级元素上绑定点击事件处理程序我们可以捕获到子级元素触发的点击事件并且可以获取到触发事件的目标元素。这样一来无论我们添加或删除列表项只需要在父级元素上绑定一个事件处理程序即可。
总结
通过以上介绍我们了解了DOM事件传播机制的三个阶段捕获阶段、目标阶段和冒泡阶段。此外我们还学习了如何利用事件委托来简化事件处理程序的绑定和管理。掌握这些概念和技巧能够帮助我们更好地处理和管理DOM中的各种交互事件。
