EventTarget

EventTarget是一個(gè)由可以接收事件的對(duì)象實(shí)現(xiàn)的接口，并且可以為它們創(chuàng)建偵聽器。

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

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

構(gòu)造函數(shù)節(jié)

• EventTarget()

  創(chuàng)建一個(gè)新的 EventTarget 對(duì)象實(shí)例。

方法節(jié)

• EventTarget.addEventListener()

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

• EventTarget.removeEventListener()

  EventTarget中刪除事件偵聽器。

• EventTarget.dispatchEvent()

  將事件分派到此EventTarget。

Mozilla chrome 代碼的其他方法節(jié)

Mozilla擴(kuò)展，供JS實(shí)現(xiàn)的事件目標(biāo)使用以 實(shí)現(xiàn) on* 屬性。另見 WebIDL bindings 綁定。

• void setEventHandler(DOMString type, EventHandler handler)
• EventHandler getEventHandler(DOMString type)

示例節(jié)

EventTarget 的簡(jiǎn)單實(shí)現(xiàn)節(jié)

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);//可能會(huì)添加多個(gè)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"});

當(dāng)單擊這個(gè)例子中的按鈕時(shí)， this 和 currentTarget 都等于 document.body，因?yàn)槭录幚沓?序是注冊(cè)到這個(gè)元素上的。然而， target 元素卻等于按鈕元素，因?yàn)樗?click 事件真正的目標(biāo)。由 于按鈕上并沒有注冊(cè)事件處理程序，結(jié)果 click 事件就冒泡到了 document.body，在那里事件才得到 了處理。

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

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

因?yàn)樽釉貙⑹录械礁讣?jí)的時(shí)候，event的target指向的還是子元素，而currentTarget指的是父元素

<ul><li>w</li><li>m</li><li>x</li> </ul> //子元素將事件委托給了父元素 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)

事件模擬

事件創(chuàng)建

參數(shù)事件類型字符串UIEvents

document.createEvent(EventTypeString)

• UIEvents：一般化的 UI 事件。 鼠標(biāo)事件和鍵盤事件都繼承自 UI 事件。 DOM3 級(jí)中是 UIEvent；
• MouseEvents：一般化的鼠標(biāo)事件。 DOM3 級(jí)中是 MouseEvent；
• MutationEvents：一般化的 DOM 變動(dòng)事件。 DOM3 級(jí)中是 MutationEvent；
• HTMLEvents：一般化的 HTML 事件。沒有對(duì)應(yīng)的 DOM3 級(jí)事件（HTML 事件被分散到其他類 別中);
• KeyboardEvents :DOM3級(jí)中添加

var btn = document.getElementById("myBtn"); //創(chuàng)建事件對(duì)象 var event = document.createEvent("MouseEvents"); //初始化事件對(duì)象 event.initMouseEvent("click", true, true, document.defaultView, 0, 0, 0, 0, 0,false, false, false, false, 0, null); //添加事件監(jiān)聽 btn.addEventListener("click",e => console.log(e)) //觸發(fā)事件dispatch中動(dòng)態(tài)將this綁定到event.target上，也就是btn btn.dispatchEvent(event); //執(zhí)行監(jiān)聽函數(shù) //e

總結(jié)

以上是生活随笔為你收集整理的实现一个EventTarget类的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。