EventTarget · 前端

[https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget](https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget) `EventTarget`是一個 DOM 接口，由可以接收在DOM中出現的事件、并且可以創建偵聽器的對象實現 >[danger]在 DOM 中出現的事件是`Event`接口實現 ## 構造函數 [**EventTarget**()](https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/EventTarget) 創建一個新的?`EventTarget`?對象實例。【IE不支持】 ## 全部方法 [**1、EventTarget.addEventListener**()](https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener) 在EventTarget上注冊特定事件類型的事件處理程序。即將指定的監聽器注冊到 EventTarget 上。可以將事件處理函數綁定到不同的HTML elements上 (比如\<button\>, \<div\>, \<span\>等等)【IE9】語法： ~~~ target.addEventListener(eventName,?listener,?options); target.addEventListener(eventName, listener, useCapture); ~~~ [**2、EventTarget.removeEventListener**()](https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/removeEventListener) EventTarget中刪除事件偵聽器。【IE9】語法： ~~~ target.removeEventListener(eventName, listener[, options]); target.removeEventListener(eventName, listener[, useCapture]); ~~~ [**3、EventTarget.dispatchEvent**()](https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/dispatchEvent) 將事件分派到此EventTarget。即觸發事件【IE9】語法： ~~~ cancelled = !target.dispatchEvent(event) ~~~ >[danger] 由于所有的元素對象都繼承與它，所以大部分的情況是使用element.addEventListener(eventName, function, useCapture); > element.removeEventListener() > element.dispatchEvent() 如：當用戶重置窗口大小時添加事件監聽 ~~~ window.addEventListener("resize", function(){ document.getElementById("demo").innerHTML = Math.random(); }); ~~~ 當傳遞參數值時，使用"匿名函數"調用帶參數的函數： ~~~ document.getElementById("xxoo").addEventListener("click", function(){ myFunction(p1, ~~~ **例子：** ~~~js // 添加一個適當的事件監聽器 element.addEventListener("cat", function(e) { process(e.detail) }) // 創建并分發事件 var event = new CustomEvent("cat", {"detail":{"hazcheeseburger":true}}) element.dispatchEvent(event) ~~~ **例子：** ~~~js //構造函數 var EventTarget = function() { this.listeners = {}; }; EventTarget.prototype.listeners = null; EventTarget.prototype.addEventListener = function(type, callback) { if(!(type in this.listeners)) { this.listeners[type] = []; } this.listeners[type].push(callback); }; EventTarget.prototype.removeEventListener = function(type, callback) { if(!(type in this.listeners)) { return; } var stack = this.listeners[type]; for(var i = 0, l = stack.length; i < l; i++) { if(stack[i] === callback){ stack.splice(i, 1); return this.removeEventListener(type, callback); } } }; EventTarget.prototype.dispatchEvent = function(event) { if(!(event.type in this.listeners)) { return; } var stack = this.listeners[event.type]; event.target = this; for(var i = 0, l = stack.length; i < l; i++) { stack[i].call(this, event); } }; ~~~