事件机制

事件触发三阶段

JavaScript事件分为3个阶段

捕获阶段
目标阶段
冒泡阶段

事件捕获

事件捕获阶段：事件到达目标元素前拦截事件，意为捕获事件。

事件捕获阶段：event.eventPhase的值为1。当发现是目标元素时，eventPhase 的值变为2。

事件捕获：自上到下，由外到里，前往捕获，行程向下趋势

事件冒泡

事件冒泡阶段：事件到底目标元素后，向上传导，向祖先元素传导事件，意为冒泡事件

事件冒泡阶段：event.eventPhase的值为3。

事件冒泡：由里到外，冒泡，向上延伸。

eventPhase事件值

可以通过事件目标对象的 eventPhase 属性来得知当前事件在什么阶段

eventPhase事件值

常量	值	描述
Event.NONE	0	这个时间，没有事件正在被处理
Event.CAPTURING_PHASE	1	捕获阶段，事件正在被目标元素的祖先对象处理。过程是：Window => Document => HtmlElement => 一直到目标元素的父元素。通过EventTarget.addEventListener()注册为捕获模式的Event listeners调用。即addEventListener第三个参数设为true。
Event.AT_TARGET	2	事件对象已经抵达目标元素
Event.BUBBLING_PHASE	3	事件对象逆向向上传播会目标元素的祖先元素。为这个阶段注册的Event listeners在这个过程中被触发

阻止事件

e.stopPropagation：事件只发生在目标元素上，使用e.stopPropagation 来阻止事件的进一步传播。
- e.stopPropagation 即可以阻止冒泡事件，也可以阻止捕获事件
e.stopImmediatePropagation：也可以阻止事件的进一步传播。但是同时会阻止该事件目标执行别的注册事件。

node.addEventListener(
  'click',
  event => {
    event.stopImmediatePropagation()
    console.log('冒泡')
  },
  false
)
// 点击 node 只会执行上面的函数，该函数不会执行
node.addEventListener(
  'click',
  event => {
    console.log('捕获 ')
  },
  true
)

事件代理

如果一个节点的子节点是动态生成的，那么注册在子节点上的事件，应该注册在父节点上
节省内存
不需要为子节点注销事件

<ul id="ul">
	<li>1</li>
    <li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
</ul>
<script>
	let ul = document.querySelector('#ul')
	ul.addEventListener('click', (event) => {
		console.log(event.target);
	})
</script>

事件机制demo演示

代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div{
       300px;
      height: 300px;
      line-height: 300px;
      background: pink;
      text-align: center;
    }
  </style>
</head>
<body>
<div>事件机制</div>
<script>
  var htmlEle = document.querySelector('html')
  var bodyEle = document.querySelector('body')
  var divEle = document.querySelector('div')
  console.log('e.eventPhase的值：0：没有事件在处理； 1：捕获阶段； 2： 目标阶段； 3： 冒泡阶段');
  htmlEle.addEventListener('click',function (e) {
    console.log(`❥e.eventPhase的值：${e.eventPhase}，处于【捕获阶段】，html被触发捕获点击事件`)
  }, true)
  bodyEle.addEventListener('click',function (e) {
    console.log(`❥❥e.eventPhase的值：${e.eventPhase}，处于【捕获阶段】，body被触发捕获点击事件`)
  }, true)

  divEle.addEventListener('click',function (e) {
    console.log(`❥❥❥e.eventPhase的值：${e.eventPhase}，处于【目标阶段】，div被触发点击事件`)
  }, true)

  bodyEle.addEventListener('click',function (e) {
    console.log(`❥❥e.eventPhase的值：${e.eventPhase}，处于【冒泡阶段】，body被触发冒泡点击事件`)
  }, false)
  htmlEle.addEventListener('click',function (e) {
    console.log(`❥e.eventPhase的值：${e.eventPhase}，处于【冒泡阶段】，html被触发冒泡点击事件`)
  }, false)

</script>
</body>
</html>

事件机制

事件机制

事件触发三阶段

事件捕获

事件冒泡

eventPhase事件值

阻止事件

事件代理

事件机制demo演示

代码

控制台