事件對象
在觸發(fā)DOM上的某個事件時未舟,會產(chǎn)生一個事件對象 event螺垢,這個對象中包含著所有與事件有關(guān)的信息:導致事件的元素扔役、事件的類型以及其他與 ** * 特定事件* **相關(guān)的信息如鼠標操作導致的對象中包含鼠標位置信息笋颤,鍵盤操作導致的事件對象中包含與按下的鍵有關(guān)的信息筑煮。
今天記錄 event.type 和event.currentTarget
1.event.type
返回的是事件類型
var btn = document.getElementById("myBtn");
btn.onClick = function(event) {
alert(event.type); //"click"
};
2.event.currentTarget 和event.target
currentTarget相當于事件注冊于哪個元素上绿满,而target元素則是實際上被點擊或其他操作的元素(需參考事件DOM事件流)
便于理解參考書上代碼:
document.body.onclick = function(event) {
alert(event.currentTarget === document.body); //true
alert(evetn.target === document.getElementById("myBtn"); //true
}
個人的理解是該function是顯式地綁定在body上的臂外,所以currentTarget與body相等,而實際上我們也點擊了頁面上的myBtn按鈕喇颁,所以event.target實際上是與我們實際點擊的元素就是myBtn相等的漏健。
event的使用
當我們需要通過一個函數(shù)處理多個事件時,可以使用event.type這個屬性
var btn = document.getElementById("myBtn");
var handler = function(event) {
switch(event.type) {
case "click":
//TODO LIST
break;
case "mouseover":
//TODO LIST
break;
case "click":
//TODO LIST
break;
case "mouseout":
//TODO LIST
break;
}
};
btn.onclick = handler;
btn.onmouseover = handler;
btn.onmouseout = handler;
結(jié)尾
今天記錄較少因為接下來的內(nèi)容涉及到了 事件類型 這一塊橘霎,太過復雜蔫浆,會在清明節(jié)三天陸陸續(xù)續(xù)看完后總結(jié)在下一篇日記中。
ps:這兩天看了許多前端的面試題發(fā)現(xiàn)完全不會啊哈哈哈哈哈哈哈哈哈姐叁。好好學習天天向上瓦盛。