<a href="/" title="Ubuntu系統(tǒng)_Ubuntu軟件下載_Ubuntu電腦知識(shí)_Ubuntu服務(wù)器_中文網(wǎng)">

從零開(kāi)始學(xué)習(xí)jQuery (七) jQuery動(dòng)畫-讓頁(yè)面動(dòng)起來(lái)!

從零開(kāi)始學(xué)習(xí)jQuery (十) jQueryUI常用功能實(shí)戰(zhàn)

從零開(kāi)始學(xué)習(xí)jQuery (十一) 實(shí)戰(zhàn)表單驗(yàn)證與自動(dòng)完成提示插件

一.摘要

事件是腳本編程的靈魂. 所以本章內(nèi)容也是jQuery學(xué)習(xí)的重點(diǎn). 本文將對(duì)jQuery中的事件處理以及事件對(duì)象進(jìn)行詳細(xì)的講解.

二.前言

本篇文章是至今為止本系列內(nèi)容最多的一篇, 足以可見(jiàn)其重要性. 大家反映要多列舉示例. 我會(huì)在時(shí)間允許的情況下盡量多列舉示例. 真正的投入生產(chǎn)使用的實(shí)例暫時(shí)還無(wú)法加入到文章中, 但是可能最后我會(huì)列舉一些作品供大家借鑒. 另外本人水平有限, 因?yàn)槲也皇荱I設(shè)計(jì)師. 文章可能有錯(cuò)誤的地方, 希望大家?guī)兔χ赋? 一起學(xué)習(xí)一起進(jìn)步. 在技術(shù)的世界里我們是沒(méi)有任何利益瓜葛. 希望大家都抱著彼此鼓勵(lì)的心態(tài), 對(duì)于回復(fù)中的激進(jìn)評(píng)論我也都會(huì)考慮, 但是希望能夠彼此尊重, 保護(hù)博客園這片程序員的凈土!

三.事件與事件對(duì)象

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

首先看一下我們經(jīng)常使用的添加事件的方式:

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

系列文章導(dǎo)航：

從零開(kāi)始學(xué)習(xí)jQuery (七) jQuery動(dòng)畫-讓頁(yè)面動(dòng)起來(lái)!

從零開(kāi)始學(xué)習(xí)jQuery (十) jQueryUI常用功能實(shí)戰(zhàn)

從零開(kāi)始學(xué)習(xí)jQuery (十一) 實(shí)戰(zhàn)表單驗(yàn)證與自動(dòng)完成提示插件

四. jQuery中的事件

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

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

系列文章導(dǎo)航：

從零開(kāi)始學(xué)習(xí)jQuery (七) jQuery動(dòng)畫-讓頁(yè)面動(dòng)起來(lái)!

從零開(kāi)始學(xué)習(xí)jQuery (十) jQueryUI常用功能實(shí)戰(zhàn)

從零開(kāi)始學(xué)習(xí)jQuery (十一) 實(shí)戰(zhàn)表單驗(yàn)證與自動(dòng)完成提示插件

五.常用事件函數(shù)舉例

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

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

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

系列文章導(dǎo)航：

從零開(kāi)始學(xué)習(xí)jQuery (七) jQuery動(dòng)畫-讓頁(yè)面動(dòng)起來(lái)!

從零開(kāi)始學(xué)習(xí)jQuery (十) jQueryUI常用功能實(shí)戰(zhàn)

從零開(kāi)始學(xué)習(xí)jQuery (十一) 實(shí)戰(zhàn)表單驗(yàn)證與自動(dòng)完成提示插件

六.快捷事件 Event Helpers

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

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

設(shè)置單擊事件:

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

系列文章導(dǎo)航：

從零開(kāi)始學(xué)習(xí)jQuery (七) jQuery動(dòng)畫-讓頁(yè)面動(dòng)起來(lái)!