事件處理

2018-08-12 21:27 更新

jQuery - 事件處理

使用事件我們可以創(chuàng)建動態(tài) Web 頁面。事件是行為，可以通過 Web 應(yīng)用程序檢測到。

以下是事件的示例 ——

  • 鼠標(biāo)點(diǎn)擊

  • 一個(gè) Web 頁面加載

  • 用鼠標(biāo)取代元素

  • 提交 HTML 表單

  • 鍵盤上的按鍵

  • 等等

當(dāng)這些事件被觸發(fā)時(shí)，你可以使用自定義函數(shù)實(shí)現(xiàn)你想要用事件實(shí)現(xiàn)的任何事情。這些自定義函數(shù)稱為事件處理程序。

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

使用 jQuery 事件模型，我們可以在 DOM 中用下述 bind() 方法實(shí)現(xiàn)事件處理程序 ——

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="https://atts.w3cschool.cn/attachments/image/wk/jquery/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>

這段代碼會導(dǎo)致 division 元素響應(yīng)點(diǎn)擊事件；當(dāng)用戶點(diǎn)擊這個(gè) division 內(nèi)部之后，警報(bào)將被顯示出來。

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

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

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

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

  • eventType —— 一個(gè)字符串，包含一個(gè) JavaScript 事件類型，例如點(diǎn)擊或提交。請參考下一節(jié)事件類型的完整列表。

  • eventData —— 這是一個(gè)可選參數(shù)，是數(shù)字的映射，會被傳遞到事件處理程序中。

  • handler —— 一個(gè)函數(shù)，每次事件被觸發(fā)時(shí)，該函數(shù)會被執(zhí)行。

刪除事件處理程序

通常來說，一旦建立了一個(gè)事件處理程序，它仍在影響其余部分的頁面。有時(shí)你可能會需要?jiǎng)h除事件處理程序。

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

selector.unbind(eventType, handler)

or 

selector.unbind(eventType)

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

  • eventType —— 一個(gè)字符串，包含一個(gè) JavaScript 事件類型，如點(diǎn)擊或提交。請參考下一節(jié)事件類型的完整列表。

  • handler —— 如果提供的話，確定要被刪除的特定的監(jiān)聽器。

事件類型

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

序號 事件類型 & 描述
1 blur

當(dāng)元素失去關(guān)注時(shí)會出現(xiàn)。
2 change

當(dāng)元素發(fā)生改變時(shí)出現(xiàn)。
3 click

當(dāng)鼠標(biāo)點(diǎn)擊時(shí)出現(xiàn)。
4 dblclick

當(dāng)鼠標(biāo)雙擊時(shí)出現(xiàn)。
5 error

當(dāng)有錯(cuò)誤在下載或卸載等時(shí)出現(xiàn)。
6 focus

當(dāng)元素獲取關(guān)注時(shí)出現(xiàn)。
7 keydown

當(dāng)按下鍵盤時(shí)出現(xiàn)。
8 keypress

當(dāng)鍵盤被按下并被釋放時(shí)出現(xiàn)。
9 keyup

當(dāng)鍵盤被釋放時(shí)出現(xiàn)。
10 load

當(dāng)文檔被下載后出現(xiàn)。
11 mousedown

按下鼠標(biāo)按鈕后出現(xiàn)。
12 mouseenter

當(dāng)鼠標(biāo)進(jìn)入元素區(qū)域時(shí)出現(xiàn)。
13 mouseleave

當(dāng)鼠標(biāo)離開元素區(qū)域時(shí)出現(xiàn)。
14 mousemove

當(dāng)鼠標(biāo)指針移動時(shí)出現(xiàn)。
15 mouseout

當(dāng)鼠標(biāo)指針移動一個(gè)元素時(shí)出現(xiàn)。
16 mouseover

當(dāng)鼠標(biāo)指針移開一個(gè)元素時(shí)出現(xiàn)。
17 mouseup

釋放鼠標(biāo)按鈕時(shí)出現(xiàn)。
18 resize

調(diào)整窗口大小時(shí)出現(xiàn)。
19 scroll

滾動窗口時(shí)出現(xiàn)。
20 select

選中文本時(shí)出現(xiàn)。
21 submit

提交表單時(shí)出現(xiàn)。
22 unload

卸載文檔時(shí)出現(xiàn)。

事件對象

回調(diào)函數(shù)接受一個(gè)參數(shù)，當(dāng)調(diào)用處理程序時(shí)，JavaScript 事件對象將通過它進(jìn)行傳遞。

事件對象通常是不必要的并且參數(shù)也會被省略，因?yàn)樽銐虻纳舷挛耐ǔＪ强捎玫?，?dāng)處理程序被觸發(fā)時(shí)，處理程序一定會知道需要做什么，但是還有一些你需要訪問的屬性。

事件屬性

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

序號 屬性 & 描述
1 altKey

當(dāng)事件觸發(fā)時(shí)，如果 Alt 鍵被按下去，該屬性設(shè)置為 true，如果沒有則設(shè)置為 false。Alt 鍵在大多數(shù) Mac 鍵盤上是標(biāo)簽選項(xiàng)。
2 ctrlKey

當(dāng)事件觸發(fā)時(shí)，如果 Ctrl 鍵被按下去，該屬性設(shè)置為 true，如果沒有則設(shè)置為 false。
3 data

當(dāng)處理程序建好后，任何值都會作為第二個(gè)參數(shù)傳遞給 bind() 命令。
4 keyCode

對于 keyup 和 keydown 事件，該屬性會返回鍵被按下去了。
5 metaKey

當(dāng)事件觸發(fā)時(shí)，如果 Meta 鍵被按下去，該屬性設(shè)置為 true。在 PC 上，Meta 是 Ctrl 鍵，而在 Macs 上，它是 Command 鍵。
6 pageX

對于鼠標(biāo)事件，指定了原始頁面的相關(guān)事件的水平坐標(biāo)。
7 pageY

對于鼠標(biāo)事件，指定了原始頁面的相關(guān)事件的豎直坐標(biāo)。
8 relatedTarget

對于一些鼠標(biāo)事件，當(dāng)事件觸發(fā)時(shí)，識別了光標(biāo)離開或進(jìn)入的元素。
9 screenX

對于鼠標(biāo)事件，指定了原始屏幕的相關(guān)事件的水平坐標(biāo)。
10 screenY

對于鼠標(biāo)事件，指定了原始屏幕的相關(guān)事件的豎直坐標(biāo)。
11 shiftKey

當(dāng)事件觸發(fā)時(shí)，如果 Shift 鍵被按下，該屬性設(shè)置為 true，如果沒有則設(shè)置為 false。
12 target

識別要觸發(fā)的事件的元素。
13 timeStamp

創(chuàng)建事件時(shí)的時(shí)間戳(以毫秒為單位)。
14 type

對于所有的事件來說，指定了要觸發(fā)的事件類型(例如，點(diǎn)擊)。
15 which

對于鍵盤事件來說，指定了引發(fā)事件的鍵的數(shù)字代碼，對于鼠標(biāo)事件來說，指定了哪一個(gè)按鈕被按下(1 是左鍵，2 是中間鍵，3 是右鍵)。

 
<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="https://atts.w3cschool.cn/attachments/image/wk/jquery/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)生如下所示結(jié)果：

事件方法

下述是方法列表，可以在事件對象中調(diào)用 ——

序號 方法 & 描述
1 preventDefault()

阻止瀏覽器執(zhí)行默認(rèn)操作。
2 isDefaultPrevented()

返回 event.preventDefault() 是否曾經(jīng)在該事件對象中調(diào)用過。
3 stopPropagation()

停止向父元素 bubbing 事件，阻止通知任何父處理程序這一事件。
4 isPropagationStopped()

返回 event.stopPropagation() 是否曾經(jīng)在該事件對象中調(diào)用過。
5 stopImmediatePropagation()

阻止其余的處理程序執(zhí)行。
6 isImmediatePropagationStopped()

返回 event.stopImmediatePropagation() 是否曾經(jīng)在該事件對象中調(diào)用過。

事件處理方法

下表列出了重要的事件相關(guān)的方法 ——

序號 方法 & 描述
1 bind( type, [data], fn )

為每個(gè)匹配的元素將一個(gè)處理程序捆綁到一個(gè)或多個(gè)事件上(如點(diǎn)擊)。也可以捆綁自定義事件。
2 off( events [, selector ] [, handler(eventObject) ] )

該方法實(shí)現(xiàn)的是 live 的對立面，它刪除了捆綁的 live 事件。
3 hover( over, out )

模擬徘徊，例如將鼠標(biāo)移動到一個(gè)對象上，并將鼠標(biāo)從該對象上移開。
4 on( events [, selector ] [, data ], handler )

為所有當(dāng)前的 ? 以及之后的 ? 匹配元素將一個(gè)處理程序捆綁到一個(gè)事件上(如點(diǎn)擊)。 也可以捆綁自定義事件。
5 one( type, [data], fn )

為每個(gè)匹配的元素將一個(gè)處理程序綁定到一個(gè)或多個(gè)要被執(zhí)行的事件上。
6 ready( fn )

當(dāng) DOM 準(zhǔn)備好要被遍歷或者操作時(shí)，綁定一個(gè)要被執(zhí)行的函數(shù)。
7 trigger( event, [data] )

在每個(gè)匹配的元素上觸發(fā)一個(gè)事件。
8 triggerHandler( event, [data] )

在一個(gè)元素上觸發(fā)全部綁定的事件處理程序。
9 unbind( [type], [fn] )

該方法實(shí)現(xiàn)綁定相反的操作，它從每個(gè)匹配的元素中刪除綁定的事件。

事件輔助方法

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

觸發(fā)方法

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

$("p").blur();

綁定方法

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

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

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

序號 方法 & 描述
1 blur( )

觸發(fā)每個(gè)匹配元素的 blur 事件。
2 blur( fn )

將一個(gè)函數(shù)綁定到每個(gè)匹配元素的 blur 事件中。
3 change( )

觸發(fā)每個(gè)匹配元素的 change 事件。
4 change( fn )

將一個(gè)函數(shù)綁定到每個(gè)匹配元素的 change 事件中。
5 click( )

觸發(fā)每個(gè)匹配元素的 click 事件。
6 click( fn )

將一個(gè)函數(shù)綁定到每個(gè)匹配元素的 click 事件中。
7 dblclick( )

觸發(fā)每個(gè)匹配元素的 dblclick 事件。
8 dblclick( fn )

將一個(gè)函數(shù)綁定到每個(gè)匹配元素的 dblclick 事件中。
9 error( )

觸發(fā)每個(gè)匹配元素的 error 事件。
10 error( fn )

將一個(gè)函數(shù)綁定到每個(gè)匹配元素的 error 事件中。
11 focus( )

觸發(fā)每個(gè)匹配元素的 focus 事件。
12 focus( fn )

將一個(gè)函數(shù)綁定到每個(gè)匹配元素的 focus 事件中。
13 keydown( )

觸發(fā)每個(gè)匹配元素的 keydown 事件。
14 keydown( fn )

將一個(gè)函數(shù)綁定到每個(gè)匹配元素的 keydown 事件中。
15 keypress( )

觸發(fā)每個(gè)匹配元素的 keypress 事件。
16 keypress( fn )

將一個(gè)函數(shù)綁定到每個(gè)匹配元素的 keypress 事件中。
17 keyup( )

觸發(fā)每個(gè)匹配元素的 keyup 事件。
18 keyup( fn )

將一個(gè)函數(shù)綁定到每個(gè)匹配元素的 keyup 事件中。
20 load( fn )

將一個(gè)函數(shù)綁定到每個(gè)匹配元素的 load 事件中。
21 mousedown( fn )

將一個(gè)函數(shù)綁定到每個(gè)匹配元素的 mousedown 事件中。
22 mouseenter( fn )

將一個(gè)函數(shù)綁定到每個(gè)匹配元素的 mouseenter 事件中。
23 mouseleave( fn )

將一個(gè)函數(shù)綁定到每個(gè)匹配元素的 mouseleave 事件中。
24 mousemove( fn )

將一個(gè)函數(shù)綁定到每個(gè)匹配元素的 mousemove 事件中。
25 mouseout( fn )

將一個(gè)函數(shù)綁定到每個(gè)匹配元素的 mouseout 事件中。
26 mouseover( fn )

將一個(gè)函數(shù)綁定到每個(gè)匹配元素的 mouseover 事件中。
27 mouseup( fn )

將一個(gè)函數(shù)綁定到每個(gè)匹配元素的 mouseup 事件中
28 resize( fn )

將一個(gè)函數(shù)綁定到每個(gè)匹配元素的 resize 事件中。
29 scroll( fn )

將一個(gè)函數(shù)綁定到每個(gè)匹配元素的 scroll 事件中。
30 select( )

觸發(fā)每個(gè)匹配元素的 select 事件。
31 select( fn )

將一個(gè)函數(shù)綁定到每個(gè)匹配元素的 select 事件中。
32 submit( )

觸發(fā)每個(gè)匹配元素的 submit 事件。
33 submit( fn )

將一個(gè)函數(shù)綁定到每個(gè)匹配元素的 submit 事件中。
34 unload( fn )

將一個(gè)函數(shù)綁定到每個(gè)匹配元素的 unload 事件中。
以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號