什么是JS事件流

news2024/11/19 20:40:36

什么是JS事件流?

一：事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
  <title>事件冒泡例子</title>
</head>
<body>
  <div id="box">点击我</div>
</body>
</html>

上述的代码点击页面的div元素后，click事件会以如下顺序发生：

1.<div>
2.<body>
3.<html>
4.document

此事件流就是事件冒泡

图1所示：

事件冒泡

代码模拟事件冒泡：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>事件冒泡例子</title>
</head>
<body>
  <div id="box">点击我</div>
</body>
<script>
  const boxDiv = document.getElementById('box')
  const body = document.body
  const html = document.documentElement
  boxDiv.addEventListener('click', function(e) {
    console.log('boxDiv',this)
  })
  body.addEventListener('click', function(e) {
    console.log('body', this)
  })
  html.addEventListener('click', function(e) {
    console.log('html:', this)
  })
  document.addEventListener('click', function(e) {
    console.log('document:', this)
  })
</script>
</html>

打印结果如下：
在这里插入图片描述

二：事件捕获

点击页面的div元素后，click事件会以如下顺序发生：

1.document
2.<html>
3.<body>
4.<div>

此事件流就是事件捕获

图2所示：

事件捕获

其中：

触发事件为 到达目标，通常在事件处理时被认为是冒泡阶段的一部分。

也就是说捕获一般从document到html，再到body…（目标对象的父标签）就结束了。

代码模拟事件捕获：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>事件冒泡例子</title>
</head>
<body>
  <div id="box">点击我</div>
</body>
<script>
  const boxDiv = document.getElementById('box')
  const body = document.body
  const html = document.documentElement
  boxDiv.addEventListener('click', function(e) {
    console.log('boxDiv',this)
  }, true)
  body.addEventListener('click', function(e) {
    console.log('body', this)
  }, true)
  html.addEventListener('click', function(e) {
    console.log('html:', this)
  }, true)
  document.addEventListener('click', function(e) {
    console.log('document:', this)
  }, true)
</script>
</html>

打印结果如下：

在这里插入图片描述

三：事件处理程序一般有以下两种方式：

1. 事件处理程序的名字以`"on"`，例如上述的点击也可以写成如下：

// 给div添加点击事件  
    const boxDiv = document.getElementById('box')
    boxDiv.onclick = function (e) {
    	console.log('boxDiv',this)
    }
// 移除div的点击事件
	boxDiv.onclick = null

2. Event是为事件处理程序的添加和移除定义了两个方法`addEventListener()`和`removeEventListener()`，这两个方法接受三个参数：事件名，事件处理函数，布尔值（默认false），true表示在捕获阶段调用事件处理程序，false表示在冒泡阶段用事件处理程序。

// 给div添加点击事件   
const boxDiv = document.getElementById('box')
boxDiv.addEventListener('click', function(e) {
	console.log('boxDiv add click',this)
})
// 移除div的点击事件   
boxDiv.removeEventListener('click', function(e) { // 无效果
	console.log('boxDiv remove click',this) 
})

// 打印出
boxDiv add click <div id="box">点击我</div>

更换以下:

const boxDiv = document.getElementById('box')

const handler = function (e) {
    console.log('boxDiv handler')
}
boxDiv.addEventListener('click', handler, false)
setTimeout(() => {
    boxDiv.removeEventListener('click', handler, false)
    console.log('点击事件已销毁')
}, 3000);

通过以上代码可知，注意事项：addEventListener() 添加的匿名函数无法删除！！！

阻止捕获和冒泡阶段中当前事件的进一步传播可以使用**event.stopPropagation()**

 const boxDiv = document.getElementById('box')
 const body = document.body
 const html = document.documentElement
 boxDiv.addEventListener('click', function(e) {
     console.log('boxDiv add click',this)
     e.stopPropagation()
 })
body.addEventListener('click', function(e) {
    console.log('body', this)
})
html.addEventListener('click', function(e) {
    console.log('html:', this)
})
document.addEventListener('click', function(e) {
    console.log('document:', this)
})

四：事件委托

“过多事件处理程序“的解决方案是使用事件委托。事件委托是利用事件冒泡，可以只使用一个事件处理程序来管理一种类型的事件。

示例代码：

// 点击li打印li内的文本
<!DOCTYPE html>
<html lang="en">
<head>
  <title>事件委托的例子</title>
</head>
<body>
  <ul id="ul">
    <li>我是第1个li</li>
    <li>我是第2个li</li>
    <li>我是第3个li</li>
    <li>我是第4个li</li>
    <li>我是第5个li</li>
    <li>我是第6个li</li>
  </ul>
  <script>
    const ul = document.getElementById('ul')
    ul.onclick = function (e) {
      console.log(e.target.innerHTML)
    }
  </script>
</body>
</html>