原文发表于：20160423

兼容性较好的方法

先看一个例子：

var event = document.createEvent("CustomEvent");
event.initCustomEvent("myevent", true, true, {a:1, b:2});
document.addEventListener("myevent", function(e)
{
	console.log(e.detail); // 输出 {a:1, b:2}
});
document.dispatchEvent(event);

其中：

/**
 * @param eventName 自定义事件名称
 * @param canBubble 是否冒泡
 * @param cancelable 是否可以取消事件的默认行为
 * @param detail 要传递的自定义数据
 */
event.initCustomEvent(string eventName, boolean canBubble, boolean cancelable, any detail);

更高级浏览器支持的方法

也是先看一个例子：

document.addEventListener('testevent', function(e){console.log(e.detail);});
document.dispatchEvent(new CustomEvent('testevent', {detail:'aaa'})); // 输出 aaa

API：

element.dispatchEvent(new CustomEvent(eventType, params));

其中：

params =
{
	detail: eventData,
	bubbles: true,
	cancelable: true
};

这个方法兼容性如下：

其中2表示虽然没有window.CustomEvent对象，但是document.createEvent('CustomEvent')没问题，所以一般建议还是老老实实的用document.createEvent('CustomEvent')这种方法吧，至少移动设备上兼容性没问题。

下面是从mui里面摘录并修改的修复浏览器不支持window.CustomEvent对象的代码：

/**
 * fixed CustomEvent
 */
(function() {
	if (typeof window.CustomEvent !== 'undefined') return;
	function CustomEvent(eventName, params)
	{
		params = params ||
		{
			bubbles: false, // 默认不冒泡
			cancelable: false, // 默认不能取消默认事件
			detail: undefined
		};
		var event = document.createEvent('Events');
		var bubbles = true;
		for (var name in params) 
		{
			(name === 'bubbles') ? (bubbles = !!params[name]) : (event[name] = params[name]);
		}
		event.initEvent(eventName, bubbles, true);
		return event;
	};
	CustomEvent.prototype = window.Event.prototype;
	window.CustomEvent = CustomEvent;
})();