首頁 > 開發者 > JavaScript
javaScript事件（三）事件對象
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作為參數傳入。 複製代碼<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('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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
