摘要：可以傳遞三個(gè)參數(shù)表示一個(gè)或多個(gè)事件類型，比如。表示綁定到指定元素的處理函數(shù)。我們稱它為簡(jiǎn)寫事件。必須在中，并且使用作為事件觸發(fā)元素，不然無(wú)效。和表示鼠標(biāo)移入和移出的時(shí)候觸發(fā)。按下返回按下返回和分別表示光標(biāo)激活和丟失，事件觸發(fā)時(shí)機(jī)是當(dāng)前元素。

轉(zhuǎn)自個(gè)人博客

在JavaScript 有一個(gè)非常重要的功能，就是事件驅(qū)動(dòng)。如果你的網(wǎng)頁(yè)需要與用戶進(jìn)行交互的話，就不可能不用到事件。它在頁(yè)面完全加載后，用戶通過(guò)鼠標(biāo)或鍵盤觸發(fā)頁(yè)面中綁定事件的元素即可觸發(fā)。jQuery為開發(fā)者更有效率的編寫事件行為，封裝了大量事件方法供我們使用。

如果你學(xué)習(xí)過(guò)原生的javascript事件，比如常用的事件：click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout等等。如果恰好你使用的是事件綁定的方式進(jìn)行觸發(fā)的話，一定會(huì)知道它有多么難處理，各種瀏覽器的兼容性，this的指向等等，但是在jQuery中，一切都不再是問(wèn)題了。

jQuery 通過(guò).bind()方法來(lái)為元素綁定這些事件。可以傳遞三個(gè)參數(shù)：.bind(eventType [,eventData ],handler(event))

eventType：表示一個(gè)或多個(gè)DOM事件類型，比如click mouseover。

eventData：可選參數(shù)，表示一個(gè)對(duì)象，它包含的數(shù)據(jù)鍵值對(duì)映射將被傳遞給事件處理程序。

handler(event)：表示綁定到指定元素的處理函數(shù)。event表示事件對(duì)象。

下面就是綁定的幾種方式：

點(diǎn)擊按鈕后執(zhí)行匿名函數(shù)

$("button").bind("click", function() {
    alert("點(diǎn)擊！");//使用點(diǎn)擊事件
});

執(zhí)行普通函數(shù)式無(wú)須圓括號(hào)

$("button").bind("click", fn); 
function fn() {//普通處理函數(shù)
    alert("點(diǎn)擊！");
}

可以同時(shí)綁定多個(gè)事件

$("button").bind("mouseout mouseover", function() { 
    $("div").html(function(index, value) {
        return value + "1";//移入和移出分別執(zhí)行一次
    });
});

另一種方式：傳遞一個(gè)對(duì)象

$("button").bind({ 
    "mouseout": function() { //事件名的引號(hào)可以省略
        alert("移出");
    },
    "mouseover": function() {
        alert("移入");
    }
});

刪除綁定函數(shù)：

刪除綁定函數(shù).unbind( eventType [, handler ] )有三種不同的用法:

$("button").unbind(); //刪除當(dāng)前元素的所有事件,包括匿名執(zhí)行的，在js中匿名執(zhí)行的事件函數(shù)無(wú)法刪除。

$("button").unbind("click"); //刪除當(dāng)前元素的click事件，使unbind參數(shù)刪除指定類型事件

$("button").unbind("click", fn1); //只刪除click事件的fn1處理函數(shù)。

當(dāng)然jQuery為開發(fā)者不簡(jiǎn)簡(jiǎn)單單提供了事件綁定的方法就不管其它了，為了使開發(fā)者更加方便的綁定事件，jQuery 封裝了常用的事件以便節(jié)約更多的代碼。我們稱它為簡(jiǎn)寫事件。

大部分事件都如同上面表格中的描述一般比較簡(jiǎn)單，也比較好理解。

下面著重講幾個(gè)需要注意的地方：

unload(fn)、resize(fn)、scroll(fn)，使用$(window)對(duì)象觸發(fā)。

change(fn)：觸發(fā)的條件是，輸入框的值有改變，且失去焦點(diǎn)。

submit(fn)：必須在form中，并且使用$("form")作為事件觸發(fā)元素，不然無(wú)效。

.mouseover()和.mouseout()表示鼠標(biāo)移入和移出的時(shí)候觸發(fā)。那么 jQuery 還封裝了另外一組：.mouseenter()和.mouseleave()表示鼠標(biāo)穿過(guò)和穿出的時(shí)候觸發(fā)。那么這兩組本質(zhì)上有什么區(qū)別呢？
手冊(cè)上的說(shuō)明是：.mouseenter()和.mouseleave()這組穿過(guò)子元素不會(huì)觸發(fā)，而.mouseover()和.mouseout()則會(huì)觸發(fā)。

經(jīng)過(guò)實(shí)驗(yàn)，代碼如下：

可以看到，鼠標(biāo)在div內(nèi)移動(dòng)時(shí)，會(huì)不停觸發(fā)事件函數(shù)，輸出值。而mouseenter則不會(huì)有這個(gè)問(wèn)題。

.keydown()、.keyup()返回的是鍵碼，而.keypress()返回的是字符編碼。

$("input").keydown(function(e) {
    alert(e.keyCode); //按下 a 返回 229
});
$("input").keypress(function(e) {
    alert(e.charCode); //按下 a 返回 97
});

.focus()和.blur()分別表示光標(biāo)激活和丟失，事件觸發(fā)時(shí)機(jī)是當(dāng)前元素。而.focusin()
和.focusout()也表示光標(biāo)激活和丟失，但是當(dāng)子元素聚焦或丟失時(shí)也觸發(fā)事件。

jQuery 提供了許多最常用的事件效果，組合一些功能實(shí)現(xiàn)了一些復(fù)合事件，比如切換功
能、智能加載等。

$("div").hover(function () {//背景移入移出切換效果
    $(this).css("background", "black"); //mouseenter 效果
}, function () {
    $(this).css("background", "red"); //mouseleave 效果，可省略
});

注意：.hover()方法是結(jié)合了.mouseenter()方法和.mouseleva()方法，并非.mouseover()
和.mouseout()方法。

.toggle()有兩層含義，一層就如表格中所說(shuō)（1.9版移除），一層在動(dòng)畫中會(huì)用到，在這里不進(jìn)行講述，若想實(shí)現(xiàn)表格中的效果也特別簡(jiǎn)單，可以進(jìn)行如下判斷：

var flag = 1; //計(jì)數(shù)器,標(biāo)記
$("div").click(function () {
    if (flag == 1) { //第一次點(diǎn)擊
        $(this).css("background", "black");
        flag = 2;
    } else if (flag == 2) { //第二次點(diǎn)擊
        $(this).css("background", "blue");
        flag = 3;
    } else if (flag == 3) { //第三次點(diǎn)擊
        $(this).css("background", "red");
        flag = 1;
    }
});

JavaScript 在事件處理函數(shù)中默認(rèn)傳遞了 event 對(duì)象，也就是事件對(duì)象。但由于瀏覽器

的兼容性，開發(fā)者總是會(huì)做兼容方面的處理。jQuery 在封裝的時(shí)候，解決了這些問(wèn)題，并且
還創(chuàng)建了一些非常好用的屬性和方法。

處理函數(shù)的e就是event事件對(duì)象（JS中需做兼容處理），event 對(duì)象有很多可用的屬性和方法，這里先演示一下：

//通過(guò)處理函數(shù)傳遞事件對(duì)象
$("input").bind("click", function (e) { //接受事件對(duì)象參數(shù)
    alert(e.type);//打印出click
});

下面是一些常用的屬性：

注意：

target：是獲取觸發(fā)元素的DOM，就是你點(diǎn)了哪個(gè)就是哪個(gè)。
currentTarget：是獲取監(jiān)聽元素的DOM，你把事件綁定在誰(shuí)身上就是誰(shuí)。

通過(guò) event.data 獲取額外數(shù)據(jù)，可以是數(shù)字、字符串、數(shù)組、對(duì)象

$("input").bind("click", 123, function () { //傳遞 data 數(shù)據(jù)
    alert(e.data); //獲取數(shù)字?jǐn)?shù)據(jù)123
});

獲取鼠標(biāo)的左中右鍵

$(document).mousedown(function (e) {
    alert(e.which);
});

獲取鍵盤的按鍵

$("input").keyup(function (e) {
    alert(e.which);
});

//獲取觸發(fā)元素鼠標(biāo)當(dāng)前的位置

$(document).click(function (e) {
    alert(e.screenY+ "," + e.pageY + "," + e.clientY);
});

如果看我的百度前端技術(shù)學(xué)院task0002的筆記的話，應(yīng)該都知道事件冒泡是怎么樣的，事件代理就是根據(jù)它來(lái)實(shí)現(xiàn)的。這里我稍微說(shuō)一下事件冒泡是什么樣的，事件冒泡其實(shí)就是在點(diǎn)擊一個(gè)元素時(shí)，會(huì)一層一層的向父元素遞進(jìn)當(dāng)點(diǎn)擊一個(gè)div時(shí)其實(shí)是這樣的div -> body -> html -> document。

下面來(lái)看一下冒泡和默認(rèn)行為的一些方法：

這些方法都是event對(duì)象的一些方法，需要注意的是：
先來(lái)看到最后兩個(gè)，名字都長(zhǎng)到讓人記不住的方法，，如代碼中所示：

$("div").click(function(e) {
    e.stopImmediatePropagation() ;
    alert("div1");//只彈出div1
});
$("div").click(function(e) {
    alert("div2");//因第一個(gè)點(diǎn)擊事件取消了該事件的后續(xù)處理函數(shù)，這里將不被執(zhí)行
});

同時(shí)取消默認(rèn)行為以及事件冒泡：

三省吾身丶丶

注意這段代碼中，我們可以看到a被彈出來(lái)了，但是鏈接并沒(méi)有跳轉(zhuǎn)，而且document也沒(méi)有被彈出，因?yàn)?b>return false相當(dāng)于同時(shí)了這兩件事情，只不過(guò)，在使用表格中的檢測(cè)方法時(shí)，返回的false。
而使用event對(duì)象的方法實(shí)現(xiàn)阻止時(shí)，檢測(cè)返回true。

jQuery 不但封裝了大量常用的事件處理，還提供了不少高級(jí)事件方便開發(fā)者使用。比

如模擬用戶觸發(fā)事件、事件委托事件、和統(tǒng)一整合的 on 和 off，以及僅執(zhí)行一次的 one 方
法。這些方法大大降低了開發(fā)者難度，提升了開發(fā)者的開發(fā)體驗(yàn)。

在事件觸發(fā)的時(shí)候，有時(shí)我們需要一些模擬用戶行為的操作。例如：當(dāng)網(wǎng)頁(yè)加載完畢后自行點(diǎn)擊一個(gè)按鈕觸發(fā)一個(gè)事件，而不是用戶去點(diǎn)擊。

先來(lái)一個(gè)最機(jī)械的.trigger()：
點(diǎn)擊

$("button").click(function() {
    alert("這里是第一次點(diǎn)擊來(lái)自模擬！");
});
$("button").trigger("click");

打開網(wǎng)頁(yè)，可以看到內(nèi)容并不需要被點(diǎn)擊，就直接被彈了出來(lái)。
當(dāng)然不會(huì)那么復(fù)雜，來(lái)進(jìn)階一下吧，只需要把.trigger("click")連在click事件之后就可以了，效果當(dāng)然一樣。
但是，這樣好像還是有點(diǎn)麻煩，jQuery怎么可能讓我們那么麻煩，把添加的字符串刪除，添加.click()，現(xiàn)在就是這樣的：

$("input").click(function () {
    alert("我的第一次點(diǎn)擊來(lái)自模擬！");//效果和上面一樣
}).click();

這種簡(jiǎn)單的方法jQuery幾乎所有的常用事件都提供了：

下面來(lái)介紹一下.trigger()的一些進(jìn)階用法，當(dāng)然如果要進(jìn)行這樣的參數(shù)傳遞的話，就不能使用上面的簡(jiǎn)單方法了：
有時(shí)在模擬用戶行為的時(shí)候，我們需要給事件執(zhí)行傳遞參數(shù)，這個(gè)參數(shù)類似與在事件綁定中的event.data的額外數(shù)據(jù)，可以是數(shù)字、字符串、數(shù)組、對(duì)象。需要注意的是當(dāng)傳遞一個(gè)值的時(shí)候，直接傳遞即可。當(dāng)兩個(gè)值以上，需要在前后用中括號(hào)包含起來(lái)。

$("button").click(function (e, data1, data2) {
    alert(data1.a + "," + data2[1]);//加載后直接彈出1,456
}).trigger("click", [{"a" : "1", "b" : "2"}, ["123","456"]]);

在使用bind時(shí)，bind傳入的額外數(shù)據(jù)通過(guò)event.data獲取，該數(shù)據(jù)傳輸模式不變。

模擬用戶行為時(shí)，除了通過(guò) JavaScript 事件名觸發(fā)，也可以通過(guò)自定義的事件觸發(fā)，所謂自定義事件其實(shí)就是一個(gè)被.bind()綁定的任意函數(shù)。

$("input").bind("myEvent", function () {
alert("自定義事件！");
}).trigger("myEvent");

這是另一個(gè)模擬用戶行為的方法，用法和trigger()方法一樣。但是在某些情況下有如下區(qū)別：

.triggerHandler()方法并不會(huì)觸發(fā)事件的默認(rèn)行為，而.trigger()會(huì)，例如：

$("form").trigger("submit"); //模擬用戶執(zhí)行提交，并跳轉(zhuǎn)到執(zhí)行頁(yè)面
$("form").triggerHandler("submit"); //模擬用戶執(zhí)行提交，并阻止的默認(rèn)行為

.triggerHandler()方法只會(huì)影響第一個(gè)匹配到的元素，而.trigger()會(huì)影響所有。

.triggerHandler()方法會(huì)返回當(dāng)前事件執(zhí)行的返回值，如果沒(méi)有返回值，則返回
undefined；而.trigger()則返回當(dāng)前包含事件觸發(fā)元素的 jQuery 對(duì)象(方便鏈?zhǔn)竭B綴調(diào)用)。

.trigger()在創(chuàng)建事件的時(shí)候，會(huì)冒泡。但這種冒泡是自定義事件才能體現(xiàn)出來(lái)，是
jQuery 擴(kuò)展于 DOM 的機(jī)制，并非 DOM 特性。而.triggerHandler()不會(huì)冒泡。

有時(shí)，我們想對(duì)事件進(jìn)行移除。但對(duì)于同名同元素綁定的事件移除往往比較麻煩，這個(gè)

時(shí)候，可以使用事件的命名空間解決。（主要是處理綁定匿名函數(shù)的情況）

$("button").bind("click.abc", function(e) {
    alert("abc");
});
$("button").bind("click.xyz", function(e) {
    alert("xyz");
});
$("button").unbind("click.abc" );//處理過(guò)后只彈出xyz。

注意：也可以直接使用(".abc")，這樣的話，可以移除相同命名空間的不同事件。對(duì)于模擬操作.trigger()和.triggerHandler()，用法也是一樣的。$("input").trigger("click.abc")

事件委托也就是事件代理。我在task0002（二）- DOM + 事件已經(jīng)談過(guò)了。而且也自己實(shí)現(xiàn)了一下事件代理，這里稍微再介紹一下:

“事件代理” 的本質(zhì)是利用了事件冒泡的特性。當(dāng)一個(gè)元素上的事件被觸發(fā)的時(shí)候，比如說(shuō)鼠標(biāo)點(diǎn)擊了一個(gè)按鈕，同樣的事件將會(huì)在那個(gè)元素的所有祖先元素中被觸發(fā)。這一過(guò)程被稱為事件冒泡；

這個(gè)事件從原始元素開始一直冒泡到DOM樹的最上層。任何一個(gè)事件的目標(biāo)元素都是最開始的那個(gè)元素，在我們的這個(gè)例子中也就是按鈕，并且它在我們的元素對(duì)象中以屬性的形式出現(xiàn)。

使用事件代理，我們可以把事件處理器添加到一個(gè)元素上，等待一個(gè)事件從它的子級(jí)元素里冒泡上來(lái)，并且可以得知這個(gè)事件是從哪個(gè)元素開始的。

對(duì)于動(dòng)態(tài)生成的節(jié)點(diǎn)同樣有效。

實(shí)現(xiàn)如下：

    點(diǎn)擊
    點(diǎn)擊

注意：.delegate()需要指定父元素，然后第一個(gè)參數(shù)是當(dāng)前元素，第二個(gè)參數(shù)是事件方式，第三個(gè)參數(shù)是執(zhí)行函數(shù)。和.bind()方法一樣，可以傳遞額外參數(shù)。.undelegate()和.unbind()方法一樣可以直接刪除所有事件，比如：.undelegate("click")。也可以刪除命名空間的事件，比如：.undelegate("click.abc")。

開胃菜完了，下面才是重點(diǎn)！

目前綁定事件和解綁的方法有三組共六個(gè)。由于這三組的共存可能會(huì)造成一定的混亂，為此 jQuery1.7 以后推出了.on()和.off()方法徹底摒棄前面三組。（暫時(shí)未移除）

替代.bind()方式

$("button").on("click", function () {
    alert("替代.bind()");
});

替代.bind()方式，并使用額外數(shù)據(jù)和事件對(duì)象

$(".button").on("click", {user : "Lee"}, function (e) {
    alert("替代.bind()" + e.data.user);//lee
});

替代.bind()方式，并綁定多個(gè)事件

$(".button").on("mouseover mouseout", function () {
    alert("替代.bind()移入移出！");
});
$(".button").on({//以對(duì)象模式綁定多個(gè)事件
    mouseover : function () {
        alert("替代.bind()移入！");
    },
    mouseout : function () {
        alert("替代.bind()移出！");
    }
});

替代.bind()方式，阻止默認(rèn)行為并取消冒泡

$("form").on("submit", function () {
    return false;
});
$("form").on("submit", false);//在function中只有阻止事件存在時(shí)，這樣寫可以簡(jiǎn)化代碼，效果相同

$("form").on("submit", function (e) {//當(dāng)然使用事件對(duì)象也是可以的
    e.preventDefault();//阻止默認(rèn)行為
    e.stopPropagation();//取消冒泡
});

替代.delegate()，事件委托

$("div").on("click", "button", function () {
    $(this).clone().appendTo("div");//每次點(diǎn)擊都復(fù)制一個(gè)button
});

特別注意：.on()和.delegate()之間的選擇器和事件名稱的位置！因?yàn)楸阌诙喾N事件處理方式，將選擇器與事件名稱調(diào)換了位置

替代.unbind()方式，移除事件

$(".button").off("click");
$(".button").off("click", fn);
$(".button").off("click.abc");

代替.undelegate()，取消事件委托
$("#box").off("click", ".button");

注意：和之前方式一樣，事件委托和取消事件委托也有各種搭配方式，比如額外數(shù)據(jù)、命名空間等等。

不管是.bind()還是.on()，綁定事件后都不是自動(dòng)移除事件的，需要通過(guò).unbind()和.off()來(lái)手工移除。jQuery 提供了.one()方法，綁定元素執(zhí)行完畢后自動(dòng)移除事件，可以方法僅觸發(fā)一次的事件。

類似于.bind()只觸發(fā)一次

$("button").one("click", function () {
    alert("one 僅觸發(fā)一次！");
});

類似于.delegate()只觸發(fā)一次

$("div").one("click", "button", function (){
    $(this).clone().appendTo("div");//只復(fù)制一次
});

所以前面的一系列講述，都是為了拋磚引玉，現(xiàn)在在jQuery中對(duì)于事件的處理直接用on 、off 和one這三個(gè)就好了！