原文发表于: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;
})();