Open yuanyuanbyte opened 2 years ago
本系列的主题是 JavaScript 深入系列，每期讲解一个技术要点。如果你还不了解各系列内容，文末点击查看全部文章，点我跳转到文末。
如果觉得本系列不错，欢迎 Star，你的支持是我创作分享的最大动力。
事件发生时会在元素节点与根节点之间按照特定的顺序传播，路径所经过的所有节点都会收到该事件，这个传播过程即DOM事件流。
事件流是事件在目标元素和顶层元素间的触发顺序, 在早期，微软和网景实现了相反的事件流，网景主张捕获方式，微软主张冒泡方式:
后来 w3c 采用折中的方式, 规定先捕获再冒泡平息了战火。如此一个事件就被分成了三个阶段(是的, 不光是捕获和冒泡):
w3c
那这里又有一个新的疑问❓❓❓ 既然捕获和冒泡阶段都会触发事件, 那先捕获再冒泡, 岂不是路径上的元素都会触发两次事件?
在 DOM2 中, 事件监听 addEventListener() 的第三个参数 决定事件了是在捕获阶段生效还是在冒泡阶段生效, 接下来简要学习下 addEventListener。
addEventListener()
addEventListener
还有一个小问题, 为什么要单独区分一个目标阶段? 下面会做出解答。
EventTarget.addEventListener() 方法将指定的监听器注册到目标元素上, 当该对象触发指定的事件时, 指定的回调函数就会被执行。addEventListener有三个参数：
EventTarget.addEventListener()
element.addEventListener(event, function, useCapture)
event
function
useCapture：可选。布尔值，指定事件是否在捕获或冒泡阶段执行。
useCapture
可选
useCapture的可能值:
true
false
一个默认的事件监听：
document.getElementById("myBtn").addEventListener("click", function() { myFunction(p1, p2); });
注意：❗ ❗ ❗ 对于目标元素上的事件监听器来说, 事件会处于目标阶段, 而不是冒泡阶段或者捕获阶段. 在目标阶段的事件会触发该元素上的所有监听器, 而不在乎这个监听器到底在注册时 useCapture 是 true 还是 false.
我们注意到addEventListener() 的第三个参数是可选的，而默认值是false，除非主动的设置该参数为true，否则 我们添加的事件监听器默认情况就是在冒泡阶段执行，如此 在某种程度上是不是可以说现代浏览器默认的响应机制是 事件冒泡(仅个人说法)
仅个人说法
查看全部文章
各系列文章汇总：https://github.com/yuanyuanbyte/Blog
我是圆圆，一名深耕于前端开发的攻城狮。
本系列的主题是 JavaScript 深入系列，每期讲解一个技术要点。如果你还不了解各系列内容，文末点击查看全部文章，点我跳转到文末。
如果觉得本系列不错，欢迎 Star，你的支持是我创作分享的最大动力。
DOM 事件响应机制
什么是事件流？
事件发生时会在元素节点与根节点之间按照特定的顺序传播，路径所经过的所有节点都会收到该事件，这个传播过程即DOM事件流。
事件流是事件在目标元素和顶层元素间的触发顺序, 在早期，微软和网景实现了相反的事件流，网景主张捕获方式，微软主张冒泡方式:
后来
w3c采用折中的方式, 规定先捕获再冒泡平息了战火。如此一个事件就被分成了三个阶段(是的, 不光是捕获和冒泡):那这里又有一个新的疑问❓❓❓ 既然捕获和冒泡阶段都会触发事件, 那先捕获再冒泡, 岂不是路径上的元素都会触发两次事件?
在 DOM2 中, 事件监听
addEventListener()的第三个参数 决定事件了是在捕获阶段生效还是在冒泡阶段生效, 接下来简要学习下addEventListener。addEventListenerEventTarget.addEventListener()方法将指定的监听器注册到目标元素上, 当该对象触发指定的事件时, 指定的回调函数就会被执行。addEventListener有三个参数：event： 必须。字符串，指定事件名。function： 必须。指定要事件触发时执行的函数。useCapture：可选。布尔值，指定事件是否在捕获或冒泡阶段执行。useCapture的可能值:true- 事件句柄在捕获阶段执行false- 默认。事件句柄在冒泡阶段执行一个默认的事件监听：
注意：❗ ❗ ❗ 对于目标元素上的事件监听器来说, 事件会处于目标阶段, 而不是冒泡阶段或者捕获阶段. 在目标阶段的事件会触发该元素上的所有监听器, 而不在乎这个监听器到底在注册时
useCapture是true还是false.现代浏览器默认的响应机制是什么？
我们注意到
addEventListener()的第三个参数是可选的，而默认值是false，除非主动的设置该参数为true，否则 我们添加的事件监听器默认情况就是在冒泡阶段执行，如此 在某种程度上是不是可以说现代浏览器默认的响应机制是 事件冒泡(仅个人说法)查看全部文章
博文系列目录
交流
各系列文章汇总：https://github.com/yuanyuanbyte/Blog
我是圆圆，一名深耕于前端开发的攻城狮。