事件机制

事件触发三阶段

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) => {
		if(event.target.tagName === 'LI'){
			console.log('当前元素事件触发成功'')
		}
		
	})
</script>

Dom事件级别

Dom事件一共分为3个级别：Dom0、Dom2、Dom3
- Dom0 级别：
  - DOM0级处理事件就是将一个函数赋值给一个事件处理属性。
  - 不能实现一个Dom有多个事件，事件会覆盖。
```
<button id="btn">点击</button>
<script>
	var btn = document.getElementById('#btn')
  btn.onclick = function(){
    console.log('Dom0 级事件触发')
  }
</script>
```
- Dom2 级别：
  - 添加了 addEventListener、removeEventListener
  - 支持一个Dom监听多个事件
```
<button id="btn">点击</button>
<script>
	var btn = document.getElementById('#btn')
  var handler = function(){
    console.log('Dom2 级事件触发')
	}
  btn.addEventListener('click', handler)
  btn.addEventListener('mouseenter', handler)
</script>
```
- Dom3 级别； ①增加事件类型；②可以自定义事件
  - 在Dom2事件基础上，添加了很多事件类型
    - UI事件：用户与页面上的元素交互时触发，如：load、scroll
    - 焦点事件，当元素获得或失去焦点时触发，如：blur、focus
    - 鼠标事件，当用户通过鼠标在页面执行操作时触发如：dbclick、mouseup
    - 滚轮事件，当使用鼠标滚轮或类似设备时触发，如：mousewheel
    - 文本事件，当在文档中输入文本时触发，如：textInput
    - 键盘事件，当用户通过键盘在页面上执行操作时触发，如：keydown、keypress
    - 合成事件，当为IME（输入法编辑器）输入字符时触发，如：compositionstart
    - 变动事件，当底层DOM结构发生变化时触发，如：DOMsubtreeModified
  - 可以自定义事件
    - 触发事件： dispatchEvent
    - 创建自定义事件，两种方法。区别：CustomEvent事件可以传入自定义数据
      - Event： new Event(name, eventOptions) 。 eventOptions:
        
        bubbles: 事件是否冒泡，默认 false
        
        cancelable：事件是否能被取消，默认 false
      - CustomEvent： new CustomEvent(name, eventOptions)。 eventOptions
        
        detail：事件中需要被传递的数据， any类型，默认null
        
        bubbles: 事件是否冒泡，默认 false
        
        cancelable：事件是否能被取消，默认 false
Event:
```
const sendMsg = new Event('sendMsg')
// 注册自定义事件
document.addEventLister('sendMsg', handler)

// 触发自定义事件
document.dispatchEvent(sendMsg)

function handler(){
  console.log('自定义事件被触发')
}
```
CustomEvent:
```
let target = 'sendMsg is comming'
const sendMsg = new CustomEvent('sendMsg', {target: target})
// 注册自定义事件
document.addEventLister('sendMsg', handler)

// 触发自定义事件
document.dispatchEvent(sendMsg)

function handler(e){
  console.log('自定义事件被触发', e.detail)
}
```

事件机制demo演示

代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div{
      width: 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>

控制台

posted @ 2021-07-05 16:54 shine_lovely 阅读(219) 评论(0) 编辑收藏举报

刷新页面返回顶部

shine_lovely

事件机制

事件机制

事件触发三阶段

事件捕获

事件冒泡

eventPhase事件值

阻止事件

事件代理(事件委托)

Dom事件级别

事件机制demo演示

代码

控制台

公告