<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="http://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 元素響應點擊事件；當用戶點擊這個 division 內部之后，警報將被顯示出來。

這將產(chǎn)生如下所示結果：

http://wiki.jikexueyuan.com/project/jquery/images/event-jt-1.png" alt="" />

bind() 指令的全部語法如下所示 ——

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

下面是各個參數(shù)的描述 ——

eventType —— 一個字符串，包含一個 JavaScript 事件類型，例如點擊或提交。請參考下一節(jié)事件類型的完整列表。
eventData —— 這是一個可選參數(shù)，是數(shù)字的映射，會被傳遞到事件處理程序中。
handler —— 一個函數(shù)，每次事件被觸發(fā)時，該函數(shù)會被執(zhí)行。

刪除事件處理程序

通常來說，一旦建立了一個事件處理程序，它仍在影響其余部分的頁面。有時你可能會需要刪除事件處理程序。

jQuery 提供了 unbind() 命令來刪除一個已存在的事件處理程序。unbind() 的語法如下：

selector.unbind(eventType, handler)

or 

selector.unbind(eventType)

下面是各個參數(shù)的描述 ——

eventType —— 一個字符串，包含一個 JavaScript 事件類型，如點擊或提交。請參考下一節(jié)事件類型的完整列表。
handler —— 如果提供的話，確定要被刪除的特定的監(jiān)聽器。

事件類型

下述是跨平臺的，建議你使用 jQuery 來綁定事件類型 ——

序號	事件類型 & 描述
1	blur 當元素失去關注時會出現(xiàn)。
2	change 當元素發(fā)生改變時出現(xiàn)。
3	click 當鼠標點擊時出現(xiàn)。
4	dblclick 當鼠標雙擊時出現(xiàn)。
5	error 當有錯誤在下載或卸載等時出現(xiàn)。
6	focus 當元素獲取關注時出現(xiàn)。
7	keydown 當按下鍵盤時出現(xiàn)。
8	keypress 當鍵盤被按下并被釋放時出現(xiàn)。
9	keyup 當鍵盤被釋放時出現(xiàn)。
10	load 當文檔被下載后出現(xiàn)。
11	mousedown 按下鼠標按鈕后出現(xiàn)。
12	mouseenter 當鼠標進入元素區(qū)域時出現(xiàn)。
13	mouseleave 當鼠標離開元素區(qū)域時出現(xiàn)。
14	mousemove 當鼠標指針移動時出現(xiàn)。
15	mouseout 當鼠標指針移動一個元素時出現(xiàn)。
16	mouseover 當鼠標指針移開一個元素時出現(xiàn)。
17	mouseup 釋放鼠標按鈕時出現(xiàn)。
18	resize 調整窗口大小時出現(xiàn)。
19	scroll 滾動窗口時出現(xiàn)。
20	select 選中文本時出現(xiàn)。
21	submit 提交表單時出現(xiàn)。
22	unload 卸載文檔時出現(xiàn)。

事件對象

回調函數(shù)接受一個參數(shù)，當調用處理程序時，JavaScript 事件對象將通過它進行傳遞。

事件對象通常是不必要的并且參數(shù)也會被省略，因為足夠的上下文通常是可用的，當處理程序被觸發(fā)時，處理程序一定會知道需要做什么，但是還有一些你需要訪問的屬性。

事件屬性

下述是可用的事件屬性，并且可以以與平臺無關的方法來安全的訪問 ——

序號	屬性 & 描述
1	altKey 當事件觸發(fā)時，如果 Alt 鍵被按下去，該屬性設置為 true，如果沒有則設置為 false。Alt 鍵在大多數(shù) Mac 鍵盤上是標簽選項。
2	ctrlKey 當事件觸發(fā)時，如果 Ctrl 鍵被按下去，該屬性設置為 true，如果沒有則設置為 false。
3	data 當處理程序建好后，任何值都會作為第二個參數(shù)傳遞給 bind() 命令。
4	keyCode 對于 keyup 和 keydown 事件，該屬性會返回鍵被按下去了。
5	metaKey 當事件觸發(fā)時，如果 Meta 鍵被按下去，該屬性設置為 true。在 PC 上，Meta 是 Ctrl 鍵，而在 Macs 上，它是 Command 鍵。
6	pageX 對于鼠標事件，指定了原始頁面的相關事件的水平坐標。
7	pageY 對于鼠標事件，指定了原始頁面的相關事件的豎直坐標。
8	relatedTarget 對于一些鼠標事件，當事件觸發(fā)時，識別了光標離開或進入的元素。
9	screenX 對于鼠標事件，指定了原始屏幕的相關事件的水平坐標。
10	screenY 對于鼠標事件，指定了原始屏幕的相關事件的豎直坐標。
11	shiftKey 當事件觸發(fā)時，如果 Shift 鍵被按下，該屬性設置為 true，如果沒有則設置為 false。
12	target 識別要觸發(fā)的事件的元素。
13	timeStamp 創(chuàng)建事件時的時間戳(以毫秒為單位)。
14	type 對于所有的事件來說，指定了要觸發(fā)的事件類型(例如，點擊)。
15	which 對于鍵盤事件來說，指定了引發(fā)事件的鍵的數(shù)字代碼，對于鼠標事件來說，指定了哪一個按鈕被按下(1 是左鍵，2 是中間鍵，3 是右鍵)。

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="http://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>

這將產(chǎn)生如下所示結果：

http://wiki.jikexueyuan.com/project/jquery/images\event-jt-2.png" alt="" />

事件方法

下述是方法列表，可以在事件對象中調用 ——

序號	方法 & 描述
1	preventDefault() 阻止瀏覽器執(zhí)行默認操作。
2	isDefaultPrevented() 返回 event.preventDefault() 是否曾經(jīng)在該事件對象中調用過。
3	stopPropagation() 停止向父元素 bubbing 事件，阻止通知任何父處理程序這一事件。
4	isPropagationStopped() 返回 event.stopPropagation() 是否曾經(jīng)在該事件對象中調用過。
5	stopImmediatePropagation() 阻止其余的處理程序執(zhí)行。
6	isImmediatePropagationStopped() 返回 event.stopImmediatePropagation() 是否曾經(jīng)在該事件對象中調用過。

事件處理方法

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

序號	方法 & 描述
1	bind( type, [data], fn ) 為每個匹配的元素將一個處理程序捆綁到一個或多個事件上(如點擊)。也可以捆綁自定義事件。
2	off( events [, selector ] [, handler(eventObject) ] ) 該方法實現(xiàn)的是 live 的對立面，它刪除了捆綁的 live 事件。
3	hover( over, out ) 模擬徘徊，例如將鼠標移動到一個對象上，并將鼠標從該對象上移開。
4	on( events [, selector ] [, data ], handler ) 為所有當前的 ? 以及之后的 ? 匹配元素將一個處理程序捆綁到一個事件上(如點擊)。也可以捆綁自定義事件。
5	one( type, [data], fn ) 為每個匹配的元素將一個處理程序綁定到一個或多個要被執(zhí)行的事件上。
6	ready( fn ) 當 DOM 準備好要被遍歷或者操作時，綁定一個要被執(zhí)行的函數(shù)。
7	trigger( event, [data] ) 在每個匹配的元素上觸發(fā)一個事件。
8	triggerHandler( event, [data] ) 在一個元素上觸發(fā)全部綁定的事件處理程序。
9	unbind( [type], [fn] ) 該方法實現(xiàn)綁定相反的操作，它從每個匹配的元素中刪除綁定的事件。

事件輔助方法

jQuery 也提供了一組事件輔助函數(shù)，這些函數(shù)可以用于觸發(fā)一個事件或綁定上述任何類型的事件。

觸發(fā)方法

下面的例子中將觸發(fā)所有段落中的 blur 事件 ——

$("p").blur();

綁定方法

下面的例子將一個 click 事件綁定到所有的 < div> 中 ——

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

這是 jQuery 提供的所有支持方法完整的列表 ——

序號	方法 & 描述
1	blur( ) 觸發(fā)每個匹配元素的 blur 事件。
2	blur( fn ) 將一個函數(shù)綁定到每個匹配元素的 blur 事件中。
3	change( ) 觸發(fā)每個匹配元素的 change 事件。
4	change( fn ) 將一個函數(shù)綁定到每個匹配元素的 change 事件中。
5	click( ) 觸發(fā)每個匹配元素的 click 事件。
6	click( fn ) 將一個函數(shù)綁定到每個匹配元素的 click 事件中。
7	dblclick( ) 觸發(fā)每個匹配元素的 dblclick 事件。
8	dblclick( fn ) 將一個函數(shù)綁定到每個匹配元素的 dblclick 事件中。
9	error( ) 觸發(fā)每個匹配元素的 error 事件。
10	error( fn ) 將一個函數(shù)綁定到每個匹配元素的 error 事件中。
11	focus( ) 觸發(fā)每個匹配元素的 focus 事件。
12	focus( fn ) 將一個函數(shù)綁定到每個匹配元素的 focus 事件中。
13	keydown( ) 觸發(fā)每個匹配元素的 keydown 事件。
14	keydown( fn ) 將一個函數(shù)綁定到每個匹配元素的 keydown 事件中。
15	keypress( ) 觸發(fā)每個匹配元素的 keypress 事件。
16	keypress( fn ) 將一個函數(shù)綁定到每個匹配元素的 keypress 事件中。
17	keyup( ) 觸發(fā)每個匹配元素的 keyup 事件。
18	keyup( fn ) 將一個函數(shù)綁定到每個匹配元素的 keyup 事件中。
20	load( fn ) 將一個函數(shù)綁定到每個匹配元素的 load 事件中。
21	mousedown( fn ) 將一個函數(shù)綁定到每個匹配元素的 mousedown 事件中。
22	mouseenter( fn ) 將一個函數(shù)綁定到每個匹配元素的 mouseenter 事件中。
23	mouseleave( fn ) 將一個函數(shù)綁定到每個匹配元素的 mouseleave 事件中。
24	mousemove( fn ) 將一個函數(shù)綁定到每個匹配元素的 mousemove 事件中。
25	mouseout( fn ) 將一個函數(shù)綁定到每個匹配元素的 mouseout 事件中。
26	mouseover( fn ) 將一個函數(shù)綁定到每個匹配元素的 mouseover 事件中。
27	mouseup( fn ) 將一個函數(shù)綁定到每個匹配元素的 mouseup 事件中
28	resize( fn ) 將一個函數(shù)綁定到每個匹配元素的 resize 事件中。
29	scroll( fn ) 將一個函數(shù)綁定到每個匹配元素的 scroll 事件中。
30	select( ) 觸發(fā)每個匹配元素的 select 事件。
31	select( fn ) 將一個函數(shù)綁定到每個匹配元素的 select 事件中。
32	submit( ) 觸發(fā)每個匹配元素的 submit 事件。
33	submit( fn ) 將一個函數(shù)綁定到每個匹配元素的 submit 事件中。
34	unload( fn ) 將一個函數(shù)綁定到每個匹配元素的 unload 事件中。

上一篇：jQuery - 屬性下一篇：jQuery - Ajax

在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

jQuery - 事件處理

創(chuàng)建事件處理程序