標籤：變化 window seo 滑鼠 為什麼 返回 enter select eve
一、理解事件
1、什麼是事件
事件是Web瀏覽器通知應用程式（比如我們的js）發生了某個事情！
我們可以為這些特定的事情，事先安排好處理方案，這樣就能夠實現互動！
2、事件目標
你可以簡單的理解為事件發生在的最具體的那個目標元素即為事件目標，有時也可能是document或者window!
3、事件類型
事件類型是一個用來說明發生了什麼類型事件的字串，你可以簡單的理解為事件的名字！
常見的事件類型有哪些？
1）常用的與瀏覽器有關的事件類型：
①resize
當視窗或者架構的大小變化時在window對象上或架構上觸發
②scroll
當使用者滑動（滾動）帶有捲軸的元素中的內容時在該元素上觸發
滑動整個頁面會在document以及window上觸發
③error
當發生JavaScript錯誤時在window上面觸發，當無法載入映像時在<img>元素上面觸發，當無法載入嵌入內容時在<object>
元素上面觸發，或者當有一或多個架構無法載入時在框架組上面觸發
2）常用的與文檔載入有關的事件類型：
①load
當頁面完全載入後（包括所有映像、JavaScript檔案、CSS檔案等外部資源）在window對象上觸發。
當所有的架構都載入完畢的時候會在框架組上面觸發，
當映像載入完畢時會在img元素上面觸發
使用object元素嵌入的內容載入完畢時會在object元素上觸發
說白了：等內容（包括外部資源）載入完畢之後，在對應的元素對象上面觸發
②beforeunload
會在window對象上面觸發這個事件，讓開發人員有可能在頁面卸載前阻止這一操作。
這個事件會在瀏覽器卸載頁面之前觸發，可以通過它來取消卸載並繼續使用原有頁面。
將事件對象的returnValue 屬性設定為要顯示給使用者的內容，並且將其返回才能夠實現相容各種瀏覽器;
3）常用的與表單有關的事件類型：
①blur
在元素失去焦點時在對應的元素上觸發，該事件不會冒泡
②focus
在元素獲得焦點時觸發在對應的元素上，這個事件不會冒泡
③select
當使用者選擇文字框（<input>或<texterea>）中的一或多個字元時，在對應的元素上觸發
④change
對於<input>和<textarea>元素，在它們失去焦點且value 值改變時在對應元素上觸發
對於<select>元素，在其選項改變時在select元素上觸發
⑤submit
瀏覽器會在將請求發送給伺服器之前在對應的表單上觸發submit事件
4）常用的與鍵盤有關的事件類型：
①keydown
當使用者按下鍵盤上的任意鍵時觸發，而且如果按住不放的話，會重複觸發此事件
事件對象中keyCode屬性工作表示 鍵碼
②keyup
當使用者釋放鍵盤上的鍵時觸發
③keypress
當使用者按下鍵盤上的字元鍵時觸發，而且如果按住不放的話，會重複觸發此事件
事件對象中charCode屬性工作表示 ASCII碼
5）常用的與滑鼠有關的事件類型：
我們的與滑鼠有關的事件類型，最能體現”事件傳播“,由於我們後面需要專門的一節課來學習”事件傳播“，
所以說，我們這節課在講滑鼠有關的事件類型的時候，我們先避開”事件傳播“這個概念！
①click
在使用者點擊滑鼠或者按下斷行符號鍵時或者移動使用者觸摸時觸發
②dblclick
在使用者雙擊滑鼠時觸發
③mousedown
按下滑鼠按鍵時，會發生 mousedown 事件
與 click 事件不同，mousedown 事件僅需要按鍵被按下，而不需要鬆開即可發生
④mouseup
在使用者釋放滑鼠按鍵時觸發
⑤mouseenter
在滑鼠游標從元素外部移動到元素範圍之內時觸發,這個事件不冒泡
⑥mouseleave
在位於元素上的滑鼠游標移動到元素範圍之外時觸發,這個事件不冒泡
⑦mouseover
在滑鼠指標移入一個元素邊界之內,或者移入任何後代元素時觸發
⑧mouseout
滑鼠從當前元素移動到其他元素時觸發（哪怕移動到的元素是當前元素的後代元素或者離開任何後代元素）
⑨mousemove
當滑鼠指標在元素內部移動時重複地觸發
4、事件處理常式(事件監聽程式)
其實事件一直在發生，有人會問為什麼我沒感覺到？因為你沒有為事件作出響應！怎麼作出響應？
為"元素"綁定對應的事件處理常式（一個函數，當具體的元素上發生對應的事件時的就會觸發這個函數的執行）
綁定的這個函數我們可以稱為事件處理常式！
我們通過DOM對象的addEventListener方法來為具體的目標綁定對應的事件處理函數
Internet Explorer 8 及更早IE版本不支援 addEventListener() ，Opera 7.0 以及更早版本也不支援。
當然我們目前只是用這個原生的方法示範一下即可，後面我們jQuery會提供一個相容各種瀏覽器的方法!
addEventListener()參數說明：
eventType：字串，表示監聽的事件類型
function：事件在預定目標發生時，執行的函數
useCapture：(可選)布爾值，是否註冊到捕獲階段，預設false
5、事件傳播（事件流）
事件傳播指的是事件在頁面中傳播的順序（事件流）
既然可能有很多個元素一齊發生了同樣的事件，那麼總該有個先後順序吧？
事件傳播描述的是從頁面中接收事件的順序。有意思的是，IE 和NetscapeTeam Dev在當時居然提出了差不多是完全相反的事件流的概念。
當時IETeam Dev提出的的事件傳播順序為事件冒泡，而Netscape公司提出的事件傳播順序為事件捕獲。
IETeam Dev提出的的事件傳播順序：事件冒泡
即事件開始是由最具體的元素（文檔中嵌套層次最深的那個節點）接收，然後逐級向上傳播到較為不具體的節點（文檔）
Netscape公司提出的事件傳播順序：事件捕獲
事件捕獲的思想是不太具體的節點應該更早接收到事件，而最具體的節點應該最後接收到事件。
“捕獲”的用意在於在於一層一級的往裡找，在找的過程中把事件依次傳播給它們，直到找到具體的事件目標。
老版本的ie瀏覽器不支援（ie9以下的ie版本）
W3C規定的事件傳播方式(我們可以稱為DOM事件傳播,或DOM事件流)
事件傳播有三個階段：事件捕獲階段、處於目標階段和事件冒泡階段
事件捕獲階段：如果有綁定在事件捕獲階段的處理函數則按照捕獲的順序執行
處於目標階段：如果有直接綁定在事件目標上的處理函數則按照綁定的先後順序來執行（不管addEventListener的第三個參數是true還是false）
事件冒泡階段：如果有綁定在事件冒泡階段的處理函數則按照冒泡的順序執行
1 <!DOCTYPE html> 2 <html id="html"> 3 <head> 4 <meta charset="utf-8" /> 5 <title>demo</title> 6 <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script> 7 <style type="text/css"> 8 #div1 { 9 width:300px;10 height:300px;11 background:#eee;12 border:1px solid #ccc;13 }14 </style>15 <script type="text/javascript">16 $(function(){17 /*18 //因為div1是事件目標，所綁定在他們身上的多個同樣的事件處理常式，執行順序是根據綁定先後而言！19 var div1=document.getElementById(‘div1‘);20 div1.addEventListener(‘click‘,function(){21 console.log(‘1div_true‘);22 },true);23 div1.addEventListener(‘click‘,function(){24 console.log(‘0div_false‘);25 });26 */27 28 var html=document.getElementById(‘html‘);29 var body=document.getElementById(‘body‘);30 var div1=document.getElementById(‘div1‘);31 window.addEventListener(‘click‘,function(){32 console.log(‘window_false‘); 33 });//冒泡階段，接收到click事件的時候執行34 window.addEventListener(‘click‘,function(){35 console.log(‘window_true‘); 36 },true);37 document.addEventListener(‘click‘,function(){38 console.log(‘document_false‘); 39 });40 document.addEventListener(‘click‘,function(){41 console.log(‘document_true‘); 42 },true);43 html.addEventListener(‘click‘,function(){44 console.log(‘html_false‘); 45 });46 html.addEventListener(‘click‘,function(){47 console.log(‘html_true‘); 48 },true);49 body.addEventListener(‘click‘,function(){50 console.log(‘body_false‘); 51 });52 body.addEventListener(‘click‘,function(){53 console.log(‘body_true‘); 54 },true);55 56 div1.addEventListener(‘click‘,function(){57 console.log(‘div1_true‘); 58 },true);59 div1.addEventListener(‘click‘,function(){60 console.log(‘div1_false‘); 61 });62 });63 </script>64 </head>65 <body id="body">66 <div id="div1"></div>67 </body>68 </html>
PS:並不是所有的事件類型都支援事件冒泡！低版本的ie瀏覽器也沒有捕獲這個階段！
一堆爛攤子，坐等我們後面jQuery來解決這個問題！
6、事件對象
當我們事件處理函數執行的時候，我們的事件處理函數會接受到參數->事件對象，我們使用一個變數接受即可
當然低版本的ie瀏覽器是接受不到的，並且事件對象內的一些屬性名稱和W3C規定的標準的屬性名稱也可能不一致！
事件對象內部，包含了與該事件類型以及目標有關的資料，不同的事件類型，包含的屬性以及方法可能也不太一樣！
bubbles Boolean 表明事件是否冒泡
preventDefault() Function 取消事件的預設行為。如果cancelable是true，則可以使用這個方法
stopImmediatePropagation() Function 忽略當前元素尚未執行的的事件處理函數；終止事件在元素樹種的傳播
stopPropagation() Function 執行完當前元素的所有事件處理函數後；終止事件在元素樹中的繼續傳播
target Element 事件的目標
currentTarget Element 其事件處理常式當前正在處理事件的那個元素
當前執行的事件處理函數所綁定在的那個元素對象！
注意：在事件處理常式內部，this始終等於currentTarget的值，而target則只包含事件的實際目標
type String 被觸發的事件的類型
7、事件委託
正常思路：
直接將事件處理函數綁定到事件目標上！
事件委託：
將事件處理函數委託給他們的祖先對象！
事件冒泡！
退一步，海闊天空！
注意點：
事件類型必須要支援事件冒泡！
大家最好將委派物件選擇為 是舉例事件目標近一點的！
jQuery-理解事件
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
