1、Event

Event 物件代表事件的狀態，比如事件在其中發生的元素、鍵盤按鍵的狀態、滑鼠的位置、滑鼠按鈕的狀態。

事件通常與函式結合使用，函式不會在事件發生前被執行！

Event的事件都是系統自帶事件，比如滑鼠、鍵盤、焦點等等！

可以用Document.createEvent(type) 方法建立自定義事件，type 是一個字串，表示要建立的事件型別。事件型別可能包括"UIEvents", "MouseEvents", "MutationEvents", 或者 "HTMLEvents"。

只有在新建立的 Event 物件被 Document 物件或 Element 物件的 dispatchEvent() 方法分派之前，才能呼叫 Event.initEvent() 方法：

例項：

//自定義事件
            var mdiv = document.getElementById("mydiv");
            var myEvent = document.createEvent("HTMLEvents");
            myEvent.data = "Hello world";
            myEvent.initEvent("myOwnEvent",true,true);
            mydiv.addEventListener("myOwnEvent",function(e){
                console.log(
 
"我是自定義事件");
                console.log(e.data);
            },false);
            mydiv.dispatchEvent(myEvent);

輸出

 由此可見，通過createEvent建立自定義事件比較侷限，但也可滿足大部分需求！

2、CustomEvent

這個應該是自定義事件的標準格式，如果需要用到自定義事件，推薦！

建構函式CustomEvent(eventName, params) 第一個引數是事件名稱，用來區分事件，必填，第二個是引數，需要注意的是，params必須是{detail:{data:data}}格式！

例項

//自定義事件
            var mdiv = document.getElementById("mydiv");
            var eventName = "MY_EVENT";
            var myEvent = new CustomEvent(eventName,{detail:{data:"Hello myEvent"}});
            mdiv.addEventListener(eventName,function(evt){
                console.log(evt.detail.data);
            });
            mydiv.onclick = function(){
                mydiv.dispatchEvent(myEvent);
            }

執行點選div則輸出

這種自定義事件方式簡單，而且比較自由！

3、TargetEvent

MDN:

EventTarget是一個由可以接收事件的物件實現的介面，並且可以為它們建立偵聽器。

Element，document 和 window 是最常見的事件目標，但是其他物件也可以是事件目標，比如XMLHttpRequest，AudioNode，AudioContext 等等。這個事件功能比較強大，個人覺得可以任意妄為，哈哈

例項

//自定義事件
            function EventTarget(){
                this.handlers = {};
            }
            EventTarget.prototype = {
                constructor:EventTarget,
                addHandler:function(type,handler){
                    if(typeof this.handlers[type] == 'undefined'){
                        this.handlers[type] = [];
                    }
                    this.handlers[type].push(handler);
                },
                removeHandler:function(type,handler){
                    if(this.handlers[type] instanceof Array){
                        var arr = this.handlers[type];
                        for(var i = 0,len = arr.length;i < len;i++){
                            if(arr[i] == handler){
                                arr.splice(i,1);
                            }
                        }
                    }
                },
                dispatchEvent:function(event){
                    if(!event.target){
                        event.target = this;
                    }
                    if(this.handlers[event.type] instanceof Array){
                        var arr = this.handlers[event.type];
                        for(var i = 0,len = arr.length;i < len;i++){
                            arr[i](event);
                        }
                    }
                }
            }
            
            var mdiv = document.getElementById("mydiv");
            var eventName = "MY_EVENT";
            var myEvent = new EventTarget();
            myEvent.addHandler(eventName,function(evt){
                console.log(evt.message);
            });
            myEvent.dispatchEvent({type:eventName,message:"觸發成功"});

這裡摘抄了一位網友的封裝，大部分就是這個意思，這個相當於重寫EventTarget類，重新封裝下！

執行結果：

這裡我們看到了，其實可以隨意傳遞data，這個自定事件的封裝比較牛叉，範圍比較廣，幾乎可以應對一切自定義事件的需求，幾近完美！

綜上總結了js三種自定義事件的方式，無窮無盡而又完美無暇的宇宙，請賜我最完美的結論吧！奧！