前端路线图

夜间模式

导航

事件监听、捕获和冒泡 ​

事件绑定 ​

  • 行内事件处理器
    html
    <button onclick="alert('onclick')"></button>
  • 事件处理器属性
    js
    button.onclick = function(){
  alert('onclick')
}

元素上同类型事件处理器唯一，绑定新事件处理器会覆盖旧的

事件监听 ​

允许为一个事件添加多个监听器。

js
function handle(){
  alert('onclick')
}

button.addEventListener('click', handler) //添加事件监听器
button.removeEventListener('click', handler) //移除上面添加的事件监听器

addEventListener() ​

js
addEventListener(type, listener);
addEventListener(type, listener, options);
addEventListener(type, listener, useCapture); //旧版浏览器第三个参数是布尔值
  • type 表示事件类型的字符串，大小写敏感
  • listener 事件触发回调函数，this指向事件监听的元素
  • options是一个可选参数对象，可选属性如下
    • capture：指定捕获阶段执行回调函数
    • once：指定回调函数最多执行一次，执行后移除监听
    • passive：忽略回调函数中的preventDefault()
    • signal：通过AbortSignal控制移除监听

removeEventListener() ​

js
removeEventListener(type, listener) //必填项，无法一行代码移除元素上所有监听器
removeEventListener(type, listener, options)
removeEventListener(type, listener, useCapture) //旧版浏览器第三个参数是布尔值

要成功移除通过addEventListener添加的事件监听，以下内容需要匹配：

  • type
  • listener
  • useCapture或options.capture

options的其他内容不影响，以上三项匹配确定一个不重复的事件监听器，重复添加不生效。

事件捕获 ​

事件传播先执行捕获阶段

js
addEventListener(type, listener, { caputre: true })
addEventListener(type, listener, true)

执行顺序：
从<html>开始，向下逐个元素运行捕获阶段注册的事件处理器，直到到达实际触发的元素

事件冒泡 ​

事件传播后执行冒泡阶段

js
addEventListener(type, listener)
addEventListener(type, listener, { caputre: false })
addEventListener(type, listener, false)

执行顺序：
从实际触发的元素开始，向上逐个元素运行冒泡阶段注册的事件处理器，直到到达<html>

事件实例方法 ​

event.preventDefault() ​

阻止事件触发后默认动作的发生，如<a>链接点击跳转、<form>表单提交

event.stopPropagation() ​

阻止捕获和冒泡阶段中当前事件的进一步传播

event.stopImmediatePropagation() ​

阻止当前元素上相同事件类型的其他事件处理器运行

事件委托/代理 ​

事件委托，或称为事件代理，是对事件传播的运用。

运用场景 ​

大量子元素需要设置事件监听时，可以将事件监听设置在其父节点上，利用捕获或冒泡处理子元素的事件。

好处 ​

  • 对不确定数量的子元素处理事件监听
  • 减少事件监听器，降低内存占用

参考资料 ​