stopPropagation()与preventDefault()与stopImmediatePropagation()

event.stopPropagation()

阻止事件的冒泡方法，不让事件向 document 上蔓延，但是默认事件任然会执行. 比如: 当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开，

event.stopImmediatePropagation()

阻止事件冒泡并且阻止该元素上同事件类型的监听器被触发

event.preventDefault()

阻止默认事件的方法，调用此方法是，连接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素；

return false

会同事阻止事件冒泡也会阻止默认事件；写上此代码，连接不会被打开，事件也不会传递到上一层的父元素；可以理解为 return false 就等于同时调用了 event.stopPropagation()和 event.preventDefault()

event.preventDefault()不能阻止 UI 事件

UI 事件一般是不能够取消默认行为的。

UI 事件包括: load, unload, abort, error, select, resize, scroll 这类事件绑定事件处理函数，只会在事件已经真实发生过后才触发，或者说是通知，因此这时是无法取消默认行为的。

MDN 所有的事件

MDN UI 事件

不能阻止 scroll 事件的默认行为时, 如何阻止页面滚动?

用户的一些行为可能导致页面滚动：鼠标的滚轮和键盘的上下键，那么可以通过取消这两个事件的默认行为来取消滚动：

window.addEventListener('wheel', function (e) {
  e.preventDefault()
})

window.addEventListener('keydown', function (e) {
  if (e.key == 'ArrowDown' || e.key == 'ArrowUp') {
    e.preventDefault()
  }
})

evt.addEventListener()

evt.addEventListener() 方法将指定的监听器注册到 evt 上，当该对象触发指定的事件时，指定的回调函数就会被执行。事件目标可以是一个文档上的元素 Element、Document 和 Window，也可以是任何支持事件的对象（比如 XMLHttpRequest）

语法

window.addEventListener(type, listener)
window.addEventListener(type, listener, options)
window.addEventListener(type, listener, useCapture)

参数

type: 所有的事件类型详见：事件类型(CN)
listener: 回调函数
options: 对象类型，指定有关 listener 属性的可选参数对象。可用的选项如下：
- capture: boolean, 表示 listener 会在该类型的事件捕获阶段传播到该 Event Target 时触发
- once: boolean, 表示 listener 在添加之后最多只调用一次。如果为 true，listener 会在其被调用之后自动移除。
- passive: boolean, 设置为 true 时，表示 listener 永远不会调用 preventDefault()[这在一定程度上能起到性能优化的作用]。如果 listener 仍然调用了这个函数，客户端将会忽略它并抛出一个控制台警告。
- signal: AbortSignal，该 AbortSignal 的 abort() 方法被调用时，监听器会被移除。
useCapture: boolean, 默认:false. 表示在 DOM 树中注册了 listener 的元素，是否要先于它下面的 Event Target 调用该 listener。当 useCapture（设为 true）时，沿着 DOM 树向上冒泡的事件不会触发 listener。

option 支持的安全检测

在旧版本的 DOM 的规定中，addEventListener() 的第三个参数是一个布尔值，表示是否在捕获阶段调用事件处理程序。因此addEventListener(type, listener, options)与addEventListener(type, listener, useCapture)存在兼容问题，需要检测 addEventListener 的第三个参数，可以接收哪种参数类型

检测是否支持passive值:

let passiveSupported = false

try {
  const options = {
    get passive() {
      // 该函数会在浏览器尝试访问 passive 值时被调用。
      passiveSupported = true
      return false
    },
  }

  window.addEventListener('test', null, options)
  window.removeEventListener('test', null, options)
} catch (err) {
  passiveSupported = false
}

// 当你想实际创建一个是否支持 options 的事件侦听器时，你可以这样做：
someElement.addEventListener('mouseup', handleMouseUp, passiveSupported ? { passive: true } : false)

参考资料

(MDN dom.addEventListener())[https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener#事件监听回调]

stopPropagation()与preventDefault()与stopImmediatePropagation() #

event.stopPropagation() #

event.stopImmediatePropagation() #

event.preventDefault() #

return false #

event.preventDefault()不能阻止 UI 事件 #

不能阻止 scroll 事件的默认行为时, 如何阻止页面滚动? #

evt.addEventListener() #

语法 #

参考资料 #