JavaScript 事件

事件对象

在触发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:这两天看了许多前端的面试题发现完全不会啊哈哈哈哈哈哈哈哈哈。好好学习天天向上。

你可能感兴趣的:(JavaScript 事件)