前端自定义事件的触发与监听

一、基本概念

实现前端自定义事件的触发与监听主要有四个东西，他们分别是Event、CustomEvent、addEventLister、dispatchEvent

1.Event

event = new Event(eventNameStr, options);

eventNameStr：事件名称字符串
options：

• bubbles, 可选, Boolean类型, 默认值为 false, 表示该事件是否冒泡
• cancelable, 可选, Boolean类型, 默认值为 false, 表示该事件能否被取消
• composed, 可选, Boolean类型, 默认值为 false, 指示事件是否会在影子DOM根节点之外触发侦听器

2.CustomEvent

CustomEvent是继承了Event，但是新增在options中新增了一个detail字段，可以在其中设置一些自定义数据

customEvent = new CustomEvent(eventNameStr, options);

eventNameStr：事件名称字符串
options：

• bubbles, 可选, Boolean类型, 默认值为 false, 表示该事件是否冒泡
• cancelable, 可选, Boolean类型, 默认值为 false, 表示该事件能否被取消
• composed, 可选, Boolean类型, 默认值为 false, 指示事件是否会在影子
• detail, 可选的默认值是 null 的任意类型数据，是一个与 event 相关可自定义的值

3.addEventLister

这个我们应该比较熟悉，经常在监听dom的一些事件中使用

dom.addEventListener(eventNameStr, callback)
window.addEventListener(eventNameStr, callback)

eventNameStr：监听的事件名称字符串
callback：监听到事件触发的回调函数

4.addEventLister

这个我们应该比较熟悉，经常在监听dom的一些事件中使用

dom.dispatchEvent(event)
window.dispatchEvent(event)

event：触发的事件对象（由1或者2得到）

二、代码实现

1.触发原生事件

（1）不传递参数

<div id="box" onclick="divClick(event)"></div>
<button type="button" onclick="clickTestEvent()">点我触发Event</button>

  let divBox = document.getElementById('box')

  function divClick(e) {
    console.log('divClick');
    console.log(e);
  }

  function clickTestEvent() {
    const event = new Event('click') // 初始化事件
    divBox.dispatchEvent(event) // 触发事件
  }

点击按钮之后即可触发div的click事件

（2）传递参数

传递参数推荐使用CustomEvent，因为它提供了options.detail参数供我们自定义

<div id="box" onclick="divClick(event)"></div>
<button type="button" onclick="clickTestCustomEvent()">点我触发CustomEvent</button>

  let divBox = document.getElementById('box')

  function divClick(e) {
    console.log('divClick');
    console.log(e);
  }

  function clickTestCustomEvent() {
    const customerEvent = new CustomEvent('click', {detail: {name: 222}}) // 初始化CustomEvent事件，并在detail中设置自定义参数
    divBox.dispatchEvent(customerEvent)
  }

点击之后可以在detail字段中去除自定义的数据

其实使用Event也可以实现参数传递

<div id="box" onclick="divClick(event)"></div>
<button type="button" onclick="clickTestEvent()">点我触发Event</button>

  let divBox = document.getElementById('box')

  function divClick(e) {
    console.log('divClick');
    console.log(e);
  }

  function clickTestEvent() {
    const event = new Event('click') // 初始化事件
    event.data = { // 给event添加自定义属性来传递参数，但自定义属性时不要把原生属性覆盖
      age: 111
    }
    divBox.dispatchEvent(event) // 触发事件
  }

2.触发自定义事件

我们可以用这种方式触发一些自定义事件

<div id="box"></div>
<button type="button" onclick="clickTestEvent()">点我触发Event</button>

  let divBox = document.getElementById('box')

  function clickTestEvent() {
    const event = new Event('eventTest') // 初始化自定义事件 'eventTest'
    divBox.dispatchEvent(event)
  }

  function eventTest(e) {
  // 监听自定义事件 'eventTest' 的回调
    console.log(e);
  }

  divBox.addEventListener('eventTest', eventTest) // 监听自定义事件 'eventTest'

点击即可触发自定义事件 ‘eventTest’。传参等操作与触发原生事件相同。