【jQuery 教程】jQuery 事件

jQuery 事件函數

jQuery 事件處理方法是 jQuery 中的核心函數。

事件處理程序指的是當 HTML 中發生某些事件時所調用的方法。術語由事件“觸發”(或“激發”)經常會被使用。

通常會把 jQuery 代碼放到 <head>部分的事件處理方法中:

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

在上面的例子中,當按鈕的點擊事件被觸發時會調用一個函數:

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

該方法隱藏所有 <p> 元素:

$("p").hide();

單獨文件中的函數

如果您的網站包含許多頁面,並且您希望您的 jQuery 函數易於維護,那麼請把您的 jQuery 函數放到獨立的 .js 文件中。

當我們在教程中演示 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 事件

下面是 jQuery 中事件方法的一些例子:

方法描述
bind() 向匹配元素附加一個或更多事件處理器
blur() 觸發、或將函數綁定到指定元素的 blur 事件
change() 觸發、或將函數綁定到指定元素的 change 事件
click() 觸發、或將函數綁定到指定元素的 click 事件
dblclick() 觸發、或將函數綁定到指定元素的 double click 事件
delegate() 向匹配元素的當前或未來的子元素附加一個或多個事件處理器
die() 移除所有通過 live() 函數添加的事件處理程序。
error() 觸發、或將函數綁定到指定元素的 error 事件
event.isDefaultPrevented() 返回 event 對象上是否調用了 event.preventDefault()。
event.pageX 相對於文檔左邊緣的鼠標位置。
event.pageY 相對於文檔上邊緣的鼠標位置。
event.preventDefault() 阻止事件的默認動作。
event.result 相對於文檔上邊緣的鼠標位置。
event.target 觸發事件的 DOM 元素。
event.timeStamp 該屬性返回從 1970 年 1 月 1 日到事件發生時的毫秒數。
event.type 描述事件的類型。
event.which 指示按了哪個鍵或按鈕。
focus() 觸發、或將函數綁定到指定元素的 focus 事件
keydown() 觸發、或將函數綁定到指定元素的 key down 事件
keypress() 觸發、或將函數綁定到指定元素的 key press 事件
keyup() 觸發、或將函數綁定到指定元素的 key up 事件
live() 觸發、或將函數綁定到指定元素的 load 事件
load() 觸發、或將函數綁定到指定元素的 load 事件
mousedown() 觸發、或將函數綁定到指定元素的 mouse down 事件
mouseenter() 觸發、或將函數綁定到指定元素的 mouse enter 事件
mouseleave() 觸發、或將函數綁定到指定元素的 mouse leave 事件
mousemove() 觸發、或將函數綁定到指定元素的 mouse move 事件
mouseout() 觸發、或將函數綁定到指定元素的 mouse out 事件
mouseover() 觸發、或將函數綁定到指定元素的 mouse over 事件
mouseup() 觸發、或將函數綁定到指定元素的 mouse up 事件
one() 向匹配元素添加事件處理器。每個元素只能觸發一次該處理器。
ready() 文檔就緒事件(當 HTML 文檔就緒可用時)
resize() 觸發、或將函數綁定到指定元素的 resize 事件
scroll() 觸發、或將函數綁定到指定元素的 scroll 事件
select() 觸發、或將函數綁定到指定元素的 select 事件
submit() 觸發、或將函數綁定到指定元素的 submit 事件
toggle() 綁定兩個或多個事件處理器函數,當發生輪流的 click 事件時執行。
trigger() 所有匹配元素的指定事件
triggerHandler() 第一個被匹配元素的指定事件
unbind() 從匹配元素移除一個被添加的事件處理器
undelegate() 從匹配元素移除一個被添加的事件處理器,現在或將來
unload() 觸發、或將函數綁定到指定元素的 unload 事件

 

發佈了47 篇原創文章 · 獲贊 9 · 訪問量 8萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章