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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 事件处理程序在应用中是必不可少的,虽然现在很多框架都有自己实现事件处理方法,但是熟知原生才能让我们应对各种各样的需...
    俗三疯阅读 300评论 0 1
  • 事件流 事件流描述的是从页面中接受事件的顺序。但是IE和Netscape开发团队提出了差不多相反的事件流的概念。I...
    losspm阅读 268评论 0 0
  • 在触发 DOM 上的某个事件时,会产生一个事件对象 event,这个对象中包含着所有与事件有关的信息。包括导致事件...
    zouyang0921阅读 781评论 0 0
  • 事件对象 在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息。 包括导...
    shanruopeng阅读 220评论 0 0
  • 1.通过NSThread的performSelectorInBackground;2.通过定时器,属于比较简单的写...
    somepark阅读 267评论 0 0