JavaScript和HTML之間的交互是通過(guò)用戶和瀏覽器操作頁(yè)面時(shí)引發(fā)的事件來(lái)處理的。 jQuery增加并擴(kuò)展了基本的事件處理機(jī)制。jQuery不僅提供了更加優(yōu)雅的事件處理語(yǔ)法，而且極大的增強(qiáng)了事件處理能力。

加載DOM

瀏覽器加載文檔完畢后，瀏覽器會(huì)通過(guò)JS為DOM元素添加事件。在常規(guī)的JavaScript代碼中，通常使用window.onload方法，而在jQuery中，使用的$(document).ready()方法。 $(document).ready()是事件模塊中最重要的一個(gè)函數(shù)，可以極大的提高Web應(yīng)用程序的響應(yīng)速度。jQuery就是用 $(document).ready()方法來(lái)代替?zhèn)鹘y(tǒng)JavaScript的window.onload方法的，通過(guò)使用該方法，可以在DOM載入就緒時(shí)就對(duì)其進(jìn)行操縱并調(diào)用執(zhí)行它所綁定的函數(shù)。在使用過(guò)程中，需要注意 $(document).ready()方法和window.onload方法之間的細(xì)微差別。

1. 執(zhí)行時(shí)機(jī)
$(document).ready()方法和window.onload方法有相似的功能，但是在執(zhí)行時(shí)機(jī)方面是有區(qū)別的，window.onload方法才是在網(wǎng)頁(yè)中所有元素（包括元素的所有關(guān)聯(lián)文件）完全加載到瀏覽器后才執(zhí)行，JS此時(shí)才可以訪問(wèn)網(wǎng)頁(yè)中的任何元素。而通過(guò)jQuery中的$(document).ready()方法注冊(cè)的事件處理程序，在DOM完全就緒時(shí)就可以被調(diào)用。此時(shí)，網(wǎng)頁(yè)的所有元素對(duì)jQuery而言都是可以訪問(wèn)的，但是，這并不意味著這些元素關(guān)聯(lián)的文件都已經(jīng)下載完畢。

舉一個(gè)例子，有一個(gè)大型圖庫(kù)網(wǎng)站，為網(wǎng)頁(yè)中所有圖片添加某些行為，例如單擊圖片后讓它隱藏或顯示。如果使用window.onload方法來(lái)處理，那么用戶必須等到每一幅圖片都加載完畢后，才可以進(jìn)行操作。如果使用jQuery的$(document).ready()方法進(jìn)行設(shè)置，只要DOM就緒就可以操作了。不需要等待圖片下載完畢。

另外，需要注意一點(diǎn)，在$(document).ready()方法內(nèi)注冊(cè)的事件，只要DOM就緒就會(huì)被執(zhí)行，因此可能此時(shí)元素的關(guān)聯(lián)文件未下載完，例如與圖片有關(guān)的HTML下載完畢，并且已經(jīng)解析為DOM樹了，但很有可能圖片還未加載完畢，所以例如圖片的高度和寬度這樣的屬性此時(shí)不一定有效。要解決這個(gè)問(wèn)題，可以使用jQuery中另一個(gè)關(guān)于頁(yè)面加載的方法——load()。load()方法會(huì)在元素的onload事件中綁定一個(gè)處理函數(shù)，如果處理函數(shù)綁定給window對(duì)象，則會(huì)在所有內(nèi)容（包括窗口，框架，對(duì)象和圖像等）加載完畢后觸發(fā)，如果處理函數(shù)綁定在元素上，則會(huì)在元素的內(nèi)容加載完畢后觸發(fā)。

    $(window).load(function() {
        // ...
    });

    // 等價(jià)于

    window.onload = function() {
        // ....
    };

2. 多次使用
windows.onload()和$(document).ready()的區(qū)別

現(xiàn)在有兩個(gè)函數(shù)：

        alert("one");
    }
    function two() {
        alert("two");
    }

當(dāng)網(wǎng)頁(yè)加載完畢后，通過(guò)如下的JavaScript代碼來(lái)分別調(diào)用one函數(shù)和two函數(shù)。

    window.onload = one;
    window.onload = two;

然而運(yùn)行后，發(fā)現(xiàn)只彈出two對(duì)話框。

字符串"one"對(duì)話框不能被彈出的原因是：JavaScript的onload事件一次只保存對(duì)一個(gè)函數(shù)的引用，它會(huì)自動(dòng)用后面的函數(shù)覆蓋前面的函數(shù)，因此不能在現(xiàn)有的行為上添加新的行為。

為了達(dá)到兩個(gè)函數(shù)順序觸發(fā)的效果，只能再創(chuàng)建一個(gè)新的JavaScript方法來(lái)實(shí)現(xiàn)。

    window.onload = function() {
        one();
        two();
    }

雖然這樣編寫代碼能解決某些問(wèn)題，但還是不能滿足某些需求，例如有多個(gè)JavaScript文件，每個(gè)文件都有用到window.onload方法，這種情況用上面提到的方法編寫代碼會(huì)非常麻煩。而jQuery的$(document).ready()方法能夠很好的處理這些情況，每次調(diào)用$(document).ready()方法都會(huì)在現(xiàn)有的行為上追加新的行為，這些行為函數(shù)會(huì)根據(jù)注冊(cè)的順序依次執(zhí)行。例如如下的jQuery代碼；

    $(document).ready(function() {
        one();
    })
    $(document).ready(function() {
        two();
    })

3. 簡(jiǎn)寫方式

    $(document).ready(function() {

    })

    // 簡(jiǎn)寫方式

    $(function() {
        
    })

另外，$(document)也可以簡(jiǎn)寫$()，當(dāng)$()不帶參數(shù)時(shí)，默認(rèn)參數(shù)就是document。

    $().ready(function() {

    });

jQuery——事件綁定

在文件裝載完成之后，如果打算為元素綁定事件來(lái)完成某些操作，則可以使用bind()方法來(lái)對(duì)匹配元素進(jìn)行特定事件的綁定，bind()方法的調(diào)用格式為：

$(selector).bind(event,data,function)

第1個(gè)參數(shù)是事件類型，類型包括：blur，focus，load，resize，scroll，unload，click，dbclick，mousedown，mouseup，mousemove，mouseout，mouseenter，mouseleave，change，select，submit，keydown，keypress，keyup和error等。當(dāng)然也可以自定義名稱。

第2個(gè)參數(shù)為可選參數(shù)，作為event.data屬性值傳遞給事件對(duì)象的額外數(shù)據(jù)對(duì)象。

第3個(gè)參數(shù)則是用來(lái)綁定的處理函數(shù)。

注意：可以發(fā)現(xiàn)，jQuery中的事件綁定類型比普通的JavaScript事件綁定類型少了on。

1. 基本效果
假設(shè)網(wǎng)頁(yè)中有一個(gè)FAQ，單擊標(biāo)題鏈接將顯示內(nèi)容。
HTML：

    <div id="panel">
        <h5 class="head">什么是jQuery</h5>
        <div class="content">
            jQuery是............................................................
            ....................................................................
            程序員的設(shè)計(jì)思路和編寫程序的方式。
        </div>
    </div>

設(shè)置CSS后如圖。

現(xiàn)在需求如下：

1. 等待DOM加載完畢
2. 找到標(biāo)題所在的元素，綁定click事件
3. 找到內(nèi)容元素，將內(nèi)容元素顯示

很容易就能寫出：

    $(function() {
        $("#panel h5.head").bind("click",function() {
            $(this).next().show();      // $(this).next() 獲取class => .content
        })
    })

運(yùn)行代碼，單擊”內(nèi)容”鏈接，“內(nèi)容”就展開(kāi)了。

與ready()方法一樣，bind()方法也可以多次調(diào)用。

this引用的是攜帶相應(yīng)行為的DOM元素，為了使該DOM元素能夠使用jQuery中的方法，可以使用$(this)將其轉(zhuǎn)換為jQuery對(duì)象。

2. 加強(qiáng)效果
需求：
第二次單擊“標(biāo)題”，“內(nèi)容”隱藏；再次單擊“標(biāo)題”，“內(nèi)容”又顯示，兩個(gè)動(dòng)作循環(huán)出現(xiàn)。

    $(function() {
        $("#panel h5.head").bind("click",function() {
            if ($(this).next().is(":visible")) {
                $(this).next().hide();
            } else {
                $(this).next().show();
            }
        })
    })

代碼中，發(fā)現(xiàn)$(this).next()多次使用，因此可以為它定義一個(gè)局部變量。

    var $content = $(this).next();

然后把局部變量引入到代碼中，改進(jìn)后的jQuery代碼如下：

    $(function() {
        $("#panel h5.head").bind("click",function() {
            var $content = $(this).next();
            if ($content.is(":visible")) {
                $content.hide();
            } else {
                $content.show();
            }
        })
    })

優(yōu)化建議：當(dāng)發(fā)現(xiàn)相同的選擇器在代碼中多次出現(xiàn)，請(qǐng)用變量把它緩存起來(lái)

3. 改變綁定事件的類型

上面例子中給元素綁定的是事件類型是click，當(dāng)用戶單擊的時(shí)候會(huì)觸發(fā)綁定的事件，然后執(zhí)行事件的函數(shù)代碼?，F(xiàn)在把事件類型換成mouseover和mouseout，即光標(biāo)滑過(guò)時(shí)，就會(huì)觸發(fā)事件。

    $(function() {
        $("#panel h5.head").bind("mouseover",function() {
            $(this).next().show();
        }).bind("mouseout",function() {
            $(this).next().hide();
        })
    })

4. 簡(jiǎn)寫綁定事件

像click、mouseover、mouseout這類事件，在程序中經(jīng)常會(huì)用到，jQuery為此提供一套簡(jiǎn)寫的方法。簡(jiǎn)寫方法和bind()方法的使用類似，實(shí)現(xiàn)效果相同，唯一的區(qū)別是能夠減少代碼量。

    $(function() {
        $("#panel h5.head").mouseover(function() {
            $(this).next().show();
        }).mouseout(function() {
            $(this).next().hide();
        })
    })

合成事件

jQuery中有兩個(gè)合成事件，hover()和toggle()。

1. hover()
語(yǔ)法結(jié)構(gòu)為：

    hover(enter,leave);

hover()用于模擬光標(biāo)懸停事件。當(dāng)光標(biāo)移動(dòng)到元素上時(shí)，會(huì)觸發(fā)指定的第一個(gè)函數(shù)（enter）；當(dāng)光標(biāo)移除這個(gè)元素時(shí)，觸發(fā)指定第二個(gè)函數(shù)（leave）。

所以可以：

    $(function() {
        $("#panel h5.head").hover(function() {
            $(this).next().show();
        },function() {
            $(this).next().hide();
        })
    })

注意：

• CSS中有偽類選擇符，如:hover，當(dāng)用戶光標(biāo)懸停在元素上時(shí)，會(huì)改變?cè)氐耐庥^。
• hover()方法準(zhǔn)確來(lái)說(shuō)是替代jQuery中的bind("mouseenter")和bind("mouseleave")，而不是替代bind("mouseover")和bind("mouseout")。

2. toggle()
語(yǔ)法結(jié)構(gòu)為：

    toggle(fn1,fn2,...fnN);

toggle()用于模擬鼠標(biāo)連續(xù)單擊事件。第1次單擊元素，會(huì)觸發(fā)第1個(gè)函數(shù)fn1；當(dāng)再次單擊同一元素時(shí)，則觸發(fā)指定的第2個(gè)函數(shù)fn2；如果有更多函數(shù)，則依次觸發(fā)，直到最后一個(gè)。隨后的每次單擊都重復(fù)對(duì)這幾個(gè)函數(shù)的輪番調(diào)用。

    $(function() {
        $("#panel h5.head").bind("click",function() {
            if ($(this).next().is(":visible")) {
                $(this).next().hide();
            } else {
                $(this).next().show();
            }
        })
    })

3. 再次加強(qiáng)效果
為了有更好的用戶體驗(yàn)，現(xiàn)在需要在用戶單擊“標(biāo)題”鏈接后，不僅顯示“內(nèi)容”，而且高亮顯示“標(biāo)題”。
首先定義一個(gè)CSS樣式：

    .highlight {
        background: #ff3300;
    }

    $(function() {
        $("#panel h5.head").bind("click",function() {
            if ($(this).next().is(":visible")) {
                $(this).next().hide();
                $(this).removeClass("highlight");
            } else {
                $(this).next().show();
                $(this).addClass("highlight");
            }
        })
    })

事件冒泡

1. 什么是冒泡
在頁(yè)面上可以有多個(gè)事件，也可以多個(gè)元素響應(yīng)同一個(gè)事件。假設(shè)網(wǎng)頁(yè)上有兩個(gè)元素，其中一個(gè)元素嵌套在另一個(gè)元素內(nèi)，并且都被綁定了click事件，同時(shí)body元素上也綁定了click事件：

<body>
    <div id="content">
        外層div元素
        <span>內(nèi)層span元素</span>
        外層div元素
    </div>
    <div id="msg"></div>
</body>

    $(function() {
        $("span").bind("click",function() {
            var txt = $("#msg").html() + "<p>內(nèi)層span元素被單擊</p>";
            $("#msg").html(txt);
        });
        $("#content").bind("click",function() {
            var txt = $("#msg").html() + "<p>外層div元素被單擊</p>";
            $("#msg").html(txt);
        })
        $("body").bind("click",function() {
            var txt = $("#msg").html() + "<p>body元素被單擊</p>";
            $("#msg").html(txt);
        })
    })

當(dāng)單擊內(nèi)部span元素的時(shí)候，即觸發(fā)span元素的click事件時(shí)，會(huì)輸出3條紀(jì)錄，這就是由事件冒泡引起。

在單擊span元素的同時(shí)，也單擊了包含span元素的元素div和包含div元素的元素body，并且每一個(gè)元素都會(huì)按照特定的順序響應(yīng)click事件。

2. 事件冒泡引發(fā)的問(wèn)題
事件冒泡可能會(huì)引起預(yù)料之外的效果。比如，本來(lái)只想觸發(fā)span元素的click事件，然而div元素和body元素的click事件也同時(shí)被觸發(fā)了，因此有必要對(duì)作用范圍進(jìn)行限制。

事件對(duì)象
由于IE-DOM和標(biāo)準(zhǔn)DOM的實(shí)現(xiàn)事件對(duì)象的方法各不相同，導(dǎo)致在不同瀏覽器中獲取事件對(duì)象變得比較困難。針對(duì)這個(gè)問(wèn)題，jQuery進(jìn)行了必要的擴(kuò)展和封裝，從而使得在任何瀏覽器中都能輕松地獲取事件對(duì)象以及事件對(duì)象的一些屬性。

    $("element").bind("click",function(event) {
        // ...
    });

這樣，當(dāng)單擊element元素時(shí)，事件對(duì)象就被創(chuàng)建了。這個(gè)事件對(duì)象只有事件處理函數(shù)才能訪問(wèn)到。事件處理函數(shù)執(zhí)行完畢后，事件對(duì)象就被銷毀。

停止事件冒泡
停止事件冒泡可以阻止事件中其他對(duì)象的事件處理程序被執(zhí)行，在jQuery中提供了stopPropagation()來(lái)停止事件冒泡。

    $("span").bind("click",function(event) {
        var txt = $("#msg").html() + "<p>span元素被單擊</p>";
        $("#msg").html(txt);
        event.stopPropagation();
    })

當(dāng)單擊span元素時(shí)，只會(huì)觸發(fā)span元素上的click事件，而不會(huì)觸發(fā)div元素和body元素的click事件。

阻止默認(rèn)行為
網(wǎng)頁(yè)中的元素都有自己的默認(rèn)的行為，例如，單擊超鏈接后會(huì)跳轉(zhuǎn)、單擊提交按鈕后表單提交，有時(shí)需要阻止元素的默認(rèn)行為。

在jQuery中，使用preventDefault()方法來(lái)阻止元素默認(rèn)行為。

    event.stopPropagation();

事件捕獲
事件捕獲和事件冒泡是剛好相反的兩個(gè)過(guò)程，事件捕獲是從最頂端往下觸發(fā)。

事件捕獲是從最外層元素開(kāi)始，然后再到最里層元素。因此綁定的click事件，首先會(huì)傳遞給body元素，然后到div，最后才到span元素。

遺憾的是，并非所有主流瀏覽器都支持事件捕獲，并且這個(gè)缺陷無(wú)法通過(guò)JavaScript來(lái)修復(fù)，jQuery不支持事件捕獲。如果需要用到，直接使用原生JavaScript。

事件對(duì)象的屬性

event.type
該方法作用是可以獲取到事件的類型。

    $("a").click(function(event) {
        alert(event.type);  // 獲取事件類型
        return false;       // 阻止事件跳轉(zhuǎn)
    })

event.preventDefault()
阻止默認(rèn)的事件行為。JavaScript中符合W3C規(guī)范的preventDefault()方法在IE中無(wú)效，jQuery對(duì)其進(jìn)行了封裝，可以兼容各種瀏覽器。

event.target
event.target的作用是獲取到觸發(fā)事件的元素，jQuery對(duì)其封裝后，避免了各個(gè)瀏覽器不同標(biāo)準(zhǔn)的差異。

    $("a[).click(function(event) {
        var tg = event.target;          // 獲取事件對(duì)象
        alert(tg.href);
        return false                    // 阻止鏈接跳轉(zhuǎn)
    })

以上代碼會(huì)輸出：

    "http://google.com"

event.relatedTarget
在標(biāo)準(zhǔn)DOM中，mouseover和mouseout所發(fā)生的元素可以通過(guò)event.target來(lái)訪問(wèn)，相關(guān)元素是通過(guò)event.relatedTarget來(lái)訪問(wèn)的。event.relatedTarget在mouseover中相當(dāng)于IE瀏覽器的event.fromElement，在mouseout中相當(dāng)于IE瀏覽器的event.toElement，jQuery對(duì)其進(jìn)行了封裝，使之兼容各種瀏覽器。

event.pageX and event.pageY
該方法的作用是獲取到光標(biāo)相對(duì)于頁(yè)面的x坐標(biāo)和y坐標(biāo)。如果沒(méi)有使用jQuery，那么IE瀏覽器中是用event.x/event.y，在Firefox中是用event.pageX/event.pageY。如果頁(yè)面上有滾動(dòng)條，則還要加上滾動(dòng)條的寬度和高度。

    $("a").click(function(event) {
        alert("Current mouse position: "+event.pageX+", "+event.pageY);
        return false;
    })

event.which
該方法作用是在鼠標(biāo)單擊事件中獲取到鼠標(biāo)的左、中、右鍵；

    $("a").mousedown(function(e) {
        alert(e.which); // 1 = 鼠標(biāo)左鍵 2 = 鼠標(biāo)中鍵  3 = 鼠標(biāo)右鍵
    })

移除事件

在綁定事件的過(guò)程中，不僅可以為同一個(gè)元素綁定多個(gè)事件，也可以為多個(gè)元素綁定同一個(gè)事件。假設(shè)網(wǎng)頁(yè)上有一個(gè)button元素：

<body>
    <button id="btn">單擊我</button>
    <div id="test"></div>
</body>
<script>

    $(function() {
        $("#btn").bind("click",function() {
            $("#test").append("<p>我的綁定函數(shù)1</p>");
        }).bind("click",function() {
            $("#test").append("<p>我的綁定函數(shù)2</p>");
        }).bind("click",function() {
            $("#test").append("<p>我的綁定函數(shù)3</p>");
        })
    })

</script>

1. 移除按鈕元素上以前注冊(cè)的事件
首先在網(wǎng)頁(yè)上添加一個(gè)移除事件的按鈕。

    <button id="delAll">刪除所有事件</button>

最后：

    $("#delAll").click(function() {
        $("#btn").unbind("click");
    })

因?yàn)樵亟壎ǖ亩际莄lick事件，所以布鞋參數(shù)也可以達(dá)到同樣目的。

    $("#delAll").click(function() {
        $("#btn").unbind();
    })

下面來(lái)看看unbind()方法的語(yǔ)法結(jié)構(gòu)。

    unbind([type] , [data])

第1個(gè)參數(shù)是事件類型，第2個(gè)參數(shù)是將要移除的函數(shù)。

1. 如果參數(shù)，則刪除所有綁定的事件。
2. 如果提供了事件類型作為參數(shù)，則只刪除該類型的綁定事件。
3. 如果把綁定時(shí)傳遞的處理函數(shù)作為第2個(gè)參數(shù)，則只有這個(gè)特定的事件處理函數(shù)會(huì)被刪除。

2. 移除<button>元素的其中一個(gè)事件
首先需要為這些匿名處理函數(shù)指定一個(gè)變量。

    $(function() {
        $("#btn").bind("click",myFun1=function() {
            $("#test").append("<p>我的綁定函數(shù)1</p>");
        }).bind("click",myFun2 = function() {
            $("#test").append("<p>我的綁定函數(shù)2</p>")
        }).bind("click",myFun3 = function() {
            $("#test").append("<p>我的綁定函數(shù)3</p>")
        });
    });

    $("#delTwo").click(function() {
        $("#btn").unbind("click",myFun2);   // 刪除綁定函數(shù)2
    })

另外，對(duì)于只需要觸發(fā)一次，隨后就要立即解除綁定的情況，jQuery提供了一種簡(jiǎn)寫方法——one()方法。one()方法可以為元素綁定處理函數(shù)。當(dāng)處理函數(shù)觸發(fā)一次后，立即被刪除。即在每個(gè)對(duì)象上，事件處理函數(shù)只會(huì)被執(zhí)行一次。

one()和bind()方法類似，使用方法也與bind()方法相同。

    $(function() {
        $("#btn").one("click",function() {
            $("#test").append("<p>我的綁定函數(shù)1</p>");
        }).one("click",function() {
            $("#test").append("<p>我的綁定函數(shù)2</p>");            
        }).one("click",function() {
            $("#test").append("<p>我的綁定函數(shù)3</p>");
        });
    });

這里的三個(gè)click事件處理函數(shù)只會(huì)執(zhí)行一次。

模擬操作

1. 常用模擬
以上的例子都是用戶必須單擊按鈕，才能觸發(fā)click事件，但是有時(shí)，需要通過(guò)模擬用戶操作，來(lái)達(dá)到單擊的效果，例如在用戶進(jìn)入頁(yè)面后，就觸發(fā)click事件，不需要用戶主動(dòng)單擊。

在jQuery中，可以使用trigger()方法來(lái)完成模擬操作，例如：

    $("#btn").trigger("click");

為id為btn的按鈕觸發(fā)click事件。
這樣，當(dāng)頁(yè)面裝載完畢后，就會(huì)立刻輸出想要的效果。
也可以直接用簡(jiǎn)化寫法click()。

    $("#btn").click();

    $(function() {
        $("#btn").bind("click",function() {
            $("#test").append("<p>我的綁定函數(shù)1</p>");
        })

        $("#btn").trigger("click");
    })

運(yùn)行后，不需要點(diǎn)擊鼠標(biāo)，就已經(jīng)模擬了一次click事件。

2. 觸發(fā)自定義事件
trigger()方法不僅能觸發(fā)瀏覽器支持的具有相同的名稱的事件，也可以觸發(fā)自定義名稱的事件。
例如為元素綁定一個(gè)myClick的事件，jQuery代碼如下：

        $("#btn").bind("myClick",function() {
            $("#test").append("<p>我的自定義事件</p>");
        })

        $("#btn").trigger("myClick");

3. 傳遞數(shù)據(jù)
trigger(type,[data])方法有兩個(gè)參數(shù)，第1個(gè)參數(shù)是要觸發(fā)的事件類型，第2個(gè)是參數(shù)是要傳遞給事件處理函數(shù)的附加數(shù)據(jù)，以數(shù)組形式傳遞。通?？梢酝ㄟ^(guò)傳遞一個(gè)參數(shù)給回調(diào)函數(shù)來(lái)區(qū)別這次事件是代碼觸發(fā)還是用戶觸發(fā)。

        $("#btn").bind("click",function(event,message1,message2) {
            $("#test").append("<p>" + message1 + message2 + "</p>");
        })

        $("#btn").trigger("myClick",["我的自定義","事件"]);     // 傳遞兩個(gè)數(shù)據(jù)

運(yùn)行代碼如圖：

4. 執(zhí)行默認(rèn)操作
trigger()方法觸發(fā)事件后，會(huì)執(zhí)行瀏覽器默認(rèn)操作。如：

    $("input").trigger("focus");

以上代碼不僅會(huì)觸發(fā)為<input>元素綁定的focus事件，也會(huì)使<input>元素本身得到焦點(diǎn)（這是瀏覽器默認(rèn)操作）

如果只想觸發(fā)綁定的focus事件，而不想執(zhí)行瀏覽器默認(rèn)操作，可以使用jQuery中另一個(gè)類似的方法——triggerHandler()方法。

    $("input").triggerHandler("focus");

該方法會(huì)觸發(fā)<input>元素上綁定的特定事件，同時(shí)取消瀏覽器對(duì)此事件的默認(rèn)操作，即文本框值觸發(fā)綁定的focus事件，不會(huì)得到焦點(diǎn)。

其他用法

1. 綁定多個(gè)事件類型
例如可以為事件一次性綁定多個(gè)事件類型。

        $("div").bind("mouseover mouseout",function() {
            $(this).toggleClass("over");
        })

當(dāng)光標(biāo)滑入<div>元素時(shí)，該元素的class切換為over；當(dāng)光標(biāo)滑出<div>元素時(shí)，class切換為先前的值。這段代碼等同于：

        $("div").bind("mouseover",function() {
            $(this).toggleClass("over");
        }).bind("mouseout",function() {
            $(this).toggleClass("over");
        });

2. 添加事件命名空間，便于管理
例如可以把為元素綁定的多個(gè)事件類型用命名空間規(guī)范起來(lái)：

    $(function() {
        $("div").bind("click.plugin",function() {
            $("body").append("<p>click event</p>");
        });
        $("div").bind("mouseover.plugin",function() {
            $("body").append("<p>mouseover event</p>");
        });
        $("div").bind("dblclick",function() {
            $("body").append("<p>dblclick event</p>");
        });
        $("button").click(function() {
            $("div").unbind(".plugin");
        });
    });

在所綁定的事件類型后面添加命名空間，這樣在刪除事件時(shí)只需指定命名空間即可。單擊<button>元素后，plugin的命名空間被刪除，而不在plugin命名空間的dblclick事件依然存在。

    $(function() {
        $("div").bind("click.plugin",function() {
            $("body").append("<p>click event</p>");
        });
        $("div").bind("mouseover.plugin",function() {
            $("body").append("<p>mouseover event</p>");
        });
        $("div").bind("dblclick",function() {
            $("body").append("<p>dblclick event</p>");
        });
        $("button").click(function() {
            $("div").unbind(".plugin");
        });
    })

刪除多個(gè)事件代碼也可以寫為鏈?zhǔn)秸{(diào)用。

    $("div").unbind("click").unbind("mouseover");

3. 相同事件名稱，不同命名空間執(zhí)行方法

例如可以為元素綁定相同的事件類型，然后以命名空間不同按需調(diào)用。

    $(function() {
        $("div").bind("click",function() {
            $("body").append("<p>click 事件</p>");
        });
        $("div").bind("click.plugin",function() {
            $("body").append("<p>click.plugin 事件</p>");
        });
        $("button").click(function() {
            $("div").trigger("click!");     // 注意click后面的感嘆號(hào)
        });
    });

當(dāng)單擊<div>元素后，會(huì)同時(shí)觸發(fā)click事件和click.plugin事件。如果只是單擊button元素，則只觸發(fā)click事件，而不觸發(fā)click.plugin事件。注意，trigger("click!")后面的感嘆號(hào)的作用是匹配所有不包含在命名空間中的click方法。

如果需要兩者都被觸發(fā)：

    $("div").trigger("click");