前言:一、理解事件 1、什么是事件 事件是Web瀏覽器通知應(yīng)用程序（比如我們的js）發(fā)生了某個事情！ 我們可以為這些特定的事情，事先安排好處理方案，這樣就能夠?qū)崿F(xiàn)互動！ 2、事件目標(biāo) 你可以簡單的理解為事件發(fā)生在的最具體的那個目標(biāo)元素即為事件目標(biāo)，有時也可能是document或者window! 3、事件類型 事件類型是一個用來說明發(fā)生了什么類型事件的字符串，你可以簡單的理解為事件
一、理解事件
1、什么是事件
事件是Web瀏覽器通知應(yīng)用程序（比如我們的js）發(fā)生了某個事情！
我們可以為這些特定的事情，事先安排好處理方案，這樣就能夠?qū)崿F(xiàn)互動！
2、事件目標(biāo)
你可以簡單的理解為事件發(fā)生在的最具體的那個目標(biāo)元素即為事件目標(biāo)，有時也可能是document或者window!
3、事件類型
事件類型是一個用來說明發(fā)生了什么類型事件的字符串，你可以簡單的理解為事件的名字！
常見的事件類型有哪些？
1）常用的與瀏覽器有關(guān)的事件類型：
①resize
當(dāng)窗口或者框架的大小變化時在window對象上或框架上觸發(fā)
②scroll
當(dāng)用戶滑動（滾動）帶有滾動條的元素中的內(nèi)容時在該元素上觸發(fā)
滑動整個頁面會在document以及window上觸發(fā)
③error
當(dāng)發(fā)生JavaScript錯誤時在window上面觸發(fā)，當(dāng)無法加載圖像時在<img>元素上面觸發(fā)，當(dāng)無法加載嵌入內(nèi)容時在<object>
元素上面觸發(fā)，或者當(dāng)有一或多個框架無法加載時在框架集上面觸發(fā)
2）常用的與文檔加載有關(guān)的事件類型：
①load
當(dāng)頁面完全加載后（包括所有圖像、JavaScript文件、CSS文件等外部資源）在window對象上觸發(fā)。
當(dāng)所有的框架都加載完畢的時候會在框架集上面觸發(fā)，
當(dāng)圖像加載完畢時會在img元素上面觸發(fā)
使用object元素嵌入的內(nèi)容加載完畢時會在object元素上觸發(fā)
說白了：等內(nèi)容（包括外部資源）加載完畢之后，在對應(yīng)的元素對象上面觸發(fā)
②beforeunload
會在window對象上面觸發(fā)這個事件，讓開發(fā)人員有可能在頁面卸載前阻止這一操作。
這個事件會在瀏覽器卸載頁面之前觸發(fā)，可以通過它來取消卸載并繼續(xù)使用原有頁面。
將事件對象的returnValue 屬性設(shè)置為要顯示給用戶的內(nèi)容，并且將其返回才能夠?qū)崿F(xiàn)兼容各種瀏覽器;
3）常用的與表單有關(guān)的事件類型：
①blur
在元素失去焦點時在對應(yīng)的元素上觸發(fā)，該事件不會冒泡
②focus
在元素獲得焦點時觸發(fā)在對應(yīng)的元素上，這個事件不會冒泡
③select
當(dāng)用戶選擇文本框（<input>或<texterea>）中的一或多個字符時，在對應(yīng)的元素上觸發(fā)
④change
對于<input>和<textarea>元素，在它們失去焦點且value 值改變時在對應(yīng)元素上觸發(fā)
對于<select>元素，在其選項改變時在select元素上觸發(fā)
⑤submit
瀏覽器會在將請求發(fā)送給服務(wù)器之前在對應(yīng)的表單上觸發(fā)submit事件
focusin與focusout作用同focus以及blur,區(qū)別 前者 是支持事件冒泡的！
4）常用的與鍵盤有關(guān)的事件類型：
①keydown
當(dāng)用戶按下鍵盤上的任意鍵時觸發(fā)，而且如果按住不放的話，會重復(fù)觸發(fā)此事件
事件對象中keyCode屬性表示 鍵碼
②keyup
當(dāng)用戶釋放鍵盤上的鍵時觸發(fā)
③keypress
當(dāng)用戶按下鍵盤上的字符鍵時觸發(fā)，而且如果按住不放的話，會重復(fù)觸發(fā)此事件
事件對象中charCode屬性表示 ASCII碼
5）常用的與鼠標(biāo)有關(guān)的事件類型：
我們的與鼠標(biāo)有關(guān)的事件類型，最能體現(xiàn)”事件傳播“,由于我們后面需要專門的一節(jié)課來學(xué)習(xí)”事件傳播“，
所以說，我們這節(jié)課在講鼠標(biāo)有關(guān)的事件類型的時候，我們先避開”事件傳播“這個概念！
①click
在用戶點擊鼠標(biāo)或者按下回車鍵時或者移動用戶觸摸時觸發(fā)
②dblclick
在用戶雙擊鼠標(biāo)時觸發(fā)
③mousedown
按下鼠標(biāo)按鍵時，會發(fā)生 mousedown 事件
與 click 事件不同，mousedown 事件僅需要按鍵被按下，而不需要松開即可發(fā)生
④mouseup
在用戶釋放鼠標(biāo)按鈕時觸發(fā)
⑤mouseenter
在鼠標(biāo)光標(biāo)從元素外部移動到元素范圍之內(nèi)時觸發(fā),這個事件不冒泡
⑥mouseleave
在位于元素上的鼠標(biāo)光標(biāo)移動到元素范圍之外時觸發(fā),這個事件不冒泡
⑦mouseover
在鼠標(biāo)指針移入一個元素邊界之內(nèi),或者移入任何后代元素時觸發(fā)
⑧mouseout
鼠標(biāo)從當(dāng)前元素移動到其他元素時觸發(fā)（哪怕移動到的元素是當(dāng)前元素的后代元素或者離開任何后代元素）
⑨mousemove
當(dāng)鼠標(biāo)指針在元素內(nèi)部移動時重復(fù)地觸發(fā)
4、事件處理程序(事件監(jiān)聽程序)
其實事件一直在發(fā)生，有人會問為什么我沒感覺到？因為你沒有為事件作出響應(yīng)！怎么作出響應(yīng)？
為"元素"綁定對應(yīng)的事件處理程序（一個函數(shù)，當(dāng)具體的元素上發(fā)生對應(yīng)的事件時的就會觸發(fā)這個函數(shù)的執(zhí)行）
綁定的這個函數(shù)我們可以稱為事件處理程序！
我們通過DOM對象的addEventListener方法來為具體的目標(biāo)綁定對應(yīng)的事件處理函數(shù)
Internet Explorer 8 及更早IE版本不支持 addEventListener() ，Opera 7.0 以及更早版本也不支持。
當(dāng)然我們目前只是用這個原生的方法演示一下即可，后面我們jQuery會提供一個兼容各種瀏覽器的方法!
addEventListener()參數(shù)說明：
eventType：字符串，表示監(jiān)聽的事件類型
function：事件在預(yù)定目標(biāo)發(fā)生時，執(zhí)行的函數(shù)
useCapture：(可選)布爾值，是否注冊到捕獲階段，默認(rèn)false
5、事件傳播（事件流）
事件傳播指的是事件在頁面中傳播的順序（事件流）
既然可能有很多個元素一齊發(fā)生了同樣的事件，那么總該有個先后順序吧？
事件傳播描述的是從頁面中接收事件的順序。有意思的是，IE 和Netscape開發(fā)團(tuán)隊在當(dāng)時居然提出了差不多是完全相反的事件流的概念。
當(dāng)時IE開發(fā)團(tuán)隊提出的的事件傳播順序為事件冒泡，而Netscape公司提出的事件傳播順序為事件捕獲。
IE開發(fā)團(tuán)隊提出的的事件傳播順序：事件冒泡
即事件開始是由最具體的元素（文檔中嵌套層次最深的那個節(jié)點）接收，然后逐級向上傳播到較為不具體的節(jié)點（文檔）
Netscape公司提出的事件傳播順序：事件捕獲
事件捕獲的思想是不太具體的節(jié)點應(yīng)該更早接收到事件，而最具體的節(jié)點應(yīng)該最后接收到事件。
“捕獲”的用意在于在于一層一級的往里找，在找的過程中把事件依次傳播給它們，直到找到具體的事件目標(biāo)。
老版本的ie瀏覽器不支持（ie9以下的ie版本）
W3C規(guī)定的事件傳播方式(我們可以稱為DOM事件傳播,或DOM事件流)
事件傳播有三個階段：事件捕獲階段、處于目標(biāo)階段和事件冒泡階段
事件捕獲階段：如果有綁定在事件捕獲階段的處理函數(shù)則按照捕獲的順序執(zhí)行
處于目標(biāo)階段：如果有直接綁定在事件目標(biāo)上的處理函數(shù)則按照綁定的先后順序來執(zhí)行（不管addEventListener的第三個參數(shù)是true還是false）
事件冒泡階段：如果有綁定在事件冒泡階段的處理函數(shù)則按照冒泡的順序執(zhí)行
PS:并不是所有的事件類型都支持事件冒泡！低版本的ie瀏覽器也沒有捕獲這個階段！
一堆爛攤子，坐等我們后面jQuery來解決這個問題！
6、事件對象
當(dāng)我們事件處理函數(shù)執(zhí)行的時候，我們的事件處理函數(shù)會接受到參數(shù)->事件對象，我們使用一個變量接受即可
當(dāng)然低版本的ie瀏覽器是接受不到的，并且事件對象內(nèi)的一些屬性名稱和W3C規(guī)定的標(biāo)準(zhǔn)的屬性名稱也可能不一致！
事件對象內(nèi)部，包含了與該事件類型以及目標(biāo)有關(guān)的數(shù)據(jù)，不同的事件類型，包含的屬性以及方法可能也不太一樣！
bubbles Boolean 表明事件是否冒泡
preventDefault() Function 取消事件的默認(rèn)行為。如果cancelable是true，則可以使用這個方法
stopImmediatePropagation() Function 忽略當(dāng)前元素尚未執(zhí)行的的事件處理函數(shù)；終止事件在元素樹種的傳播
stopPropagation() Function 執(zhí)行完當(dāng)前元素的所有事件處理函數(shù)后；終止事件在元素樹中的繼續(xù)傳播
target Element 事件的目標(biāo)
currentTarget Element 其事件處理程序當(dāng)前正在處理事件的那個元素
當(dāng)前執(zhí)行的事件處理函數(shù)所綁定在的那個元素對象！
注意：在事件處理程序內(nèi)部，this始終等于currentTarget的值，而target則只包含事件的實際目標(biāo)
type String 被觸發(fā)的事件的類型
7、事件委托
正常思路：
直接將事件處理函數(shù)綁定到事件目標(biāo)上！
事件委托：
將事件處理函數(shù)委托給他們的祖先對象！
事件冒泡！
退一步，海闊天空！
注意點：
事件類型必須要支持事件冒泡！
大家最好將委托對象選擇為 是舉例事件目標(biāo)近一點的！
二、jQuery事件處理
1、jQuery為事件處理做了什么？
jQuery為事件處理做了很多處理
經(jīng)過上一點的學(xué)習(xí)我們知道為元素綁定事件處理函數(shù)可以使用addEventListener方法，但是低版本的ie瀏覽器非常“任性”，根本不支持
這個方法，它有自己專有的方法來綁定事件處理函數(shù)，以及它產(chǎn)生的事件對象和W3C規(guī)定的也有很多出入！（這個專有方法我們本課程不
做介紹，一個原因是jQuery為我們提供了更好的兼容各瀏覽器的方法，另外一個原因就是抵制低版本的ie瀏覽器，人人都有責(zé)任?。?/div>
還有就是低版本的ie瀏覽器根本不支持W3C規(guī)定的事件流，因為它們不支持其中的事件捕獲階段！
這么一大堆爛攤子，jQuery該如何面對呢？
我們偉大的jQuery竭盡全力的把瀏覽器之間的不一致從咱們眼前隱藏起來，從而使我們使用起來更加簡單，方便！
jQuery針對事件處理為我們做了很多：
提供綁定事件處理程序的統(tǒng)一方法
由于低版本ie不支持事件捕獲階段，因此我們通過jQuery綁定事件處理程序，都不會綁定在捕獲階段！
可以在每個元素上為每個事件類型建立多個處理程序
采用標(biāo)準(zhǔn)的事件類型名稱（也就是我們上面列出的）
事件對象作為事件處理程序的參數(shù)
對事件對象中最常用的屬性以及事件對象中常用的方法進(jìn)行規(guī)范化
接下來我們一起來愉快的學(xué)習(xí)！
2、綁定事件處理函數(shù)
1）使用on方法綁定事件處理函數(shù)
從jQuery1.7版本開始，on() 方法是將事件處理程序綁定到文檔的首選方法！
使用說明：
1> jQuery對象.on('事件類型'[,選擇器][,數(shù)據(jù)],handler(eventObject) )
事件類型：
一個或多個空格分隔的事件類型和可選的命名空間
選擇器：
一個選擇器字符串，用于過濾出被選中的元素中能觸發(fā)事件的后代元素。如果選擇器是 null 或者忽略了該選擇器，
那么被選中的元素總是能觸發(fā)事件
傳入選擇器就代表，在綁定目標(biāo)的后代范圍內(nèi)，與選擇器相匹配的元素在發(fā)生指定事件類型時
才會執(zhí)行這個處理函數(shù)！
傳不傳選擇器，完全就是兩個世界！傳入選擇器會非常的強(qiáng)大！
數(shù)據(jù)：
如果data參數(shù)傳給.on()并且不是null 或者 undefined，那么每次觸發(fā)事件時，data參數(shù)都傳遞給處理程序。data
參數(shù)可以是任何類型，但如果是字符串類型時，那么selector參數(shù)必須提供，或明確地傳遞null，這樣的 data 參
數(shù)不會誤認(rèn)為是選擇器。最好是使用一個對象（鍵值對） ，所以可以作為屬性傳遞多個值
事件處理函數(shù)：
事件被觸發(fā)時，執(zhí)行的函數(shù)。若該函數(shù)只是要執(zhí)行return false的話，那么該參數(shù)位置可以直接簡寫成 false
2> jQuery對象.on(對象[,選擇器] [,數(shù)據(jù)] )
!****對于直接事件而言，處理程序內(nèi)部的this 代表綁定事件的元素對象。對于委托事件而言，this 則代表了與 selector 相匹配的元素對象
移除on方法綁定的事件處理函數(shù)：
off方法
使用說明：
1> off( events [, selector ] [, handler ] )
events：一個或多個空格分隔的事件類型和可選的命名空間，或僅僅是命名空間
selector：一個選擇器，當(dāng)綁定事件處理程序時匹配最初傳遞給 .on()的那個
handler：事件處理函數(shù)
2> off( 事件對象 )
將事件對象傳入，此方法適合在事件處理函數(shù)內(nèi)部，移除自己
3> off()
移除匹配結(jié)果集，所有的事件處理函數(shù)
2）使用bind方法綁定事件處理函數(shù)
在之前的jQuery版本里面，bind的方法是最常用的用來綁定事件處理函數(shù)的方法！
相當(dāng)于是on方法的弱化版，on方法是bind方法的加強(qiáng)版！
bind方法不可以傳入選擇器，這個方法的內(nèi)部本身并沒有 事件委托的思路在里面！
使用說明：
1> jQuery對象.bind('事件類型',[數(shù)據(jù),]事件處理函數(shù))
事件類型：
一個或多個空格分隔的事件類型和可選的命名空間
事件處理函數(shù)：
事件被觸發(fā)時，執(zhí)行的函數(shù)。若該函數(shù)只是要執(zhí)行return false的話，那么該參數(shù)位置可以直接簡寫成 false
2> jQuery對象.bind('事件類型',布爾值)
用來阻止事件默認(rèn)行為，以及冒泡
3> jQuery對象.bind(對象,[數(shù)據(jù),] )
移除bind方法綁定的事件處理函數(shù)：
unbind方法
使用說明：
1> unbind( [eventType ] [, handler(eventObject) ] )
events：一個或多個空格分隔的事件類型和可選的命名空間，或僅僅是命名空間
handler：事件處理函數(shù)
2> unbind(事件對象)
將事件對象傳入，此方法適合在事件處理函數(shù)內(nèi)部，移除自己
3> unbind()
移除匹配結(jié)果集，所有的事件處理函數(shù)
3）使用one方法綁定事件處理函數(shù)
為元素的事件添加處理函數(shù)。處理函數(shù)在每個元素上每種事件類型只執(zhí)行一次
使用方法與on方法相同
區(qū)別：綁定的事件處理函數(shù)，僅執(zhí)行一次即移除！
其他的一些綁定事件的函數(shù)，已經(jīng)過時，不再建議使用，以上3個方法足夠我們使用了！
3、名詞解釋：
命名空間：
這邊的命名空間你可以理解為“類別”，即給添加的各種事件類型“人工分類”，只需要在事件類型名字后用點接
上有一個分類名字即可，以下劃線開頭的命名空間是供 jQuery 使用的，所以我們不要將名字以下劃線開頭即可。
一個事件類型可以屬于多個命名空間，是不分層次的。
作用：簡化、靈活的刪除或觸發(fā)事件
jQuery事件對象：
jQuery事件對象作為事件處理程序的參數(shù)，對原生事件對象中最常用的屬性以及事件對象中常用的方法進(jìn)行規(guī)范化
成員如下：
currentTarget 這個屬性總是等于函數(shù)的this
target 觸發(fā)事件的事件目標(biāo)
data 返回綁定事件時傳遞給綁定方法的可選數(shù)據(jù)參數(shù)
pageX 相對于頁面左上角的鼠標(biāo)位置
pageY
preventDefault() 阻止當(dāng)前時間的默認(rèn)行為
stopImmediatePropagation() 阻止剩余的事件處理函數(shù)執(zhí)行并且防止事件冒泡到DOM樹上
stopPropagation() 防止事件冒泡到DOM樹上，也就是不觸發(fā)的任何前輩元素上的事件處理函數(shù)
originalEvent 未經(jīng)jQuery加工的原始的DOM Event對象
isDefaultPrevented() 若已經(jīng)調(diào)用過preventDefault()方法則返回true
isImmediatePropagationStopped() 若已經(jīng)調(diào)用過stopImmediatePropagation()方法則返回true
isPropagationStopped() 若已經(jīng)調(diào)用stopPropagation()方法則返回true
relatedTaregt 僅對鼠標(biāo)事件有效，返回該鼠標(biāo)事件有關(guān)的元素
result 事件被觸發(fā)的一個事件處理程序的最后返回值
timeStamp 這個屬性返回事件觸發(fā)時距離1970年1月1日的毫秒數(shù)
type 事件類型
which 針對鍵盤和鼠標(biāo)事件，這個屬性能確定你到底按的是哪個鍵
對于keydown返回鍵碼，對于keypress返回ASCII碼
三、jQuery人工調(diào)用事件處理函數(shù)
我們可以通過代碼手動的觸發(fā)綁定在元素上的事件處理函數(shù)的執(zhí)行，而無需真正的事件發(fā)生！
1、trigger方法
使用說明：
trigger( eventType [, extraParameters ] )
eventType：一個包含JavaScript事件類型的字符串，比如click 或 submit，也可以在后面接上命名空間
extraParameters：類型: Array 或 PlainObject
在執(zhí)行事件處理函數(shù)時傳遞給事件處理程序的數(shù)據(jù)
接受方法：處理函數(shù)那邊使用一個變量接收即可！
2、triggerHandler方法
使用說明：
1）triggerHandler( eventType [, extraParameters ] )
同上
這個方法的行為與 .trigger() 相似，不同之處有如下幾點：
1>triggerHandler() 和真實的事件發(fā)生不一樣，僅僅是觸發(fā)綁定的函數(shù)執(zhí)行，至于其他的默認(rèn)行為都會忽略，并且也不會事件傳播
2>trigger() 會影響所有與 jQuery 對象相匹配的元素，而 .triggerHandler() 僅影響第一個匹配到的元素
3>與普通的方法返回 jQuery 對象(這樣就能夠使用鏈?zhǔn)接梅?不同，triggerHandler() 返回最后一個處理的事件的返回值。如果沒有
觸發(fā)任何事件，會返回 undefined
補(bǔ)充:自定義事件：
我們可以自己定義一些事件類型，這些事件類型不會由瀏覽器通知給應(yīng)用程序，而是我們通過trigger或者triggerHandler方法觸發(fā)！
四、jQuery綁定事件處理函數(shù)的快捷方法
blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover,
mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error
使用方法，直接對選中的元素：調(diào)用對應(yīng)的快捷方法即可！
$('form input').focusin(function(){
//作用同focus,但是也有區(qū)別 focusin冒泡
console.log('光標(biāo)移動到我上面了');
});
$('a').click(function(jqE){
console.log('嘿嘿！');
jqE.preventDefault();
});
補(bǔ)充：hover方法
同時綁定 mouseenter和 mouseleave事件，使用更加方便
使用方法一：.hover( handlerIn(eventObject), handlerOut(eventObject) )
使用方法二：也可以只傳一個函數(shù)
轉(zhuǎn)載請注明出處及附上該鏈接：http://ebqao.cn/web/198.html
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
上一篇:<<CSS3里面動畫效果有哪些 下一篇:jQuery特效與隊列>>
支付寶掃碼：