JavaScript事件學(xué)習(xí)小結(jié)（三）js事件對象

更新時間：2016年06月09日 11:51:29 作者：starof

這篇文章主要介紹了JavaScript事件學(xué)習(xí)小結(jié)（三）js事件對象的相關(guān)資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下

相關(guān)閱讀：

JavaScript事件學(xué)習(xí)小結(jié)(五）js中事件類型之鼠標事件

http://www.fzitv.net/article/86259.htm

JavaScript事件學(xué)習(xí)小結(jié)（一）事件流

http://www.fzitv.net/article/86261.htm

javaScript事件學(xué)習(xí)小結(jié)（四）event的公共成員（屬性和方法）

http://www.fzitv.net/article/86262.htm

JavaScript事件學(xué)習(xí)小結(jié)(二)js事件處理程序

http://www.fzitv.net/article/86264.htm

JavaScript事件學(xué)習(xí)小結(jié)（三）js事件對象

http://www.fzitv.net/article/86266.htm

一、事件對象

1、認識事件對象

事件在瀏覽器中是以對象的形式存在的，即event。觸發(fā)一個事件，就會產(chǎn)生一個事件對象event，該對象包含著所有與事件有關(guān)的信息。包括導(dǎo)致事件的元素、事件的類型以及其他與特定事件相關(guān)的信息。

例如：鼠標操作產(chǎn)生的event中會包含鼠標位置的信息；鍵盤操作產(chǎn)生的event中會包含與按下的鍵有關(guān)的信息。

所有瀏覽器都支持event對象，但支持方式不同，在DOM中event對象必須作為唯一的參數(shù)傳給事件處理函數(shù)，在IE中event是window對象的一個屬性。

2、html事件處理程序中event

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

這樣會創(chuàng)建一個包含局部變量event的函數(shù)?？赏ㄟ^event直接訪問事件對象。

3、DOM中的事件對象

DOM0級和DOM2級事件處理程序都會把event作為參數(shù)傳入。

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

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對象作為參數(shù)傳入。

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

但是我有兩個地方不懂。

1、通過DOM0級方法添加的事件處理程序中同樣可以傳入一個event參數(shù)，它的type和window.event.type一樣，但是傳入的event參數(shù)卻和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事件學(xué)習(xí)小結(jié)（三）js事件對象的相關(guān)知識，希望對大家有所幫助，如果大家想了解更多內(nèi)容敬請關(guān)注腳本之家網(wǎng)站！

您可能感興趣的文章: