javaScript事件（三）事件物件

starof發表於2014-11-12
JavaScript事件物件

一、事件

二、事件流

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

三、事件處理程式

四、IE事件處理程式

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

五、事件物件

什麼是事件物件？在觸發DOM上的事件時都會產生一個物件。

1、認識事件物件

事件在瀏覽器中是以物件的形式存在的，即event。觸發一個事件，就會產生一個事件物件event，該物件包含著所有與事件有關的資訊。包括導致事件的元素、事件的型別以及其他與特定事件相關的資訊。

例如：滑鼠操作產生的event中會包含滑鼠位置的資訊；鍵盤操作產生的event中會包含與按下的鍵有關的資訊。

所有瀏覽器都支援event物件，但支援方式不同，在DOM中event物件必須作為唯一的引數傳給事件處理函式，在IE中event是window物件的一個屬性。

2、html事件處理程式中event

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

這樣會建立一個包含區域性變數event的函式。可通過event直接訪問事件物件。

3、DOM中的事件物件

DOM0級和DOM2級事件處理程式都會把event作為引數傳入。

根據習慣來：可以用e，或者ev或者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>

DOM中事件物件重要屬性和方法。總結：【update 20170313】

屬性：

  • type屬性，用於獲取事件型別
  • target屬性 使用者獲取事件目標 事件加在哪個元素上。（更具體target.nodeName）

方法：

  • stopPropagation()方法 用於阻止事件冒泡
  • preventDefault()方法 阻止事件的預設行為 移動端用的多

4、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>

 IE中事件物件重要屬性和方法。總結：【update 20170313】

屬性：

  • type屬性，用於獲取事件型別(一樣)
  • srcElement屬性 使用者獲取事件目標 事件加在哪個元素上。（更具體target.nodeName）
//相容性處理
function showMsg(event){
    event=event||window.event;  //IE8以前必須是通過window獲取event，DOM中就是個簡單的傳參
    var ele=event.target || event.srcElement; //獲取目標元素，DOM中用target,IE中用srcElement
    alert(ele);
 }
  • cancelBubble屬性 用於阻止事件冒泡 IE中cancelBubble為屬性而不是方法，true表示阻止冒泡。
  • returnValue屬性 阻止事件的預設行為 false表示阻止事件的預設行為

 

但是我有兩個地方不懂。

1、通過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
    }

2、通過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>

六、事件物件的公共成員

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

七、滑鼠事件

這部分內容見javaScript事件（五）事件型別之滑鼠事件

 

本文作者starof,因知識本身在變化，作者也在不斷學習成長，文章內容也不定時更新，為避免誤導讀者，方便追根溯源，請諸位轉載註明出處：http://www.cnblogs.com/starof/p/4077532.html有問題歡迎與我討論，共同進步。

相關文章