前端小册

Appearance

On this page

事件机制 ​

事件的触发过程是怎么样的？什么是事件代理？

事件触发的三个阶段 ​

  • window 往事件触发处传播，遇到注册的捕获事件会触发

  • 传播到事件触发处时触发注册的事件

  • 从事件触发处往 window 传播，遇到注册的冒泡事件会触发

事件触发一般会按照上面顺序进行，但也有特例，如果给一个 body 中子节点同时注册冒泡和捕获事件，事件触发会按照注册的顺序执行

js
// 以下会先打印冒泡然后是捕获
node.addEventListener(
  'click',
  event => {
    console.log('冒泡')
  },
  false
)
node.addEventListener(
  'click',
  event => {
    console.log('捕获 ')
  },
  true
)

注册事件 ​

使用 addEventListener 注册事件

js
addEventListener(type, listener)
addEventListener(type, listener, options)
addEventListener(type, listener, useCapture)

  • type: 区分大小写的字符串代表监听的事件类型

  • listener: 事件函数

  • options: 指定对象特征的事件监听器

    • capture: Boolean 类型，决定注册事件时捕获事件还是冒泡事件
    • once: 值为 true 表示该回调只会调用一次，调用后会移除监听
    • passive: 表示永远不会调用 preventDefault

  • useCapture: Boolean 类型，决定注册事件时捕获事件还是冒泡事件

一般来说，如果我们只希望事件只触发在目标上，这时候可以使用 stopPropagation 来阻止事件的进一步传播。通常我们认为 stopPropagation 是用来阻止事件冒泡的，其实该函数也可以阻止捕获事件。stopImmediatePropagation 同样也能实现阻止事件，但是还能阻止该事件目标执行别的注册事件

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

事件代理 ​

如果一个节点中的子节点是动态生成的，那么子节点需要注册事件的话应该注册在父节点上

js
<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>

事件代理对于直接给目标注册事件来书，有以下优点：

  • 节省内存

  • 不需要给子节点注销事件