【详解】浏览器中事件的触发机制

事件触发有三个阶段

①   window 往事件触发处传播，遇到注册的捕获事件会触发
②  传播到事件触发处时触发注册的事件
③  从事件触发处往 window 传播，遇到注册的冒泡事件会触发
 
注册事件，最后一个参数若为 boolean
false - 注册程序在冒泡阶段触发
true - 注册程序在捕获阶段触发
 
下面这段代码可以看到其中的原理
<!DOCTYPE html>
<html lang="en">

<head>
  <title>事件机制</title>
  <meta charset="utf-8">
  <style> body, button { font-size: 50px; } </style>
</head>

<body>
<button id="button">事件测试</button>
<script>
var button = document.getElementById('button')

// 注册事件，最后一个参数若为 boolean
// false - 注册程序在冒泡阶段触发
// true - 注册程序在捕获阶段触发


// 触发位置上注册事件，无论是冒泡还是捕获
// 均是按照注册的顺序执行
button.addEventListener('click', e => {
  console.log('按钮 - 冒泡2')
}, false)
button.addEventListener('click', e => {
  console.log('按钮 - 捕获2')
}, true)

button.addEventListener('click', e => {
  console.log('按钮 - 捕获1')
}, true)
button.addEventListener('click', e => {
  console.log('按钮 - 冒泡1')
}, false)

// 非触发位置，则先执行捕获，再执行冒泡
document.body.addEventListener('click', e => {
  console.log('body - 冒泡2')
}, false)
document.body.addEventListener('click', e => {
  console.log('body - 冒泡1')
}, false)
document.body.addEventListener('click', e => {
  console.log('body - 捕获2')
}, true)
document.body.addEventListener('click', e => {
  console.log('body - 捕获1')
}, true)

</script>
</body>

</html>
事件冒泡捕获的理解

 上述代码在控制台的输出为（点击按钮之后）：

body - 捕获2
body - 捕获1
按钮 - 冒泡2
按钮 - 捕获2
按钮 - 捕获1
按钮 - 冒泡1
body - 冒泡2
body - 冒泡1
代码输出结果

 最后一个参数也可以为 object 对象，key 值含义如下所示：

{
  capture: false, // 布尔值，false - 冒泡， true - 捕获
  once: false, // 布尔值，值为 true 表示该回调只会调用一次，调用后会移除监听
  passive: false // 布尔值，表示永远不会调用 preventDefault
}

 

 

posted @ 2016-04-22 23:40  nDos  阅读(566)  评论(0)    收藏  举报