解释 Javascript 中的事件流程
javascriptfront end technologyobject oriented programming
在 JavaScript 中，事件流程由三个概念完成 −
事件目标 − 事件发生的实际 DOM 对象。
事件冒泡 − 解释如下
事件捕获 − 解释如下
事件冒泡是当一个元素嵌套在第二个元素中时调用事件处理程序的顺序，并且两个元素都为同一事件(例如单击)注册了侦听器。对于冒泡，事件首先被最内层元素捕获并处理，然后传播到外部元素。
对于捕获，事件首先被最外层元素捕获并传播到内部元素。
让我们看看两者的示例。
对于以下两个示例，请创建以下 HTML −
示例
<div id='outer' style='background-color:red;display:inline-block;padding:50px;'> Outer Div <div id='inner' style='background-color:yellow;display:inline-block;padding:50px;'> 内部 Div </div> </div>
事件冒泡
document.querySelector('#outer').addEventListener('click', e => {
console.log('外部 div 被点击');
}, false);
document.querySelector('#inner').addEventListener('click', e => {
console.log('Inner div 被点击');
}, false);
如果运行上述代码并单击内部 div，您将获得日志 −
内部 div 被单击
外部 div 被单击
事件捕获
document.querySelector('#outer').addEventListener('click', e => {
console.log('外部 div 被单击');
}, true);
document.querySelector('#inner').addEventListener('click', e => {
console.log('Inner div is clicked');
}, true);
输出
如果运行上述代码并单击内部 div，您将获得日志 −
外部 div 被单击 内部 div 被单击
