学习理解浏览器中的JavaScript-事件注册这是我参与11月更文挑战的第12天, 活动详情查看：2021最后一次更文

这是我参与11月更文挑战的第12天，活动详情查看：2021最后一次更文挑战

前言

前几篇文章, 我们学习记录了JavaScript 中的几个事件函数 (Event), 以及其他各知识点小结的相关阅读: list:

上文学到了事件循环, 本文来学习浏览器中 JavaScript: 事件注册 addEventListener()

EventTarget.addEventListener()

看到 btn.addEventListener() 是不是特别熟悉, 展开来学习

数据处理程序有两种注册方式:

Web 早期将事件设置作为事件目标的对象或文档元素的一个属性
第二种我们更熟悉一些: 就是通过更通用的 addEventListener() 方法, 将处理程序传给这个对象或元素

addEventListener() 原理/语法

addEventListener()的工作原理是将实现 EventListener 的函数或对象添加到调用它的 EventTarget 上的指定事件类型的事件侦听器列表中。

通过给addEventListener() 传递某些参数, 给某个对象或元素注册一个事件:

// target 目标对象或元素
target.addEventListener(type, listener, options)
target.addEventListener(type, listener, useCapture)

/// type - 表示监听事件类型的字符串。
/// listener - 当所监听的事件类型触发时，会接收到一个事件通知（实现了 Event 接口的对象）对象。listener 必须是一个实现了 EventListener 接口的对象，或者是一个函数。
/// options - 可选
/// useCapture - 可选

let passiveFlag = false

try {
  let options = Object.defineProperty({}, 'passive', {
    get: function () {
      passiveFlag = true
    },
  })

  window.addEventListener('test', null, options)
} catch (err) {
  console.log(err)
}

Calm Down && Carry On

学习, 记录, 积累是一个漫长的过程!

Buy Less by Know More! 加油!

学习理解浏览器中的JavaScript-事件注册

前言

EventTarget.addEventListener()

addEventListener() 原理/语法

相关更文阅读

Calm Down && Carry On