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

一、基本概念

实现前端自定义事件的触发与监听主要有四个东西,他们分别是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’。传参等操作与触发原生事件相同。
在这里插入图片描述

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值