JavaScript事件の対象

5881 ワード

JavaScript

DOM中のイベントオブジェクト
DOMのあるイベントをトリガすると、ブラウザはイベントオブジェクトをイベントハンドラに入力します.このオブジェクトにはイベントに関するすべての情報が含まれています.イベントタイプのコードを以下のように表示します.

<body>
<input id="myBtn" type="button" value="Click me">
<script>
    var btn = document.getElementById('myBtn');
    btn.onclick = function () {
        alert(event.type); //"click"
    }
    btn.addEventListener('click',function () {
        alert(event.type); //"click"
    },false);
script>
body>

イベントオブジェクトは、その特定のイベントの作成に関する属性および方法を含む.その中で私達は重点的にevent.targetとevent.current Targetとイベントの処理のプログラムの中のthisを区別します.イベントハンドラ内部では、オブジェクトthisは常にcurrentTargetの値に等しく、現在イベントを処理している要素、すなわちイベントハンドラによって結合された要素＊targetは、イベントが発生している要素を表しており、イベントハンドラによって結合されている要素とは限らない.
例を挙げます

<body>
<input id="myBtn" type="button" value="Click me">
<script>
    var btn = document.getElementById('myBtn');
    document.body.onclick = function () {
        alert(event.currentTarget === this);
        alert(this === document.body);
        alert(event.target === this);
    }
script>
body>

上記のように、ページの空白のところをクリックすると、3つの文がtrueを弾きます.しかし、ボタンをクリックするとtrue、true、falseがイジェクトされます.イベントハンドラがbodyに接続されているため、thisとcurrent Targetはbodyの参照です.しかし、イベントはbuttonで発生しました.
IEイベントハンドラにおけるthisオブジェクトとイベントオブジェクト
IEのイベントオブジェクト
IEのイベントオブジェクト:DOMにアクセスするイベントオブジェクトとは違って、IEにアクセスするイベントオブジェクトにはいくつかの異なる方法があり、イベントハンドラの方法によって異なります.1.DOM 0級の方法を使ってイベントハンドラのオブジェクトをwindowオブジェクトの属性として追加します.

var btn = document.getElementById('myBtn');
    btn.onclick = function () {
        var event = window.event;
        alert(event.type) //"click"
    }

ここではwindow.eventを通じてイベントの対象を取得する必要があります.さもなければイベントは未定義です.2.atachEvent()メソッドはatachEvent()の方法を使うと、パラメータとしてイベントハンドラにイベントオブジェクトが入ります.

var btn = document.getElementById('myBtn');
    btn.attachEvent("onclick",function (event) {
        alert(event.type);  //"click"
    });

IEのイベントオブジェクトは、targetまたはcurrentTargetではなく、srcelementである.それはDOM中のtarget属性と同じであるイベントターゲットを指す.
IEのthisオブジェクト
DOMと違って、IEのイベントハンドリング関数では、thisの値は結合された要素に等しくなく、windowオブジェクトに等しい.

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

このためIEではthisに比べて、srcelementを使った方が保険になります.

var btn = document.getElementById('myBtn');
    btn.onclick = function () {
        alert(window.event.srcElement === this); //true
    }
    btn.attachEvent("onclick",function (event) {
        event.srcElement === this;     //false
    });

明らかに最初のwindow.event.srcellementとthisはwindowですが、第二のevent.srcellementはbtnです.thisはwindowです.

new function(){},Function,new Function()の違い