jQuery - Events Handling

我們可以使用事件創建動態網頁。事件是可由Web應用程式檢測的操作。

以下是事件的示例−

A mouse click
A web page loading
Taking mouse over an element
Submitting an HTML form
A keystroke on your keyboard, etc.

當這些事件被觸發時，您可以使用一個自定義函數對事件執行幾乎任何您想要的操作。這些自定義函數調用事件處理程序。

Binding Event Handlers

使用jQuery事件模型，我們可以使用bind（）方法在DOM元素上建立事件處理程序，如下所示−

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $('div').bind('click', function( event ){
               alert('Hi there!');
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on any square below to see the result:</p>
		
      <div class = "div" style = "background-color:blue;">ONE</div>
      <div class = "div" style = "background-color:green;">TWO</div>
      <div class = "div" style = "background-color:red;">THREE</div>
   </body>
</html>

此代碼將使division元素響應click事件;此後，當用戶在該division內單擊時，將顯示警報。

這將產生以下結果&負;

bind（）命令的完整語法如下所示−

selector.bind( eventType[, eventData], handler)

下面是對參數的描述−

event type−包含JavaScript事件類型的字符串，例如click或submit。有關事件類型的完整列表，請參閱下一節。
event data−這是可選參數，是將傳遞給事件處理程序的數據映射。
處理程序−每次觸發事件時執行的函數。

Removing Event Handlers

通常，一旦建立了事件處理程序，它將在頁面的剩餘生命周期內保持有效。可能需要刪除事件處理程序。

jQuery提供了unbind（）命令來刪除現有的事件處理程序。unbind（）的語法如下−

selector.unbind(eventType, handler)

or 

selector.unbind(eventType)

下面是對參數的描述−

event type−包含JavaScript事件類型的字符串，例如click或submit。有關事件類型的完整列表，請參閱下一節。
handler−如果提供，則標識要刪除的特定偵聽器。

Event Types

The following are cross platform and recommended event types which you can bind using JQuery −

Sr.No.	Event Type & Description
1	模糊在元素失去焦點時發生。
2	改變在元素更改時發生。
3	點擊在滑鼠單擊時發生。
4	dblclick公司在滑鼠雙擊時發生。
5	錯誤在加載或卸載等過程中出錯時發生。
6	聚焦在元素獲得焦點時發生。
7	按鍵按鍵時發生。
8	按鍵在按下並釋放鍵時發生。
9	鑰匙扣在釋放密鑰時發生。
10	裝載在加載文檔時發生。
11	摩澤敦在按下滑鼠按鈕時發生。
12	穆塞特當滑鼠進入元素區域時發生。
13	穆塞萊夫當滑鼠離開元素區域時發生。
14	滑鼠移動在滑鼠指針移動時發生。
15	滑鼠懸停當滑鼠指針移出元素時發生。
16	滑鼠懸停當滑鼠指針移到元素上時發生。
17	滑鼠組在釋放滑鼠按鈕時發生。
18	調整大小在調整窗口大小時發生。
19	捲軸在滾動窗口時發生。
20	選擇在選定文本時發生。
21	提交提交表單時發生。
22	卸載在卸載文檔時發生。

The Event Object

回調函數接受單個參數;調用處理程序時，JavaScript事件對象將通過它傳遞。

事件對象通常是不必要的，參數也被省略，因爲當處理程序被綁定來確切知道在處理程序被觸發時需要做什麼時，通常有足夠的上下文可用，但是有一些屬性需要訪問。

The Event Attributes

The following event properties/attributes are available and safe to access in a platform independent manner −

Sr.No.	Property & Description
1	阿爾特基如果在觸發事件時按了Alt鍵，則設置爲true;否則設置爲false。Alt鍵在大多數Mac鍵盤上被標記爲Option。
2	克特爾基如果在觸發事件時按了Ctrl鍵，則設置爲true;否則設置爲false。
3	數據該值（如果有）在建立處理程序時作爲第二個參數傳遞給bind（）命令。
4	密碼對於keyup和keydown事件，這將返回按下的鍵。
5	元鍵如果在觸發事件時按下元鍵，則設置爲true;否則設置爲false。元鍵是PCs上的Ctrl鍵和Macs上的Command鍵。
6	第頁對於滑鼠事件，指定事件相對於頁面原點的水平坐標。
7	我不知道。我不知道。對於滑鼠事件，指定事件相對於頁面原點的垂直坐標。
8	相關目標對於某些滑鼠事件，標識觸發事件時光標離開或輸入的元素。
9	螢幕X 對於滑鼠事件，指定事件相對於螢幕原點的水平坐標。
10	絲網對於滑鼠事件，指定事件相對於螢幕原點的垂直坐標。
11	移位鍵如果在觸發事件時按下了Shift鍵，則設置爲true;否則設置爲false。
12	目標標識爲其觸發事件的元素。
13	時間戳創建事件時的時間戳（以毫秒爲單位）。
14	類型對於所有事件，指定觸發的事件類型（例如，單擊）。
15	哪個對於鍵盤事件，指定導致事件的鍵的數字代碼;對於滑鼠事件，指定按了哪個按鈕（1表示左，2表示中，3表示右）。

Live Demo

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $('div').bind('click', function( event ){
               alert('Event type is ' + event.type);
               alert('pageX : ' + event.pageX);
               alert('pageY : ' + event.pageY);
               alert('Target : ' + event.target.innerHTML);
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on any square below to see the result:</p>
		
      <div class = "div" style = "background-color:blue;">ONE</div>
      <div class = "div" style = "background-color:green;">TWO</div>
      <div class = "div" style = "background-color:red;">THREE</div>
   </body>
</html>

這將產生以下結果&負;

The Event Methods

有一個方法列表，可以對事件對象調用它−

Sr.No.	Method & Description
1	preventDefault() 阻止瀏覽器執行默認操作。
2	isDefaultPrevented() 返回是否在此事件對象上調用過event.preventDefault（）。
3	stopPropagation() 停止事件到父元素的冒泡，防止任何父處理程序收到事件通知。
4	isPropagationStopped() 返回是否在此事件對象上調用了event.stopPropagation（）。
5	stopImmediatePropagation() 停止執行其餘處理程序。
6	isImmediatePropagationStopped() 返回是否曾對此事件對象調用event.stopImmediatePropagation（）。

Event Manipulation Methods

下表列出了與事件相關的重要方法;

Sr.No.	Method & Description
1	bind( type, [data], fn ) 爲每個匹配的元素將處理程序綁定到一個或多個事件（如單擊）。也可以綁定自定義事件。
2	off( events [, selector ] [, handler(eventObject) ] ) 這與live相反，它移除綁定的live事件。
3	hover( over, out ) 模擬懸停，例如在對象上移動和關閉滑鼠。
4	on( events [, selector ] [, data ], handler ) 將處理程序綁定到所有當前和未來匹配元素的事件（如單擊）。也可以綁定自定義事件。
5	one( type, [data], fn ) 將處理程序綁定到一個或多個事件，以便對每個匹配的元素執行一次。
6	ready( fn ) 綁定一個在DOM準備好被遍歷和操作時要執行的函數。
7	trigger( event, [data] ) 在每個匹配的元素上觸發事件。
8	triggerHandler( event, [data] ) 觸發元素上的所有綁定事件處理程序。
9	unbind( [type], [fn] ) 這與bind相反，它從每個匹配的元素中移除綁定事件。

Event Helper Methods

jQuery還提供了一組事件幫助函數，可以用來觸發事件來綁定上述任何事件類型。

Trigger Methods

下面是一個在所有段落上觸發blur事件的示例−

$("p").blur();

Binding Methods

Following is an example which would bind a 點擊 event on all the <div> −

$("div").click( function () { 
   // do something here
});

Here is a complete list of all the support methods provided by jQuery −

Sr.No.	Method & Description
1	模糊（）觸發每個匹配元素的模糊事件。
2	模糊（fn）將函數綁定到每個匹配元素的模糊事件。
3	更改（）觸發每個匹配元素的更改事件。
4	變化（fn）將函數綁定到每個匹配元素的更改事件。
5	單擊（）觸發每個匹配元素的單擊事件。
6	點擊（fn）將函數綁定到每個匹配元素的click事件。
7	dblclick（）觸發每個匹配元素的dblclick事件。
8	dblclick（fn）鍵將函數綁定到每個匹配元素的dblclick事件。
9	錯誤（）觸發每個匹配元素的錯誤事件。
10	錯誤（fn）將函數綁定到每個匹配元素的錯誤事件。
11	焦點（）觸發每個匹配元素的焦點事件。
12	焦點（fn）將函數綁定到每個匹配元素的焦點事件。
13	向下鍵（）觸發每個匹配元素的keydown事件。
14	按鍵（fn）將函數綁定到每個匹配元素的keydown事件。
15	按鍵（）觸發每個匹配元素的按鍵事件。
16	按鍵（fn）將函數綁定到每個匹配元素的按鍵事件。
17	鍵控（）觸發每個匹配元素的keyup事件。
18	鍵控（fn 將函數綁定到每個匹配元素的keyup事件。
19	負荷（fn）將函數綁定到每個匹配元素的加載事件。
20	摩澤敦（fn）將函數綁定到每個匹配元素的mousedown事件。
21	穆森特（fn）將函數綁定到每個匹配元素的mouseenter事件。
22	穆塞萊夫（fn）將函數綁定到每個匹配元素的mouseleave事件。
23	滑鼠移動（fn）將函數綁定到每個匹配元素的mousemove事件。
24	滑鼠懸停（fn）將函數綁定到每個匹配元素的mouseout事件。
25	滑鼠懸停（fn）將函數綁定到每個匹配元素的mouseover事件。
26	滑鼠（fn）將函數綁定到每個匹配元素的mouseup事件。
27	主題b b b調整大小（fn）/b/b 將函數綁定到每個匹配元素的resize事件。
28	滾動（fn）將函數綁定到每個匹配元素的滾動事件。
29	選擇（）觸發每個匹配元素的select事件。
30	選擇（fn）將函數綁定到每個匹配元素的select事件。
31	提交（）觸發每個匹配元素的提交事件。
32	提交（fn）將函數綁定到每個匹配元素的提交事件。
33	卸載（fn）將函數綁定到每個匹配元素的卸載事件。極客書 © 2015-2020 . 京ICP備15058027號-1