javascript與HTML之間的交互是通過事件來實(shí)現(xiàn)的。事件嗅榕，就是文檔或?yàn)g覽器窗口發(fā)生的一些特定的交互瞬間。通常大家都會(huì)認(rèn)為事件是在用戶與瀏覽器進(jìn)行交互的時(shí)候觸發(fā)的吵聪，其實(shí)通過javascript我們可以在任何時(shí)刻觸發(fā)特定的事件凌那，并且這些事件與瀏覽器創(chuàng)建的事件是相同的。<p>
通過createEvent方法吟逝，我們可以創(chuàng)建新的Event對象帽蝶，這個(gè)方法接受一個(gè)參數(shù)eventType，即想獲取的Event對象的事件模板名块攒，其值可以為HTMLEvents励稳、MouseEvents、UIEvents以及CustomEvent(自定義事件)囱井。這里我們將以CustomEvent為例子進(jìn)行講解驹尼。<p>
首先創(chuàng)建自定義事件對象<p>
var event = document.createEvent("CustomEvent");
然后初始化事件對象<p>
event.initCustomEvent(in DOMString type, in boolean canBubble, in boolean cancelable, in any detail);
其中，第一個(gè)參數(shù)為要處理的事件名
第二個(gè)參數(shù)為表明事件是否冒泡
第三個(gè)參數(shù)為表明是否可以取消事件的默認(rèn)行為
第四個(gè)參數(shù)為細(xì)節(jié)參數(shù)
例如：<code>event.initCustomEvent("test", true, true, {a:1, b:2})</code> 表明要處理的事件名為test庞呕，事件冒泡新翎，可以取消事件的默認(rèn)行為，細(xì)節(jié)參數(shù)為一個(gè)對象<code>{a:"test", b:"success"}</code>
最后觸發(fā)事件對象<p>
document.dispatchEvent(event);
當(dāng)然我們需要定義監(jiān)控test事件的處理程序<p>
document.addEventListener("test", function(e){
var obj = e.detail;
alert(obj.a + " " + obj.b);
});
最后會(huì)彈出框顯示"test success"
但不是所有的瀏覽器都支持住练，尤其是移動(dòng)端地啰，下面分享一個(gè)封裝好的函數(shù)，來解決：
(function() {
if (typeof window.CustomEvent === 'undefined') {
function CustomEvent(event, params) {
params = params || {
bubbles: false,
cancelable: false,
detail: undefined
};
var evt = document.createEvent('Events');
var bubbles = true;
for (var name in params) {
(name === 'bubbles') ? (bubbles = !!params[name]) : (evt[name] = params[name]);
}
evt.initEvent(event, bubbles, true);
return evt;
};
CustomEvent.prototype = window.Event.prototype;
window.CustomEvent = CustomEvent;
}
})();
觸發(fā)如下：
document.dispatchEvent(event);
還有另外一種寫法讲逛，下面來分享一下：
if (!window.CustomEvent) {
window.CustomEvent = function(type, config) {
config = config || { bubbles: false, cancelable: false, detail: undefined};
var e = document.createEvent('CustomEvent');
e.initCustomEvent(type, config.bubbles, config.cancelable, config.detail);
return e;
};
window.CustomEvent.prototype = window.Event.prototype;
}
觸發(fā)的時(shí)候亏吝，把觸發(fā)封裝到一個(gè)函數(shù)中：
var dispatch = function(event) {
var e = new CustomEvent(event, {
bubbles: true,
cancelable: true
});
//noinspection JSUnresolvedFunction
window.dispatchEvent(e);
};
