摘要：是一個由可以接收事件的對象實現的接口，并且可以為它們創建偵聽器。方法節在上注冊特定事件類型的事件處理程序。將事件分派到此。代碼的其他方法節擴展，供實現的事件目標使用以實現屬性。級中是一般化的變動事件。

EventTarget是一個由可以接收事件的對象實現的接口，并且可以為它們創建偵聽器。

Element，document 和 window 是最常見的事件目標，但是其他對象也可以是事件目標，比如XMLHttpRequest，AudioNode，AudioContext 等等。

許多事件目標（包括元素，文檔和 window）還支持通過 on... 屬性和屬性設置事件處理程序。

EventTarget()

創建一個新的 EventTarget 對象實例。

EventTarget.addEventListener()

在EventTarget上注冊特定事件類型的事件處理程序。

EventTarget.removeEventListener()

EventTarget中刪除事件偵聽器。

EventTarget.dispatchEvent()

將事件分派到此EventTarget。

Mozilla擴展，供JS實現的事件目標使用以 實現 on* 屬性。另見 WebIDL bindings 綁定。

void setEventHandler(DOMString type, EventHandler handler)

EventHandler getEventHandler(DOMString type)

function EventTarget() {
    this.listeners = {};
}

Object.assign(EventTarget.prototype, {
    // listeners: null,
    // prefix:"on",
    addEventListener: function (type, callback) {
        if (!(type in this.listeners)) {
            this.listeners[type] = [];
        }
        this.listeners[type].push(callback);
    },
    removeEventListener: function (type, callback) {
        if (type in this.listeners) {
            let stack = this.listeners[type];
            let index = stack.indexOf(callback);
            console.log(index);
            //可能會添加多個
            while (index !== -1) {
                stack.splice(index, 1);
                index = stack.indexOf(callback);
            }
        }
    },
    dispatchEvent: function (event) {
        if (event.type in this.listeners) {
            let stack = this.listeners[event.type];
            event.target = this;
            stack.forEach(callback => {
                callback.call(this,event);
            })
        }
    }
});


let target = new EventTarget();
let remove = (e) => {console.log(e)};
target.addEventListener("test",remove);
target.addEventListener("test",remove);
target.addEventListener("test",(e) => {console.log(e)});
target.removeEventListener("test",remove);
target.dispatchEvent({type:"test"});

當單擊這個例子中的按鈕時， this 和 currentTarget 都等于 document.body，因為事件處理程 序是注冊到這個元素上的。然而， target 元素卻等于按鈕元素，因為它是 click 事件真正的目標。由 于按鈕上并沒有注冊事件處理程序，結果 click 事件就冒泡到了 document.body，在那里事件才得到 了處理。

document.body.onclick = function(event){
    alert(event.currentTarget === document.body); //true
    alert(this === document.body); //true
    alert(event.target === document.getElementById("myBtn")); //true
};

所有問事件的target和currentTarget區別的問題，都是在變相的問事件委托。

因為子元素將事件委托到父級的時候，event的target指向的還是子元素，而currentTarget指的是父元素

    
w
    
m
    
x

//子元素將事件委托給了父元素
document.querySelector("ul").addEventListener("click",(e) => {
    let text = e.target.innerText || e.target.textContent;
    swicth(text){
        case "w":{
            console.info("this first li");
            break;
        }
        case "m":{
            console.info("this second li");
            break;
        }
        case "x":{
            console.info("this third li");
            break;
        }
        default:{
            new Error("No such Element")
        }
    }
},false)

事件模擬

事件創建

參數事件類型字符串UIEvents

document.createEvent(EventTypeString)

UIEvents：一般化的 UI 事件。 鼠標事件和鍵盤事件都繼承自 UI 事件。 DOM3 級中是 UIEvent；

MouseEvents：一般化的鼠標事件。 DOM3 級中是 MouseEvent；

MutationEvents：一般化的 DOM 變動事件。 DOM3 級中是 MutationEvent；

HTMLEvents：一般化的 HTML 事件。沒有對應的 DOM3 級事件（HTML 事件被分散到其他類 別中);

KeyboardEvents :DOM3級中添加

var btn = document.getElementById("myBtn");
//創建事件對象
var event = document.createEvent("MouseEvents");
//初始化事件對象
event.initMouseEvent("click", true, true, document.defaultView, 0, 0, 0, 0, 0,false, false, false, false, 0, null);
//添加事件監聽
btn.addEventListener("click",e => console.log(e))
//觸發事件dispatch中動態將this綁定到event.target上，也就是btn
btn.dispatchEvent(event);
//執行監聽函數
//e