第六章 jQuery架構事件處理
JavaScript以事件驅動來實作頁面的互動，其核心是
以消息為基礎，以事件來驅動。
雖然利用傳統的JavaScript事件處理方式也能夠完成頁面互動，但jQuery架構增加并擴充了基本的事件處理機制，jQuery架構提供了更加優雅的事件處理文法，并極大的增強了事件處理能力。
6.1 事件處理簡單說明
jQuery架構在JavaScript的基礎上進一步封裝了不同類型的事件模型，形成了一套更強大和優雅的“jQuery事件模型”。
jQuery中的事件模型表現出以下特征：
① 使用DOM事件模型中标準的事件類型名稱。
② 統一了事件進行中的各種方法。
③ 允許為每個元素的每個事件類型建立多個處理程式。
④ 統一了事件對象的傳遞方法并規範了事件對象的常用屬性和方法。
⑤ 為事件管理和操作提供了統一的方法。
6.2 綁定事件
在jQuery中，我們可以有多種方式來為标簽綁定事件，可以簡單的區分為
專用方法
綁定事件和
快捷方法
綁定事件。
① 快捷方法綁定事件
jQuery架構中定義了24個快捷方法來為标簽綁定特定類型的事件，這些方法和二級事件模型中的事件類型對應，名稱相同。
具體的快捷方法如下：
| blur() 當元素失去焦點時發生 blur 事件 change() 當元素的值發生改變時，會發生 change 事件 click() 當點選元素時，會發生 click 事件 dbclick() 當輕按兩下元素時，會發生 dblclick 事件 error() 當元素遇到錯誤（沒有正确載入）時，發生 error 事件 focus() 當元素獲得焦點時，發生 focus 事件 focusin() 當元素獲得焦點時，發生 focusin 事件(包括子元素) focusout() 當元素失去焦點時，發生 focusout事件(包括子元素) keydown() 當按鍵被按下時，發生 keydown 事件 keyup() 當按鍵被松開時，發生 keyup 事件 keypress() 當按鍵被按下時，發生 keypress事件（響應每個字元） mouseenter()當滑鼠指針穿過元素時，會發生 mouseenter 事件 mouseleave()當滑鼠指針離開元素時，會發生 mouseleave 事件 mouseover() 當滑鼠指針位于元素上方時，會發生 mouseover 事件 mouseout() 當滑鼠指針從元素上移開時，會發生 mouseout 事件 mousedown() 當滑鼠進入元素，并按下按鍵時，會發生mousedown事件 mouseup() 當在元素上放松滑鼠按鈕時，會發生 mouseup 事件 mousemove() 當滑鼠在指定的元素中移動時，會發生 mousemove 事件 resize() 當調整浏覽器視窗的大小時，發生 resize 事件 scroll() 當使用者滾動指定的元素時，會發生 scroll 事件 select() 當文本被選擇時，會發生 select 事件 submit() 當送出表單時，會發生 submit 事件(表單) load() 當指定的元素（及子元素）已加載時，會發生load事件 unload() 當使用者離開頁面時，會發生 unload 事件(1.8-) |
② 專用方法綁定事件
jQuery中可以使用四種專用方法來綁定事件，分别是
bind方法、live方法、delegate方法和on方法
,每個版本各有差別，建議使用on方法。
補充說明
| bind方法适用于所有的版本，1.7+ 推薦使用on方法來代替。 live方法适用于 1.9- 的版本，1.9+ 版本使用on方法來代替。 delegate方法适用于1.4.2 + 的版本。 on方法适用于1.7+ 的版本，1.7+ 用于替代bind和live方法。 |
on方法
為指定的元素添加一個或者是多個事件，并規定這些事件發生時指定的函數。
on方法的文法：
on（eventType,childselector,data,function）
參數說明：
eventType：必傳參數，指定事件的類型如click等。
childselector：可選參數，用于事件委托。
data：可選參數，設計需要傳遞的資料。
function：必傳參數，事件發生時，執行的函數。
示例代碼
1 //【1】使用快捷方法來給按鈕添加點選事件
2 $("button").click(function () {
3 console.log("點選了按鈕---1");
4 });
5 $("button").click(function () {
6 console.log("點選了按鈕---2");
7 });
8 //【2】使用on方法來給按妞添加點選事件
9 $("button").on("click",{name:"wendingding"},function (event)
10 {
11 console.log("點選了按鈕----on");
12 console.log(event.data.name);
13 }) 擴充：one方法的使用
one方法
是on方法中的一種特殊使用方式，由one方法綁定的事件在執行一次響應之後就會失效。其設計思路是：在事件處理函數的内部登出目前事件
擴充：事件委托說明
事件委托
是開發中常見的綁定事件方式，參考代碼如下。
1 //思考:如何能夠找到所有的span标簽(已經存在的 + 尚未建立的)
2 //第一個參數:事件的類型
3 //第二個參數:給誰添加事件
4 //第三個參數:事件發生的回調函數
5 $("div").on("click","span",function () {
6 console.log("點選了标簽");
7 }) 6.3 登出事件
有時候我們需要把一些元素的綁定事件登出，可以使用off方法來登出事件。
登出事件的方法和注冊事件的方法是相反的操作，參數和用法基本相同。
off方法
的使用示例
1 //登出button标簽上面的所有點選事件
2 $("button").off("click");
3 //登出button标簽上面指定的滑鼠移入事件,fn為綁定移入事件時的函數
4 $("button").off("mouseenter",fn); 6.4 事件對象
在注冊事件的時候，event對象執行個體将作為第一個參數傳遞給事件的回調函數，這和DOM事件模型是完全相同的。另外，jQuery統一了IE事件模型和DOM事件模型中event對象屬性和方法的用法，使其符合DOM标準事件模型的規範。
在事件處理函數（回調函數）中，我們可以擷取事件對象的相關資訊。
1 $("button").on("click",{name:"zs"},function (event) {
2 console.log("點選了按鈕----2");
3 //擷取事件的類型
4 console.log(event.type);
5 //擷取目标對象
6 console.log(event.target);
7 //擷取被省略的對象
8 console.log(event.data);
9 }) 6.5 事件冒泡
事件冒泡的簡單解釋：如果某個标簽的事件被觸發，那麼該标簽父标簽上被注冊的相同類型事件也會被觸發，并且會依次一直冒泡到頂端。
1 <html lang="en">
2 <head>
3 <meta charset="UTF-8">
4 <title>Title</title>
5 <script src="js/jquery-3.2.1.js"></script>
6 <style>
7 .box1{
8 width: 300px;
9 height: 300px;
10 background: red;
11 }
12 .box2{
13 width: 200px;
14 height: 200px;
15 background: green;
16 }
17 .box3{
18 width: 100px;
19 height: 100px;
20 background: yellow;
21 }
22 </style>
23 </head>
24 <body>
25 <script>
26 $(function () {
27 $(".box1").click(function () {
28 console.log("點選了box1");
29 })
30 $(".box2").click(function (e) {
31 console.log("點選了box2");
32 //e.stopPropagation(); //return false;
33 });
34 $(".box3").click(function () {
35 console.log("點選了box3");
36 })
37 })
38 </script>
39 <div class="box1">
40 <div class="box2">
41 <div class="box3"></div>
42 </div>
43 </div>
44 </body>
45 </html> 阻止事件冒泡的兩種方式：
【1】在回調函數中傳回false。
【2】調用事件對象的stopPropagation方法。
6.6 觸發事件和預設行為
預設行為
預設行為
：頁面中的一些标簽常常存在預設的行為，比如表單的submit事件類型，如果該類型的事件被觸發，則會導緻表單的送出；比如a标簽存在跳轉網頁連接配接的預設行為等。如果需要在事件被觸發的時候，阻止标簽預設的行為，可以考慮在處理函數内部調用事件對象的
preventDefault()
方法。
觸發事件
觸發事件
：頁面中标簽的事件都是在特定條件下發生的，是以不同類型的事件觸發時間其實無法預測。但有的時候，我們可能需要控制事件發生的時機。這時候，可以考慮使用
trigger()
或者是
triggerHandler()
方法來觸發事件。
文法說明：
trigger(type),[data]
triggerHandler(type),[data]
type參數表示事件的類型，以字元串的形式傳遞。
data參數是可選的，利用該參數可以向事件的回調函數傳遞額外的資料。
代碼示例：
1 $(".box3").trigger("click");
2 $("input").triggerHandler("click"); trigger和triggerHandler方法的對比
① triggerHandler方法不會觸發标簽的預設事件。
② triggerHandler方法隻會觸發jQ執行個體對象集合中第一個元素的事件回調。
③ triggerHandler方法傳回的是事件回調函數的傳回值，而非jQ對象。
- Posted by 部落格園· 文頂頂 ~ 文頂頂的個人部落格_花田半畝
- 聯系作者 簡書· 新浪微網誌·
- 原創文章，版權聲明：自由轉載-非商用-非衍生-保持署名 |
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)