当前位置：首页 > JavaScript

js实现trigger

2026-03-14 16:59:25JavaScript

触发自定义事件（CustomEvent）

使用 CustomEvent 创建并触发自定义事件，适用于现代浏览器环境。

// 创建事件
const event = new CustomEvent('customEvent', {
  detail: { key: 'value' }, // 可传递数据
  bubbles: true, // 是否冒泡
  cancelable: true // 是否可取消
});

// 触发事件（绑定到DOM元素）
document.getElementById('target').dispatchEvent(event);

模拟原生事件（MouseEvent/KeyboardEvent）

通过原生事件构造函数模拟用户交互行为，如点击或键盘输入。

// 模拟点击事件
const clickEvent = new MouseEvent('click', {
  bubbles: true,
  cancelable: true,
  view: window
});
document.querySelector('button').dispatchEvent(clickEvent);

// 模拟键盘事件
const keyEvent = new KeyboardEvent('keydown', { key: 'Enter' });
document.getElementById('input').dispatchEvent(keyEvent);

jQuery的trigger方法

若项目中使用jQuery，可直接调用其内置的trigger方法。

$('#element').trigger('click'); // 触发点击事件
$('#form').trigger('submit'); // 触发表单提交
$('#btn').trigger('customEvent', [data1, data2]); // 触发自定义事件并传参

手动调用回调函数

直接执行绑定的事件处理函数，适用于简单场景。

const handler = () => console.log('Triggered');
document.getElementById('btn').onclick = handler;
handler(); // 手动触发

观察者模式实现事件触发

通过订阅-发布模式实现灵活的事件管理。

js实现trigger

const eventBus = {
  events: {},
  on(event, callback) {
    this.events[event] = this.events[event] || [];
    this.events[event].push(callback);
  },
  trigger(event, ...args) {
    (this.events[event] || []).forEach(cb => cb(...args));
  }
};

// 使用示例
eventBus.on('log', msg => console.log(msg));
eventBus.trigger('log', 'Event triggered!');