IT工程師數位筆記本

javascript與HTML之間的交互是通過事件來實現的。事件，就是文檔或瀏覽器窗口發生的一些特定的交互瞬間。通常大家都會認為事件是在用戶與瀏覽器進行交互的時候觸發的，其實通過javascript我們可以在任何時刻觸發特定的事件，并且這些事件與瀏覽器創建的事件是相同的。

通過createEvent方法，我們可以創建新的Event對象，這個方法接受一個參數eventType，即想獲取的Event對象的事件模板名，其值可以為HTMLEvents、MouseEvents、UIEvents以及CustomEvent(自定義事件)。這里我們將以CustomEvent為例子進行講解。

首先創建自定義事件對象

var event = document.createEvent("CustomEvent");

然后初始化事件對象

event.initCustomEvent(in DOMString type, in boolean canBubble, in boolean cancelable, in any detail);

其中，第一個參數為要處理的事件名
第二個參數為表明事件是否冒泡
第三個參數為表明是否可以取消事件的默認行為
第四個參數為細節參數
例如：event.initCustomEvent("test", true, true, {a:1, b:2}) 表明要處理的事件名為test，事件冒泡，可以取消事件的默認行為，細節參數為一個對象{a:"test", b:"success"}
最后觸發事件對象

document.dispatchEvent(event);

當然我們需要定義監控test事件的處理程序

document.addEventListener("test", function(e){
    var obj = e.detail;
    alert(obj.a + "  " + obj.b);
});

最后會彈出框顯示"test success"
但不是所有的瀏覽器都支持，尤其是移動端，下面分享一個封裝好的函數，來解決：

(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;
    }
})();

觸發如下：

document.dispatchEvent(event);

還有另外兩種寫法，下面來分享一下：

1）

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;
    }

2）

(function () {
  if ( typeof window.CustomEvent === "function" ) return false; //If not IE

  function CustomEvent ( event, params ) {
    params = params || { bubbles: false, cancelable: false, detail: undefined };
    var evt = document.createEvent( 'CustomEvent' );
    evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
    return evt;
   }

  CustomEvent.prototype = window.Event.prototype;

  window.CustomEvent = CustomEvent;
})();

觸發的時候，把觸發封裝到一個函數中：

var dispatch = function(event) {
        var e = new CustomEvent(event, {
            bubbles: true,
            cancelable: true
        });
        //noinspection JSUnresolvedFunction
        window.dispatchEvent(e);
 };