数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
安卓
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会科学
时装研究
法律研究解释 Javascript 中的事件流流程
在 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;'> Inner Div </div> </div>
事件冒泡
document.querySelector('#outer').addEventListener('click', e => {
console.log('Outer div is clicked');
}, false);
document.querySelector('#inner').addEventListener('click', e => {
console.log('Inner div is clicked');
}, false);如果你运行上述代码并单击内部 div，你会得到日志 -
已单击内部 div
已单击外部 div
事件捕获
document.querySelector('#outer').addEventListener('click', e => {
console.log('Outer div is clicked');
}, true);
document.querySelector('#inner').addEventListener('click', e => {
console.log('Inner div is clicked');
}, true);输出
如果你运行上述代码并单击内部 div，你会得到日志 -
Outer div is clicked Inner div is clicked
更新时间：19-9-2019
604 次观看
广告