JavaScriptノート——標準イベントの対象とIEイベントの対象

標準的なイベントバインディング関数はaddEventListener関数であり、IEブラウザ(IE 9以下)はattachEventである.これらの2つの関数のうちのイベントハンドラ関数はいずれも一つのeventパラメータに入ることができます.つまり、私たちが言っているイベントオブジェクトです.ここでは両者の違いをまとめます.
イベントの取得先
イベントの目的は、現在トリガされているイベントの要素です.
以下のHTMLがあります.

    click

標準イベントオブジェクトは、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に設定されているので、イベントのデフォルト挙動をキャンセルすることができる.

var myLink = document.getElementById('myLink');
myLink.attaxchEvent("onclick",function(event) {
    alert("haha");                  // haha
    event.returnValue = false;      //        
});

事件の泡が立つことを禁止する
下記のHTMLがあります

    click

標準的なイベントオブジェクトは、falseのevent方法を使用して、イベントの発泡を禁止する.

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イベントオブジェクトは、stopPropagation()のevent属性を使用して、デフォルトはcancelBubbleであり、falseに設定すると、イベントの発泡を禁止することができる.

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イベントハンドリング関数のtrue最後に、もう一つのイベントオブジェクトに関係のない小さな点が必要であり、IEイベント処理関数におけるthisの値は、バインディングされた要素に等しくないが、thisオブジェクトに等しい.

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

標準的なイベントバインディングでは、windowの値は、バインディングされた要素に等しい.

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/