Javascript高级编程学习笔记（59）—— 事件（3）事件对象

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Javascript高级编程学习笔记（59）—— 事件（3）事件对象，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3644字，纯文字阅读大概需要6分钟。

内容图文

事件对象

在触发DOM‘事件时，会产生一个事件对象 event

该对象包含着所有与事件有关的信息

所有浏览器都支持 event 对象但是支持的方式有所不同

DOM事件对象

兼容DOM的浏览器会将event对象传入事件处理程序中

如下所示：

var btn = document.getElementByTagName("button")[0];

btn.onclick = function(event){
    alert(event.type); //"click"
}

而通过HTML特性指定的事件处理程序，变量event保存着 event 对象

<input type = "button" value = "click" onclick = "alert(event.type)" />

event 对象包含与创建它的特定事件有关的方法和属性

如下表所示：

在事件处理程序的内部，this 始终等于 currentTarget 的值

而target只包含事件的实际目标

也就是说 this和current指向的是注册当前事件的元素，而target是当前事件的目标元素

这两者可能有一样的值，而在事件委托时我们将事件注册到目标元素的父元素上，这两者就不相同了

当我们需要通过一个函数处理多个事件的时候

可以使用type属性

如：

var btn = document.getElemntByTagName("button")[0]'
var handler = function(event){
    switch(event.type){
        case "click":
            alert("clicked");
            break;
        case "mouseover":
            alert("mouseover");
            break;
        case "mouseout":
            alert("out");
            break;
    }
}

btn.onclick = handle;
btn.onmouseover = handle;
btn.onmouseout = handle;

如果希望阻止事件的默认行为，可以使用 preventDefault（） 方法

不过只有cancelable 属性为true 的事件才能阻止默认行为

而关于stopImmediatePropagation（）和stopPropagation（）的区别在于，前者让事件流停止在当前事件处理程序，而后者是让事件流停在当前事件流阶段

此外，只有在事件处理程序执行期间 event 对象才会存在，一旦执行完毕 event 对象就会销毁

IE中的事件对象

与访问DOM中的 event 对象不同，访问IE中的 event 有几种不同的方式，而方式取决于是如何注册事件处理程序的

当我们使用DOM0级的方式添加事件处理程序的时候 event 对象作为 window  的一个属性存在

而如果我们使用 attachEvent 方法添加事件处理程序，那么就和DOM一样 event 对象会作为一个参数传入事件处理程序

并且也可以使用 window.event来访问

而IE中的所有事件对象都会包含以下属性和方法：

而IE中有一点比较重要，那就是事件处理程序的this指向和事件处理程序的指定方式有关，所以在使用时最好使用 event.srcElement 比较保险

跨浏览器事件对象

事件对象当然也有跨浏览器的实现方式

下方给出的是一个简略的初步实现：

function eventFunction(e){
    var events;
    events = e ? e : window.event;// event对象兼容
    events.target = e.target || e.srcElement;// 目标元素兼容
    events.preventDefault = e.preventDefault || function () {
                events.returnValue = false;
     };// 阻止默认事件兼容
     events.stopPropagation = e.stopPropagation || function () {
                events.cancelBubble = true;
     };// 阻止冒泡兼容
}
      

内容总结

以上是互联网集市为您收集整理的Javascript高级编程学习笔记（59）—— 事件（3）事件对象全部内容，希望文章能够帮你解决Javascript高级编程学习笔记（59）—— 事件（3）事件对象所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端