自定义事件

1. 事件

事件是您在编程时系统内发生的动作或者发生的事情， 可以对监听事件，对事件做出反应

1.1. 监听事件 addEventListener

target.addEventListener(type, listener, options);

• target 目标对象
• type 事件名称
• listener 事件处理函数
• options 配置项， 可选
  • once: 只执行一次
  • capture: 捕获阶段
  • passive: 不会阻止默认行为

// 示例
const button = document.querySelector('button');  // 获取按钮元素
button.addEventListener('click', (e) => {
  console.log('按钮被点击了');
  e.stopPropagation();  // 阻止事件冒泡
  e.preventDefault();  // 阻止默认行为
  e.stopImmediatePropagation();  // 阻止事件冒泡和其他监听器
  e.currentTarget;  // 当前事件目标
  e.target;  // 触发事件的元素  
  e.detail;  // 事件的额外信息
  e.timeStamp;  // 事件发生的时间戳
});

1.2. 触发自定义事件 dispatchEvent

target.dispatchEvent(event);

• target 目标对象
• event 自定义事件对象

// 示例
const button = document.querySelector('button');  // 获取按钮元素
const event = new Event('click');  // 创建事件对象
button.dispatchEvent(event);  // 触发事件

2. Event() 自定义事件

const myEvent = new Event(eventName, eventOptions);

• eventName 事件名称
• eventOptions 配置项， 可选
  • bubbles: 是否冒泡
  • cancelable: 是否可取消
  • composed: 是否跨 Shadow DOM 边界

// 示例1
const myEvent = new Event('myEvent', {
  bubbles: true,
  cancelable: true,
  composed: true  
})

// 示例2
const myEvent = new Event('myEvent');
document.addEventListener('myEvent', (e) => {
  console.log('myEvent事件被触发了');
});
document.dispatchEvent(myEvent);

3. CustomEvent() 自定义事件 + 传递参数

const myEvent = new CustomEvent(eventName, eventOptions);

• eventName 事件名称
• eventOptions 配置项， 可选
  • detail: 传递的参数
  • bubbles: 是否冒泡
  • cancelable: 是否可取消
  • composed: 是否跨 Shadow DOM 边界

// 示例
const myEvent = new CustomEvent('myEvent', {
  detail: {
    message: 'Hello World'
  }
});
document.addEventListener('myEvent', (e) => {
  console.log('myEvent事件被触发了', e.detail.message);
})
document.dispatchEvent(myEvent);

4. 项目封装

// 封装事件工具类
const EventUtils = {
  trigger: ( eventName, data) => {
    document.dispatchEvent(new CustomEvent(eventName, { detail: data }));
  },
  on: ( eventName, handler) => {
    document.addEventListener(eventName, (e) => handler(e.detail));
  }
};

// 组件 A（发送参数）
EventUtils.trigger( 'dataUpdate', { id: 1, status: 'active' });

// 组件 B（接收参数）
EventUtils.on( 'dataUpdate', (data) => {
  console.log('接收数据:', data);  // 输出：{id:1, status:'active'}‌:ml-citation{ref="1,2" data="citationList"}
});