實現乙個EventTarget類

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

element，document和window是最常見的事件目標，但是其他物件也可以是事件目標，比如xmlhttprequest，audionode，audiocontext等等。

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

mozilla擴充套件，供js實現的事件目標使用以實現 on* 屬性。另見 webidl bindings 繫結。

function eventtarget() ;
}object.assign(eventtarget.prototype, 
this.listeners[type].push(callback);
},removeeventlistener: function (type, callback) }},
dispatchevent: function (event) )}}
});let target = new eventtarget();
let remove = (e) => ;
target.addeventlistener("test",remove);
target.addeventlistener("test",remove);
target.addeventlistener("test",(e) => );
target.removeeventlistener("test",remove);
target.dispatchevent();

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

document.body.onclick = function(event);

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

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

//子元素將事件委託給了父元素
document.queryselector('ul').addeventlistener('click',(e) => 
case 'm':
case 'x':
default:
}},false)

事件模擬

事件建立

引數事件型別字串uievents

document.createevent(eventtypestring)

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

實現乙個EventTarget類

實現乙個EventTarget類

實現乙個EventTarget類

實現乙個Semaphore

相關推薦