JavaScript 笔记 —— 规范事宜对象与 IE 事宜对象

2019年8月26日 227次阅读 来源: ac黄

规范的事宜绑定函数是 addEventListener 函数，而 IE 浏览器（IE9 以下）则是用 attachEvent。 这两个函数中的事宜处置惩罚函数都可以传入一个 event 参数，就是我们所说的事宜对象，本文就来总结一下二者的区分。

猎取事宜的目的

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

有以下的 HTML：

<body id="myBody">
    <button id="myButton">click</button>
</body>

规范事宜对象运用 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：

<body>
    <a id="myLink" href="http://www.acwong.org">acwong blog</a>
</body>

规范事宜对象运用 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:

<body id="myBody">
    <button id="myButton">click</button>
</body>

规范事宜对象运用 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/

    原文作者：ac黄
    原文地址: https://segmentfault.com/a/1190000002455890
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞