<a href="/" title="Ubuntu系統_Ubuntu軟件下載_Ubuntu電腦知識_Ubuntu服務器_中文網">

一.摘要

事件是腳本編程的靈魂. 所以本章內容也是jQuery學習的重點. 本文將對jQuery中的事件處理以及事件對象進行詳細的講解.

二.前言

本篇文章是至今為止本系列內容最多的一篇, 足以可見其重要性. 大家反映要多列舉示例. 我會在時間允許的情況下盡量多列舉示例. 真正的投入生產使用的實例暫時還無法加入到文章中, 但是可能最后我會列舉一些作品供大家借鑒. 另外本人水平有限, 因為我不是UI設計師. 文章可能有錯誤的地方, 希望大家幫忙指出, 一起學習一起進步. 在技術的世界里我們是沒有任何利益瓜葛. 希望大家都抱著彼此鼓勵的心態, 對于回復中的激進評論我也都會考慮, 但是希望能夠彼此尊重, 保護博客園這片程序員的凈土!

三.事件與事件對象

曾經在我的 "Javascript公共腳本庫系列(二): 添加事件多播委托的方法" 和 "Javascript公共腳本庫系列(三): 格式化事件對象/事件對象詳解" 兩篇文章中, 曾講解過Javascript中的事件和事件對象.

首先看一下我們經常使用的添加事件的方式:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm
l1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Javascript中的事件</title>

    <script type="text/Javascript" src="scripts/jquery-1.3.2-vsdoc2.js"></script>

    <script type="text/Javascript">
        $(function()
        {
            document.getElementById("testDiv2").onclick = showMsg;
        })

        function showMsg(event)
        {
            alert("!!!");
        }        
    </script>
</head>
<body>
    <div id="testDiv1" onclick="showMsg();">單擊事件 1</div>
    <div id="testDiv2">單擊事件 2</div>
</body>
</html>

系列文章導航：

四. jQuery中的事件

有了jQuery, 我們有了處理對象事件的一系列函數. 上面基礎知識還是要懂, 但是再也不用自己去實現處理多播事件委托的函數了. 正所謂有了jQuery, 天天喝茶水. 下面是在jQuery中最常使用的bind()方法舉例:

$("#testDiv4").bind("click", showMsg);

系列文章導航：

五.常用事件函數舉例

1.bind( type, [data], fn ) 函數舉例

bind()是最常使用的函數, 注意方法簽名上data參數, 可以在事件處理之前傳遞一些附加的數據:

function handler(event) {
  alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)

系列文章導航：

六.快捷事件 Event Helpers

BUG提示:jquery-1.3.2-vsdoc2.js 這個最新的官方帶智能提示的類庫, 無法使用快捷事件, 比如click(), focus(). 使用其他版本的類庫則沒有問題.

雖然我們可以使用事件處理函數完成對象事件的幾乎所有操作, 但是jQuery提供了對常用事件的封裝. 比如單擊事件對應的兩個方法click()和click(fn)分別用來觸發單擊事件和設置單擊事件.

設置單擊事件:

$("#testDiv").click(function(event) { alert("test div clicked ! "); });

系列文章導航：