本文深入解析JavaScript中自定义事件的创建与触发机制，涵盖Event与CustomEvent构造函数的用法及参数配置。重点介绍通过dispatchEvent手动触发自定义事件的方法，并针对IE8及以下版本提供基于propertychange的兼容方案，最后给出支持标准与自定义事件的完整封装实现。
自定义事件概述与核心函数
通过定义自定义事件，开发者可以实现更为灵活的开发模式。合理运用事件机制能够发挥强大作用，基于事件的架构具备诸多优势（详见后文）。
实现自定义事件主要涉及三个核心函数：Event、CustomEvent 以及 dispatchEvent。
若需直接创建基础自定义事件，可使用 Event 构造函数进行实例化。
Event 与 CustomEvent 构造函数详解
var event = new Event('build');
// Listen for the event.
elem.addEventListener('build', function (e) { ... }, false);
// Dispatch the event.
elem.dispatchEvent(event);
CustomEvent 构造函数允许创建更具定制化的事件，并支持附带数据负载。具体使用方式如下所示：
var myEvent = new CustomEvent(eventname, options);
在构造 CustomEvent 时，options 参数可配置如下属性：
{
detail: {
...
},
bubbles: true,
cancelable: false
}
其中 detail 属性可用于存储初始化信息，以便在事件触发时获取。其余属性则用于定义该事件是否支持冒泡（bubbles）以及是否可取消（cancelable）等行为。
浏览器内置事件由特定用户操作自动触发，而自定义事件则需开发者手动触发。dispatchEvent 方法正是用于在指定元素上触发事件。
使用 dispatchEvent 触发事件
element.dispatchEvent(customEvent);
上述代码演示了如何在 element 元素上触发名为 customEvent 的事件。将创建与触发结合使用的完整流程如下：
// add an appropriate event listener
obj.addEventListener("cat", function(e) { process(e.detail) });
// create and dispatch the event
var event = new CustomEvent("cat", {"detail":{"hazcheeseburger":true}});
obj.dispatchEvent(event);
在使用自定义事件时，必须关注浏览器兼容性问题。若使用 jQuery 库，处理过程将显著简化：
jQuery 简化自定义事件处理
// 绑定自定义事件
$(element).on('myCustomEvent', function(){});
// 触发事件
$(element).trigger('myCustomEvent');
此外，你还可以在触发自定义事件时传递更多参数信息：
$( "p" ).on( "myCustomEvent", function( event, myName ) {
$( this ).text( myName + ", hi there!" );
});
$( "button" ).click(function () {
$( "p" ).trigger( "myCustomEvent", [ "John" ] );
});
JavaScript 自定义事件是指开发者自行定义的事件类型，区别于 click、submit 等浏览器原生标准事件。在探讨其优势之前，先通过一个具体示例来理解其工作方式：
原生 JavaScript 自定义事件示例
<div id="testBox"></div>
// 创建事件
var evt = document.createEvent('Event');
// 定义事件类型
evt.initEvent('customEvent', true, true);
// 在元素上监听事件
var obj = document.getElementById('testBox');
obj.addEventListener('customEvent', function(){
console.log('customEvent 事件触发了');
}, false);
具体效果可参考 Demo 演示。在浏览器控制台（console）中输入 obj.dispatchEvent(evt)，若控制台输出“customEvent 事件触发了”，则表明自定义事件已成功触发。
该过程包含以下步骤：首先利用 createEvent 方法创建一个空事件对象 evt，随后通过 initEvent 方法定义事件类型为约定的自定义事件名称，接着为相应元素添加事件监听器，最后调用 dispatchEvent 方法触发事件。
自定义事件的运行机制与普通事件一致，即遵循“监听事件、编写回调、触发执行”的流程。其核心差异在于触发时机完全由开发者掌控，从而实现了 JavaScript 层面的逻辑解耦。借助此机制，开发者可以灵活协调多个关联但逻辑复杂的操作。
值得注意的是，前述代码在低版本 Internet Explorer（IE）浏览器中无法正常运行。具体而言，IE8 及更低版本不支持 createEvent() 方法，仅提供 IE 私有的 fireEvent() 方法。然而，fireEvent 仅支持标准事件的触发，无法直接用于自定义事件。因此，必须采用一种特殊且简单的替代方案来触发自定义事件。
IE 低版本兼容性与 propertychange 模拟方案
// type 为自定义事件，如 type = 'customEvent'，callback 为开发者实际定义的回调函数
obj[type] = 0;
obj[type]++;
obj.attachEvent('onpropertychange', function(event){
if( event.propertyName == type ){
callback.call(obj);
}
});
该兼容方案的原理是在 DOM 元素中增加一个自定义属性，并监听元素的 propertychange 事件。当 DOM 中某个属性的值发生变化时，触发 propertychange 的回调函数。在回调中判断发生改变的属性名称是否为我们定义的自定义属性，若是，则执行开发者预设的回调函数。以此方式模拟出自定义事件的触发机制。
为了使自定义事件机制能够与标准事件的监听和触发无缝配合，本文提供一个完整的事件处理机制。该机制支持标准事件与自定义事件的监听添加、监听移除以及模拟触发操作。为保持代码逻辑清晰，此处约定自定义事件名称需带有 'custom' 前缀（例如：customTest、customAlert）。
完整事件机制封装与测试
/**
* @description 包含事件监听、移除和模拟事件触发的事件机制，支持链式调用
*
*/
(function( window, undefined ){
var Ev = window.Ev = window.$ = function(element){
return new Ev.fn.init(element);
};
// Ev 对象构建
Ev.fn = Ev.prototype = {
init: function(element){
this.element = (element && element.nodeType == 1)? element: document;
},
/**
* 添加事件监听
*
* @param {String} type 监听的事件类型
* @param {Function} callback 回调函数
*/
add: function(type, callback){
var _that = this;
if(_that.element.addEventListener){
/**
* @supported For Modern Browers and IE9+
*/
_that.element.addEventListener(type, callback, false);
} else if(_that.element.attachEvent){
/**
* @supported For IE5+
*/
// 自定义事件处理
if( type.indexOf('custom') != -1 ){
if( isNaN( _that.element[type] ) ){
_that.element[type] = 0;
}
var fnEv = function(event){
event = event ? event : window.event
if( event.propertyName == type ){
callback.call(_that.element);
}
};
_that.element.attachEvent('onpropertychange', fnEv);
// 在元素上存储绑定的 propertychange 的回调，方便移除事件绑定
if( !_that.element['callback' + callback] ){
_that.element['callback' + callback] = fnEv;
}
// 标准事件处理
} else {
_that.element.attachEvent('on' + type, callback);
}
} else {
/**
* @supported For Others
*/
_that.element['on' + type] = callback;
}
return _that;
},
/**
* 移除事件监听
*
* @param {String} type 监听的事件类型
* @param {Function} callback 回调函数
*/
remove: function(type, callback){
var _that = this;
if(_that.element.removeEventListener){
/**
* @supported For Modern Browers and IE9+
*/
_that.element.removeEventListener(type, callback, false);
} else if(_that.element.detachEvent){
/**
* @supported For IE5+
*/
// 自定义事件处理
if( type.indexOf('custom') != -1 ){
// 移除对相应的自定义属性的监听
_that.element.detachEvent('onpropertychange', _that.element['callback' + callback]);
// 删除储存在 DOM 上的自定义事件的回调
_that.element['callback' + callback] = null;
// 标准事件的处理
} else {
_that.element.detachEvent('on' + type, callback);
}
} else {
/**
* @supported For Others
*/
_that.element['on' + type] = null;
}
return _that;
},
/**
* 模拟触发事件
* @param {String} type 模拟触发事件的事件类型
* @return {Object} 返回当前的 Kjs 对象
*/
trigger: function(type){
var _that = this;
try {
// 现代浏览器
if(_that.element.dispatchEvent){
// 创建事件
var evt = document.createEvent('Event');
// 定义事件的类型
evt.initEvent(type, true, true);
// 触发事件
_that.element.dispatchEvent(evt);
// IE
} else if(_that.element.fireEvent){
if( type.indexOf('custom') != -1 ){
_that.element[type]++;
} else {
_that.element.fireEvent('on' + type);
}
}
} catch(e){
};
return _that;
}
}
Ev.fn.init.prototype = Ev.fn;
})( window );
测试用例1（自定义事件测试）
// 测试用例1（自定义事件测试）
// 引入事件机制
// ...
// 捕捉 DOM
var testBox = document.getElementById('testbox');
// 回调函数1
function triggerEvent(){
console.log('触发了一次自定义事件 customConsole');
}
// 回调函数2
function triggerAgain(){
console.log('再一次触发了自定义事件 customConsole');
}
// 封装
testBox = $(testBox);
// 同时绑定两个回调函数，支持链式调用
testBox.add('customConsole', triggerEvent).add('customConsole', triggerAgain);
完整的实现代码可在 Demo 中查看。
打开 Demo 后，在控制台（console）中调用 testBox.trigger('customConsole') 即可手动触发自定义事件。此时控制台将输出两条提示信息。随后输入 testBox.remove('customConsole', triggerAgain) 以移除对后一个监听器的绑定。再次使用 testBox.trigger('customConsole') 触发自定义事件时，控制台仅输出一条提示信息，表明成功移除了第二个监听器。至此，该事件机制的所有功能均正常工作。