1、事件的概念：
JavaScript使我們有能力創建動態頁面，網頁中的每一個元素都可以產生某些觸發JavaScript函數的事件。我們可以認為事件是可以被JavaScript偵測到的一種行為。
2、事件流：
事件流主要分為冒泡型事件和捕獲型事件。IE瀏覽器目前只支持冒泡型事件，而支持標准DOM的瀏覽器比如火狐、Chrome等兩者都支持。
3、使用返回值改變HTML元素的默認行為：
HTML元素大都包含了自己的默認行為，例如：超鏈接、提交按鈕等。我們可以通過在綁定事件中加上"return false"來阻止它的默認行為。
4、通用性的事件監聽方法：
（1）綁定HTML元素屬性：
<input type="button" value="clickMe" onclick="check(this)">
（2）綁定DOM對象屬性：
document.getElementById("xxx").onclick=test;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JavaScript兩種通用性的綁定事件的方式</title> <script type="text/javascript"> function test1(){ alert("綁定HTML元素屬性"); } function test2(){ alert("綁定DOM對象屬性"); } </script> </head> <body> <a href="https://www.baidu.com" onclick="return false">百度</a> <!--超鏈接有自己的默認行為，即當點擊的時候會跳轉頁面。若是要把默認行為給去掉，可以綁定一個onclick事件， onclick="return false"。這樣點擊就不會跳轉頁面了。--> <input type="button" id="test1" value="測試1" onclick="test1()"> <button type="button" id="test2"><b>測試2</b></button> <script type="text/javascript"> document.getElementById("test2").onclick=test2;//此處不能加括號，加了括號表示調用函數。 /*注意：函數需要通過后面的觸發才會調用執行，而上面這句沒有放在函數里面，JavaScript從上往下解析的時候，解析到上面的那句代碼，
若還沒有解析到<body>中的id--test2,就會報錯。故JavaScript代碼要放在后面。*/ </script> </body> </html>
5、不常用的事件監聽：
5.1 IE中的監聽方法：
5.1.1 [object].attachEvent("事件類型","處理函數");//添加監聽
5.1.2 [object].detachEvent("事件類型","處理函數");//取消監聽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>IE監聽事件</title> <!--備注：這段代碼測試失敗--> <script type="text/javascript"> function show(){ alert("Hello IE"); } window.onload=function(){//當整個HTML文檔加載好之后就會觸發onload事件 document.getElementById("test1").attachEvent("onclick",show);//給第一個按鈕注冊了onclick事件 document.getElementById("test2").onclick=function(){//解除第一個按鈕的onclick事件 document.getElementById("test1").detachEvent("onclick",show); } }; </script> </head> <body> <input type="button" id="test1" value="測試1"> <button type="button" id="test2"><b>測試2</b></button> </body> </html>
5.2 標准DOM中的事件監聽方法：
5.2.1 [object].addEvent("事件類型","處理函數","冒泡事件或捕獲事件");
5.2.2 [object].removeEvent("事件類型","處理函數","冒泡事件或捕獲事件");
提示：IE監聽方法中事件類型和標准DOM監聽方法中的事件類型寫法有點不同，前者事件類型用“on”開頭，不如：“onclick”、“onmousemove”等，而后者不需要“on”，就是“click”、“mousemove”等。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>DOM事件監聽</title> <script type="text/javascript"> function show(){ alert("hello"); } window.onload=function(){ var test1=document.getElementById("test1"); var test2=document.getElementById("test2"); test1.addEventListener("click", show, false);//給第一個按鈕注冊了onclick事件 /*test2.onclick=function(){//解除第一個按鈕的onclick事件(方法一) test1.removeEventListener("click", show, false); }*/ test2.addEventListener("click", function(){//解除第一個按鈕的onclick事件(方法二) test1.removeEventListener("click", show, false); }, false); } </script> </head> <body> <input type="button" id="test1" value="測試1"> <button type="button" id="test2"><b>測試2</b></button> </body> </html>
6、標准事件流：
6.1 舉個例子：冒泡事件（從內至外）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>標准事件流(冒泡事件)</title> <script type="text/javascript"> function show(sText){ var oDiv=document.getElementById("display"); oDiv.innerHTML+=sText; } </script> </head> <body onclick="show('body<br>')"> <div onclick="show('div<br>')"> <p onclick="show('p<br>')">click me</p><!--用此方法為通用型事件，HTML和js腳本混在一起，沒有隔離開來。--> </div> <div id="display"></div> </body> </html>
運行結果是
6.2 冒泡事件和捕獲事件的比較
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>標准事件流(捕獲事件和冒泡事件)</title> <!--IE不支持--> <script type="text/javascript"> function show(sText){ var oDiv=document.getElementById("display"); oDiv.innerHTML+=sText; } window.onload=function(){//捕獲事件，即由外到內 var myBody=document.getElementById("myBody"); var myDiv=document.getElementById("myDiv"); var myP=document.getElementById("myP"); myBody.addEventListener("click", function(){show('body<br>');}, true);//若為false則是冒泡事件 myDiv.addEventListener("click", function(){show('div<br>');}, true); myP.addEventListener("click", function(){show('p<br>');}, true); } </script> </head> <body id="myBody"> <div id="myDiv"> <p id="myP">click me</p> </div> <div id="display"></div> </body> </html>
運行結果：
倘若把addEventListener中的true改為false，那么運行結果為：
7、訪問事件對象：
事件對象封裝了事件發生的詳細信息，尤其是鼠標、鍵盤事件。如鼠標事件發生的位置、鍵盤事件的鍵盤鍵等。
7.1 IE中的事件對象：
IE中的事件對象是一個隱式可用的全局對象：event，它是window對象的一個屬性。
7.2 標准DOM的事件對象：
在標准DOM瀏覽器檢測發生了某個事件時，將自動創建一個Event對象，並隱式地將該對象作為事件處理函數的第一個參數傳入
//IE中得到事件對象
op.onclick=function(){
var oEvent=window.event;
}
//標准DOM中得到事件對象
op.onclick=function(oEvent){
//作為參數傳進來
}
經驗之談：為了兼容不同的瀏覽器，通常采用下面的方法得到事件對象。
op.onclick=function(oEvent){
if(window.event){
oEvent=window.event;
}
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>事件的目標</title> <script type="text/javascript"> function handle(oEvent){ if(window.event){ oEvent=window.event; } var oTarget; if(oEvent.srcElement){ oTarget=oEvent.srcElement; }else{ oTarget=oEvent.target; } alert(oTarget.tagName); } window.onload=function(){ var oImg=document.getElementsByTagName("img")[0]; oImg.onclick=handle; } /*總結： 訪問事件對象： 事件對象封裝了事件發生的詳細信息，尤其是鼠標、鍵盤事件。如鼠標事件發生的位置、鍵盤事件的鍵盤鍵等。 IE中的事件對象： IE中的事件對象是一個隱式可用的全局對象：event，它是window對象的一個屬性。 標准DOM的事件對象： 在標准DOM瀏覽器檢測發生了某個事件時，將自動創建一個Event對象，並隱式地將該對象作為事件處理函數的第一個參數傳入 //IE中得到事件對象 op.onclick=function(){ var oEvent=window.event; } //標准DOM中得到事件對象 op.onclick=function(oEvent){ //作為參數傳進來 } 經驗之談：為了兼容不同的瀏覽器，通常采用下面的方法得到事件對象。 op.onclick=function(oEvent){ if(window.event){ oEvent=window.event; } } */ </script> </head> <body> <img src="../images/beautiful/荷花278346.jpg" width="300px" height="200px" border="0"> </body> </html>
Event事件對象常用的屬性：
8、常用的事件類型：
8.1 常用的鼠標事件：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>鼠標事件</title> <script type="text/javascript"> function handle(oEvent){//處理兼容性，獲得事件對象 if(window.event) oEvent=window.event; var oDiv=document.getElementById("display"); oDiv.innerHTML+=oEvent.type+"<br>";//輸出事件名稱 } window.onload=function(){ var oImg=document.getElementsByTagName("img")[0]; oImg.onmousedown=handle;//將鼠標事件除了mousemove外都監聽 oImg.onmouseup=handle; oImg.onmouseover=handle; oImg.onmouseout=handle; oImg.onclick=handle; oImg.ondblclick=handle; } </script> </head> <body> <img src="../images/beautiful/傷心童話.jpg" width="300px" height="200px" border="0" style="float:left;padding:0px 8px 0px 0px;"> <div id="display"></div> </body> </html>
8.2 常用的鍵盤事件：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>鍵盤事件</title> <script type="text/javascript"> function handle(oEvent){//處理兼容性，獲得事件對象 if(window.event) oEvent=window.event; var oDiv=document.getElementById("display"); oDiv.innerHTML+=oEvent.type+" ";//輸出事件名稱 } window.onload=function(){ var oTextArea=document.getElementsByTagName("textarea")[0]; oTextArea.onkeydown=handle;//監聽所有鍵盤事件 oTextArea.onkeyup=handle; oTextArea.onkeypress=handle; } </script> </head> <body> <textarea rows="4" cols="50"></textarea> <div id="display"></div> </body> </html>
8.3 HTML事件：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>HTML事件</title> </head> <body onload="alert('hello!');" > <!--onunload事件並不是所有的瀏覽器都支持，比如說標准的DOM瀏覽器基本上都不支持，而IE瀏覽器支持--> <form action="http://www.baidu.com" onsubmit="alert('提交啦');"><!--若onsubmit="return false"表示阻止默認提交行為，即不提交--> <input type="text" value="a" onfocus="alert('獲取焦點');"><!-- onblur="alert('失去焦點');"--> <input type="text" value="b" onchange="alert('內容改變啦');" onselect="alert('內容選中了');"> <select name="city" onchange="alert('內容改變啦');"> <option>上海</option> <option>北京</option> </select> <input type="submit" value="提交"> </form> </body> </html>
提示：載入事件onload是最常用的事件之一，因為在頁面載入完成之前，DOM的框架還沒有搭建完畢，因此任何操作都不能發生。
給window對象分配onload、onunload事件等同於<body>元素的onload、onunload方法。