jQuery Event

Ang jQuery ay dinisenyo para sa event handling.

jQuery event function

Ang jQuery event handler ay ang pangunahing function sa jQuery.

Ang event handler ay ang paraan na tinatawag kapag nangyayari ang ilang mga pangyayari sa HTML. Ang termino na ginamit ay "triggered" (o "initiated") na kalimitang ginagamit.

Karaniwang ilalagay ang jQuery code sa <head> bahagi ng event handling method:

實例

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>

親自試試

Sa pagkakataong ito, kapag ang click event ng button ay naitatanggal, ang function ay maitutulak:

$("button").click(function() {  // some code... } )

Ang paraan na ito ay nagtatago sa lahat ng <p> element:

$("p").hide();

Function sa malayang file

Kung ang iyong website ay may maraming pahina at gusto mo na ang iyong jQuery function ay madaling paayos, mangyaring ilagay ang iyong jQuery function sa isang malayang .js file.

當我們在教程中演示 jQuery 時，會將函數直接添加到 <head> 部分中。不過，把它們放到一個單獨的文件中會更好，就像這樣（通過 src 屬性來引用文件）：

實例

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>

jQuery 名稱衝突

jQuery 使用 $ 符號作為 jQuery 的簡介方式。

某些其他 JavaScript 库中的函數（比如 Prototype）同樣使用 $ 符號。

jQuery 使用名為 noConflict() 的方法來解決該問題。

var jq=jQuery.noConflict()，幫助您使用自己的名稱（比如 jq）來代替 $ 符號。

親自試試

結論

由於 jQuery 是為了處理 HTML 事件而特別設計的，那麼當您遵循以下原則時，您的代碼會更恰當且更易維護：

  • 把所有 jQuery 代碼置於事件處理函數中
  • 把所有事件處理函數置於文檔就緒事件處理器中
  • 把 jQuery 代碼置於單獨的 .js 文件中
  • 如果存在名稱衝突，則重命名 jQuery 库

jQuery Event

以下是 jQuery 中事件方法的一些例子：

Event 函數 綁定函數至
$(document).ready(function) 將函數綁定到文檔的就緒事件（當文檔完成加載時）
$(selector).click(function) 觸發或將函數綁定到被選元素的點擊事件
$(selector).dblclick(function) 觸發或將函數綁定到被選元素的双击事件
$(selector).focus(function) 觸發或將函數綁定到被選元素的獲得焦點事件
$(selector).mouseover(function) 觸發或將函數綁定到被選元素的鼠標懸停事件

如需完整的參考手冊，請訪問我們的 jQuery 事件參考手冊。