js实现trigger
实现自定义事件触发（trigger）的方法
在JavaScript中，可以通过Event对象或CustomEvent接口实现自定义事件的触发。以下是两种常见实现方式：
基础事件触发（适用于原生DOM事件）
const element = document.getElementById('target');
const event = new Event('customEvent');
element.dispatchEvent(event);带数据的自定义事件
const event = new CustomEvent('customEvent', {
detail: { key: 'value' },
bubbles: true,
cancelable: true
});
document.dispatchEvent(event);jQuery风格的trigger实现
如果需要实现类似jQuery的trigger()方法，可以扩展原型方法：
HTMLElement.prototype.trigger = function(eventName, data) {
const event = new CustomEvent(eventName, { detail: data });
this.dispatchEvent(event);
};
// 使用示例
document.getElementById('btn').trigger('click', {param: 123});支持事件冒泡的版本
function triggerEvent(element, eventName, data) {
const event = new CustomEvent(eventName, {
detail: data,
bubbles: true
});
element.dispatchEvent(event);
}兼容旧浏览器的polyfill
function triggerEvent(element, eventName) {
if (document.createEvent) {
const event = document.createEvent('HTMLEvents');
event.initEvent(eventName, true, true);
element.dispatchEvent(event);
} else {
element.fireEvent('on' + eventName);
}
}事件监听示例
document.addEventListener('customEvent', (e) => {
console.log('事件触发', e.detail);
});
// 触发事件
triggerEvent(document, 'customEvent', {message: 'Hello'});注意事项：
- 现代浏览器推荐使用
CustomEvent构造函数 - 自定义事件默认不冒泡，需要显式设置
bubbles: true - 可以通过
detail属性传递自定义数据 - IE9+支持
CustomEvent，旧版本需要使用createEvent
