事件对象
在触发DOM上的某个事件时,会产生一个事件对象 event,这个对象中包含着所有与事件有关的信息:导致事件的元素、事件的类型以及其他与 ** * 特定事件* **相关的信息如鼠标操作导致的对象中包含鼠标位置信息,键盘操作导致的事件对象中包含与按下的键有关的信息。
今天记录 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的使用
当我们需要通过一个函数处理多个事件时,可以使用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;
结尾
今天记录较少因为接下来的内容涉及到了 事件类型 这一块,太过复杂,会在清明节三天陆陆续续看完后总结在下一篇日记中。
ps:这两天看了许多前端的面试题发现完全不会啊哈哈哈哈哈哈哈哈哈。好好学习天天向上。