chdyiboke / weekly

issue and share weekly
5 stars 1 forks source link

addEventListener(event, handler[, options])之不知道的options #66

Open liukexina opened 3 years ago

liukexina commented 3 years ago

options 具有以下属性的附加可选对象: once:如果为 true,那么会在被触发后自动删除监听器。 capture:事件处理的阶段,由于历史原因,options 也可以是 false/true,它与 {capture: false/true} 相同。 passive:如果为 true,那么处理程序将不会调用 preventDefault()

liukexina commented 3 years ago

addEventListener 的可选项 passive: true 向浏览器发出信号,表明处理程序将不会调用 preventDefault()。 为什么需要这样做?

移动设备上会发生一些事件,例如 touchmove(当用户在屏幕上移动手指时),默认情况下会导致滚动,但是可以使用处理程序的 preventDefault() 来阻止滚动。 因此,当浏览器检测到此类事件时,它必须首先处理所有处理程序,然后如果没有任何地方调用 preventDefault,则页面可以继续滚动。但这可能会导致 UI 中不必要的延迟和“抖动”。

passive: true 选项告诉浏览器,处理程序不会取消滚动。然后浏览器立即滚动页面以提供最大程度的流畅体验,并通过某种方式处理事件。 对于某些浏览器(Firefox,Chrome),默认情况下,touchstart 和 touchmove 事件的 passive 为 true。