javaScript事件（三）事件對象

時間 2019-11-10

標籤 javascript 事件對象欄目 JavaScript 简体版

原文原文鏈接

javaScript事件（三）事件對象

1、事件html

2、事件流java

以上內容見：javaScript事件（一）事件流瀏覽器

3、事件處理程序函數

4、IE事件處理程序spa

以上內容見javaScript事件（二）事件處理程序code

5、事件對象

一、認識事件對象

事件在瀏覽器中是以對象的形式存在的，即event。觸發一個事件，就會產生一個事件對象event，該對象包含着全部與事件有關的信息。包括致使事件的元素、事件的類型以及其餘與特定事件相關的信息。htm

例如：鼠標操做產生的event中會包含鼠標位置的信息；鍵盤操做產生的event中會包含與按下的鍵有關的信息。對象

全部瀏覽器都支持event對象，但支持方式不一樣，在DOM中event對象必須做爲惟一的參數傳給事件處理函數，在IE中event是window對象的一個屬性。blog

二、html事件處理程序中event

<input id="btn" type="button" value="click" onclick=" console.log('html事件處理程序'+event.type)"/>

這樣會建立一個包含局部變量event的函數。可經過event直接訪問事件對象。事件

三、DOM中的事件對象

DOM0級和DOM2級事件處理程序都會把event做爲參數傳入。

<body><input id="btn" type="button" value="click"/><script>
    var btn=document.getElementById("btn");
    btn.onclick=function(event){
        console.log("DOM0 & click");
        console.log(event.type);    //click    }
    btn.addEventListener("click", function (event) {
        console.log("DOM2 & click");
        console.log(event.type);    //click    },false);</script></body>

四、IE中的事件對象

第一種狀況：經過DOM0級方法添加事件處理程序時，event對象做爲window對象的一個屬性存在。

<body><input id="btn" type="button" value="click"/><script>
    var btn=document.getElementById("btn");
    btn.onclick= function () {        var event=window.event;
       console.log(event.type); //click    }</script></body>

第二種狀況：經過attachEvent()添加的事件處理程序，event對象做爲參數傳入。

<body><input id="btn" type="button" value="click"/><script>
    var btn=document.getElementById("btn");
    btn.attachEvent("onclick", function (type) {
        console.log(event.type);    //click    })</script></body>

可是我有兩個地方不懂。

一、經過DOM0級方法添加的事件處理程序中一樣能夠傳入一個event參數，它的type和window.event.type同樣，可是傳入的event參數卻和window.event不同，爲何？

    btn.onclick= function (event) {
        var event1=window.event;
        console.log('event1.type='+event1.type);  //event1.type=click
        console.log('event.type='+event.type);    //event.type=click
        console.log('event1==event?'+(event==event1));  //event1==event?false
    }

二、經過attachEvent添加的事件處理程序中傳入的event和window.event是不同的，爲何？

<body><input id="btn" type="button" value="click"/><script>
    var btn=document.getElementById("btn");
    btn.attachEvent("onclick", function (type) {
        console.log(event.type);    //click        console.log("event==window.event?"+(event==window.event)); //event==window.event?false    })</script></body>

6、事件對象的公共成員

這部份內容見javaScript事件（四）event的公共成員（屬性和方法）

7、鼠標事件

這部份內容見javaScript事件（五）事件類型之鼠標事件

分類: JavaScript