JavaScript 笔记 —— 标准事件对象与 IE 事件对象

animabear 发布于2019-08-21 10:24 / 2386人阅读

摘要：另外，标准事件对象还有一个属性，该属性在事件处理函数当中始终与相等，而属性则是指向事件触发的具体目标。取消事件默认行为有如下的标准事件对象使用的方法取消事件默认行为。而在标准事件绑定当中，的值等于被绑定的元素。

标准的事件绑定函数是 addEventListener 函数，而 IE 浏览器（IE9 以下）则是用 attachEvent。这两个函数中的事件处理函数都可以传入一个 event 参数，就是我们所说的事件对象，本文就来总结一下两者的区别。

获取事件的目标

事件的目标就是指当前触发事件的元素。

有如下的 HTML：

标准事件对象使用 event 的 target 属性获取事件目标。

var btn = document.getElementById("myButton");
btn.addEventListener("click", function(event) {
    alert(event.target.id);    // myButton
});

IE 事件对象使用 event 的 srcElement 属性获取事件目标。

var btn = document.getElementById("myButton");
btn.attachEvent("onclick", function(event) {
    alert(event.srcElement.id);    // myButton
});

另外，标准事件对象还有一个 currentTarget 属性，该属性在事件处理函数当中始终与 this 相等，而 target 属性则是指向事件触发的具体目标。

document.body.addEventListener("click", function (event) {
    alert(event.currentTarget.id);    // myBody
    alert(event.target.id);           // myButton
    alert(this.id);                   // myBody
});

取消事件默认行为

有如下的 HTML：


    acwong blog

标准事件对象使用 event 的 preventDefault() 方法取消事件默认行为。

var myLink = document.getElementById("myLink");
myLink.addEventListener("click",function(event) {
    alert("haha");          // haha
    event.preventDefault(); // 浏览器不会跳转
});

IE 事件对象使用 event 的 returnValue 属性取消事件默认行为，该属性默认值为 true 设置为 false 就可以取消事件默认行为。

var myLink = document.getElementById("myLink");
myLink.attaxchEvent("onclick",function(event) {
    alert("haha");                  // haha
    event.returnValue = false;      // 浏览器不会跳转
});

禁止事件冒泡

有如下的 HTML:

标准事件对象使用 event 的 stopPropagation() 方法禁止事件冒泡。

var btn = document.getElementById("myButton");
btn.addEventListener("click", function(event) {
    alert(this.id);            // myButton
    event.stopPropagation();   // 禁止事件冒泡
});
document.body.addEventListener("click",function(event) {
    alert(this.id);           // 不会出现
});

IE 事件对象使用 event 的 cancelBubble 属性禁止事件冒泡，该属性值默认为 false，设置为 true 就可以禁止事件冒泡。

var btn = document.getElementById("myButton");
btn.attachEvent("onclick", function(event) {
    alert("haha");              // haha
    event.cancelBubble = true;  // 禁止事件冒泡
});
document.body.attachEvent("onclick",function(event) {
    alert("hehe");             // 不会出现
});

IE 事件处理函数中的 this

最后，还要一个与事件对象无关的小点，在 IE 事件处理函数当中 this 的值并不等于被绑定元素，而是等于 window 对象。

var btn = document.getElementById("myButton");
btn.attachEvent("onclick", function(event) {
    alert(this === window);              // true
    alert(this.id)                       // undefined
});

而在标准事件绑定当中，this 的值等于被绑定的元素。

var btn = document.getElementById("myButton");
btn.addEventListener("click", function(event) {
    alert(this === btn);                  // true
    alert(this.id);                       // myButton
    alert(this === event.currentTarget);  // true
});

最后祝大家新年快乐~

感谢您的阅读，有不足之处请为我指出。

参考

JavaScript高级程序设计(第3版)

本文同步于我的个人博客 http://blog.acwong.org/2014/12/30/standard-event-object-and-IE-event-object/

GPU云服务器云服务器 IE事件对象事件对象 js事件对象 html对象点击事件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85460.html

JavaScript 笔记 —— 鼠标事件的浏览器差异

摘要：本文总结一下，鼠标事件在不同浏览器实现的差异。和相关元素差异和是级事件当中的其中两个事件。标准事件对象使用属性来识别鼠标按键。该事件当中的值与事件对象当中的作用相同。鼠标是我们在 PC 端浏览网页时候最重要的交互工具，因此鼠标事件也是 Web 开发当中最常用的一类事件。然而，由于各种原因，不同厂商或者不同版本的浏览器之间对于鼠标事件的实现也有所不同。本文总结一下，鼠标事件在不同浏览器...

haoguo 2019-08-21 10:25 评论0 收藏0
001-读书笔记-JavaScript高级程序设计 JavaScript简介

摘要：由于计算机的国际化，组织的标准牵涉到很多其他国家，因此组织决定改名表明其国际性。规范由万维网联盟制定。级标准级标准是不存在的，级一般指的是最初支持的。这篇笔记的内容对应的是《JavaScript高级程序设计(第三版)》中的第一章。 1.ECMA 和 ECMA-262 ECMA 是欧洲计算机制造商协会的缩写，全程是 European Computer Manufacturers Ass...

masturbator 2019-08-21 17:18 评论0 收藏0
[学习笔记] 事件（上篇）

摘要：指定事件处理程序指定事件处理程序主要有两种方式级事件处理程序级事件处理程序。添加事件处理程序注意这里是哦或移除事件处理程序使用移除事件处理程序的条件与方法相同必须提供相同的参数，从而添加的匿名函数也无法被移除。今天看书又看到事件，遂决定小总结一下~ JavaScript与HTML之间的交互是通过事件实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用监听器（事件处...

wangym 2019-08-22 10:57 评论0 收藏0
[学习笔记] 事件（上篇）

摘要：指定事件处理程序指定事件处理程序主要有两种方式级事件处理程序级事件处理程序。添加事件处理程序注意这里是哦或移除事件处理程序使用移除事件处理程序的条件与方法相同必须提供相同的参数，从而添加的匿名函数也无法被移除。今天看书又看到事件，遂决定小总结一下~ JavaScript与HTML之间的交互是通过事件实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用监听器（事件处...

RayKr 2019-08-01 14:48 评论0 收藏0
JavaScript MVC 学习笔记（五）事件的基本操作

摘要：事件是应用程序的核心，是所有内容的驱动。将对这两种事件模型的支持都加入标准规范之中。根据型，事件首先被目标元素所捕捉，然后向上冒泡。取消事件冒泡当事件冒泡时，可以通过数来终止冒泡，这个函数是对象中的方法。事件是 JavaScript 应用程序的核心，是所有内容的驱动。尽管后来W3C 对此做了标准化，但 IE 仍然坚持使用与 W3C 不兼容的事件模型，直到 IE9 才遵循标准。有很多诸...

Julylovin 2019-08-21 10:26 评论0 收藏0