jQuery系列第六章 jQuery框架事件處理

時間 2019-11-05

原文原文鏈接

第六章 jQuery框架事件處理

JavaScript以事件驅動來實現頁面的交互，其核心是以消息爲基礎，以事件來驅動。雖然利用傳統的JavaScript事件處理方式也可以完成頁面交互，但jQuery框架增長並擴展了基本的事件處理機制，jQuery框架提供了更加優雅的事件處理語法，並極大的加強了事件處理能力。
html

6.1 事件處理簡單說明

jQuery框架在JavaScript的基礎上進一步封裝了不一樣類型的事件模型，造成了一套更強大和優雅的「jQuery事件模型」。jquery

jQuery中的事件模型表現出如下特徵：瀏覽器

① 使用DOM事件模型中標準的事件類型名稱。
② 統一了事件處理中的各類方法。
③ 容許爲每一個元素的每一個事件類型創建多個處理程序。
④ 統一了事件對象的傳遞方法並規範了事件對象的經常使用屬性和方法。
⑤ 爲事件管理和操做提供了統一的方法。框架

6.2 綁定事件

在jQuery中，咱們能夠有多種方式來爲標籤綁定事件，能夠簡單的區分爲專用方法綁定事件和快捷方法綁定事件。函數

① 快捷方法綁定事件spa

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-)

② 專用方法綁定事件code

jQuery中可使用四種專用方法來綁定事件，分別是bind方法、live方法、delegate方法和on方法,每一個版本各有區別，建議使用on方法。htm

補充說明

      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 博客園·文頂頂 ~ 文頂頂的我的博客_花田半畝
聯繫做者簡書·文頂頂新浪微博·文頂頂
原創文章，版權聲明：自由轉載-非商用-非衍生-保持署名 | 文頂頂

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

jQuery系列 第六章 jQuery框架事件處理