为 Dom 自定义事件监听

title: 为 Dom 自定义事件监听 id: 2871322c242d0f4354b1b2af561266a0 tags: [] date: 2000/01/01 00:00:00 updated: 2022/12/09 13:40:03 isPublic: true --#|[分隔]|#--

为 Dom 自定义事件监听

我们知道，HTML 可以对 dom 添加事件监听，对一些操作进行监听：

Dom.addEventListener('click', event => {}) // 监听点击事件
Dom.addEventListener('mousedown', event => {}) // 监听鼠标按下事件

然而有时，这些事件可能不能满足我们的开发需求，这时我们可以自定义一些事件。

功能需要事件派发 dispatchEvent 和 创建事件 new Event() 配合完成。

Event 语法：

let event = new Event(typeArg, eventInit);

• typeArg：事件名称字符串，比如 'go'，稍后我们可以监听 Dom 的 go 事件。

• eventInit：可选对象，有以下几个属性：

  • bubbles：可选，Boolean类型，默认值为 false，表示该事件是否冒泡。

  • cancelable: 可选，Boolean类型，默认值为 false， 表示该事件能否被取消。

  • composed: 可选，Boolean类型，默认值为 false，指示事件是否会在影子DOM根节点之外触发侦听。

dispatchEvent 语法：

Dom.dispatchEvent(event) // 为 Dom 派发一个 Event 类型的事件。

案例：

下面是一个简单的案例，先给 .box 这个 Dom，添加好事件监听，然后开始每隔一秒，派发一个 go 事件。

// 获取 dom
let boxDom = document.querySelector('.box')

// 监听事件
boxDom.addEventListener('go', event => {
  console.log(event)
})

// 每个一秒触发此事件
setInterval(() => {

  // 创建一个 Event 对象
  let eventGo = new Event('go')

  // 添加新字段
  eventGo.myKey = Date.now()

  // 给 boxDom 派发此事件
  boxDom.dispatchEvent(eventGo)
}, 1000);

由上可见，通过 js 代码我们可以自定义 Dom 的事件并触发。