一、事件
二、事件流
以上內容見：javaScript事件（一）事件流
三、事件處理程序
四、IE事件處理程序
五、事件對象
什么是事件對象？在觸發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有問題歡迎與我討論，共同進步。