首頁 > web前端 > js教程 > 帶你認識事件對象,js事件對像有哪些?

帶你認識事件對象,js事件對像有哪些?

php是最好的语言
發布: 2018-07-26 12:53:37
原創
1702 人瀏覽過

首先介紹事件對象,事件在瀏覽器中是以對象的形式存在的,即event。觸發一個事件,就會產生一個事件物件event,該物件包含所有與事件有關的資訊。包括導致事件的元素、事件的類型以及其他與特定事件相關的資訊。 這篇文章主要介紹了JavaScript事件中js事件物件的相關資料,非常不錯具有參考借鑒價值,需要的朋友可以參考下

一、事件物件

1、認識事件物件

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

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

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

2、html事件處理程序中event

<input id="btn" type="button" value="click" onclick=" console.log(&#39;html事件处理程序&#39;+event.type)"/>
登入後複製

這樣會建立一個包含局部變數event的函式。可透過event直接存取事件物件。

3、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>
登入後複製

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>
登入後複製

但是我有兩個地方不懂。

1、透過DOM0級方法新增的事件處理程序中同樣可以傳入一個event參數,它的type和window.event.type一樣,但是傳入的event參數卻和window.event不一樣,為什麼?

btn.onclick= function (event) {
var event1=window.event;
console.log(&#39;event1.type=&#39;+event1.type); //event1.type=click
console.log(&#39;event.type=&#39;+event.type); //event.type=click
console.log(&#39;event1==event?&#39;+(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事件學習小結(三)js事件物件的相關知識,希望對大家有幫助,如果大家想了解更多內容敬請關注腳本之家網站!

相關推薦:

##########################################################################################################################################################################。 ##################

以上是帶你認識事件對象,js事件對像有哪些?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板