JavaScript和HTML之間的交互是通過用戶和瀏覽器操作頁面時引發(fā)的事件來處理的筛严。 jQuery增加并擴展了基本的事件處理機制桨啃。jQuery不僅提供了更加優(yōu)雅的事件處理語法照瘾，而且極大的增強了事件處理能力析命。
加載DOM
瀏覽器加載文檔完畢后，瀏覽器會通過JS為DOM元素添加事件。在常規(guī)的JavaScript代碼中，通常使用window.onload方法使兔，而在jQuery中虐沥，使用的$(document).ready()方法匹涮。 $(document).ready()是事件模塊中最重要的一個函數(shù)喜每，可以極大的提高Web應(yīng)用程序的響應(yīng)速度带兜。jQuery就是用 $(document).ready()方法來代替?zhèn)鹘y(tǒng)JavaScript的window.onload方法的崇堰，通過使用該方法繁莹，可以在DOM載入就緒時就對其進行操縱并調(diào)用執(zhí)行它所綁定的函數(shù)薄风。在使用過程中循诉，需要注意 $(document).ready()方法和window.onload方法之間的細微差別。
1. 執(zhí)行時機
$(document).ready()方法和window.onload方法有相似的功能，但是在執(zhí)行時機方面是有區(qū)別的，window.onload方法才是在網(wǎng)頁中所有元素（包括元素的所有關(guān)聯(lián)文件）完全加載到瀏覽器后才執(zhí)行，JS此時才可以訪問網(wǎng)頁中的任何元素退敦。而通過jQuery中的$(document).ready()方法注冊的事件處理程序，在DOM完全就緒時就可以被調(diào)用。此時例证，網(wǎng)頁的所有元素對jQuery而言都是可以訪問的，但是，這并不意味著這些元素關(guān)聯(lián)的文件都已經(jīng)下載完畢轧葛。
舉一個例子，有一個大型圖庫網(wǎng)站，為網(wǎng)頁中所有圖片添加某些行為，例如單擊圖片后讓它隱藏或顯示。如果使用window.onload方法來處理郭膛，那么用戶必須等到每一幅圖片都加載完畢后则剃，才可以進行操作。如果使用jQuery的$(document).ready()方法進行設(shè)置棍现，只要DOM就緒就可以操作了己肮。不需要等待圖片下載完畢悲关。
另外寓辱，需要注意一點赤拒，在$(document).ready()方法內(nèi)注冊的事件，只要DOM就緒就會被執(zhí)行，因此可能此時元素的關(guān)聯(lián)文件未下載完涮俄，例如與圖片有關(guān)的HTML下載完畢，并且已經(jīng)解析為DOM樹了抡砂，但很有可能圖片還未加載完畢提揍，所以例如圖片的高度和寬度這樣的屬性此時不一定有效绞呈。要解決這個問題，可以使用jQuery中另一個關(guān)于頁面加載的方法——load()缰趋。load()方法會在元素的onload事件中綁定一個處理函數(shù)，如果處理函數(shù)綁定給window對象蓖乘，則會在所有內(nèi)容（包括窗口，框架，對象和圖像等）加載完畢后觸發(fā)彪见，如果處理函數(shù)綁定在元素上淮韭，則會在元素的內(nèi)容加載完畢后觸發(fā)绍些。
$(window).load(function() {
// ...
});
// 等價于
window.onload = function() {
// ....
};
2. 多次使用
windows.onload()和$(document).ready()的區(qū)別
現(xiàn)在有兩個函數(shù)：
alert("one");
}
function two() {
alert("two");
}
當(dāng)網(wǎng)頁加載完畢后，通過如下的JavaScript代碼來分別調(diào)用one函數(shù)和two函數(shù)蕴侧。
window.onload = one;
window.onload = two;
然而運行后刁岸，發(fā)現(xiàn)只彈出two對話框。
字符串"one"對話框不能被彈出的原因是：JavaScript的onload事件一次只保存對一個函數(shù)的引用，它會自動用后面的函數(shù)覆蓋前面的函數(shù)污尉，因此不能在現(xiàn)有的行為上添加新的行為。
為了達到兩個函數(shù)順序觸發(fā)的效果泼差，只能再創(chuàng)建一個新的JavaScript方法來實現(xiàn)动猬。
window.onload = function() {
one();
two();
}
雖然這樣編寫代碼能解決某些問題握童，但還是不能滿足某些需求璃哟，例如有多個JavaScript文件，每個文件都有用到window.onload方法，這種情況用上面提到的方法編寫代碼會非常麻煩逆瑞。而jQuery的$(document).ready()方法能夠很好的處理這些情況吻育，每次調(diào)用$(document).ready()方法都會在現(xiàn)有的行為上追加新的行為肛炮，這些行為函數(shù)會根據(jù)注冊的順序依次執(zhí)行套鹅。例如如下的jQuery代碼高职；
$(document).ready(function() {
one();
})
$(document).ready(function() {
two();
})
3. 簡寫方式
$(document).ready(function() {
})
// 簡寫方式
$(function() {
})
另外怔锌，$(document)也可以簡寫$()埃元，當(dāng)$()不帶參數(shù)時牵啦，默認參數(shù)就是document哈雏。
$().ready(function() {
});
jQuery——事件綁定
在文件裝載完成之后裳瘪，如果打算為元素綁定事件來完成某些操作，則可以使用bind()方法來對匹配元素進行特定事件的綁定黄伊，bind()方法的調(diào)用格式為：
$(selector).bind(event,data,function)
第1個參數(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個參數(shù)為可選參數(shù)钞支，作為event.data屬性值傳遞給事件對象的額外數(shù)據(jù)對象烁挟。
第3個參數(shù)則是用來綁定的處理函數(shù)撼嗓。
注意：可以發(fā)現(xiàn)且警，jQuery中的事件綁定類型比普通的JavaScript事件綁定類型少了
on礁遣。
1. 基本效果
假設(shè)網(wǎng)頁中有一個FAQ祟霍，單擊標(biāo)題鏈接將顯示內(nèi)容。
HTML：
<div id="panel">
<h5 class="head">什么是jQuery</h5>
<div class="content">
jQuery是............................................................
....................................................................
程序員的設(shè)計思路和編寫程序的方式续语。
</div>
</div>
設(shè)置CSS后如圖。
現(xiàn)在需求如下：
- 等待DOM加載完畢
- 找到標(biāo)題所在的元素根暑，綁定click事件
- 找到內(nèi)容元素排嫌，將內(nèi)容元素顯示
很容易就能寫出：
$(function() {
$("#panel h5.head").bind("click",function() {
$(this).next().show(); // $(this).next() 獲取class => .content
})
})
運行代碼淳地，單擊”內(nèi)容”鏈接帅容，“內(nèi)容”就展開了并徘。
與ready()方法一樣麦乞，bind()方法也可以多次調(diào)用姐直。
this引用的是攜帶相應(yīng)行為的DOM元素，為了使該DOM元素能夠使用jQuery中的方法晃听，可以使用$(this)將其轉(zhuǎn)換為jQuery對象能扒。
2. 加強效果
需求：
第二次單擊“標(biāo)題”初斑，“內(nèi)容”隱藏见秤；再次單擊“標(biāo)題”，“內(nèi)容”又顯示乎澄，兩個動作循環(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()多次使用羞酗，因此可以為它定義一個局部變量紊服。
var $content = $(this).next();
然后把局部變量引入到代碼中欺嗤，改進后的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)剂府，請用變量把它緩存起來
3. 改變綁定事件的類型
上面例子中給元素綁定的是事件類型是click腺占，當(dāng)用戶單擊的時候會觸發(fā)綁定的事件衰伯，然后執(zhí)行事件的函數(shù)代碼∫饩ǎ現(xiàn)在把事件類型換成mouseover和mouseout，即光標(biāo)滑過時读慎，就會觸發(fā)事件夭委。
$(function() {
$("#panel h5.head").bind("mouseover",function() {
$(this).next().show();
}).bind("mouseout",function() {
$(this).next().hide();
})
})
4. 簡寫綁定事件
像click株灸、mouseover慌烧、mouseout這類事件屹蚊，在程序中經(jīng)常會用到，jQuery為此提供一套簡寫的方法腐巢。簡寫方法和bind()方法的使用類似，實現(xiàn)效果相同遭京，唯一的區(qū)別是能夠減少代碼量哪雕。
$(function() {
$("#panel h5.head").mouseover(function() {
$(this).next().show();
}).mouseout(function() {
$(this).next().hide();
})
})
合成事件
jQuery中有兩個合成事件斯嚎，hover()和toggle()堡僻。
1. hover()
語法結(jié)構(gòu)為：
hover(enter,leave);
hover()用于模擬光標(biāo)懸停事件疫剃。當(dāng)光標(biāo)移動到元素上時巢价，會觸發(fā)指定的第一個函數(shù)（enter）壤躲；當(dāng)光標(biāo)移除這個元素時碉克，觸發(fā)指定第二個函數(shù)（leave）棉胀。
所以可以：
$(function() {
$("#panel h5.head").hover(function() {
$(this).next().show();
},function() {
$(this).next().hide();
})
})
注意：
- CSS中有偽類選擇符，如:hover窝剖，當(dāng)用戶光標(biāo)懸停在元素上時赐纱，會改變元素的外觀疙描。
- hover()方法準(zhǔn)確來說是替代jQuery中的bind("mouseenter")和bind("mouseleave")起胰，而不是替代bind("mouseover")和bind("mouseout")巫延。
2. toggle()
語法結(jié)構(gòu)為：
toggle(fn1,fn2,...fnN);
toggle()用于模擬鼠標(biāo)連續(xù)單擊事件炉峰。第1次單擊元素疼阔，會觸發(fā)第1個函數(shù)fn1婆廊；當(dāng)再次單擊同一元素時否彩，則觸發(fā)指定的第2個函數(shù)fn2列荔；如果有更多函數(shù)贴浙，則依次觸發(fā)崎溃，直到最后一個。隨后的每次單擊都重復(fù)對這幾個函數(shù)的輪番調(diào)用呼巷。
$(function() {
$("#panel h5.head").bind("click",function() {
if ($(this).next().is(":visible")) {
$(this).next().hide();
} else {
$(this).next().show();
}
})
})
3. 再次加強效果
為了有更好的用戶體驗王悍，現(xiàn)在需要在用戶單擊“標(biāo)題”鏈接后压储，不僅顯示“內(nèi)容”源譬，而且高亮顯示“標(biāo)題”踩娘。
首先定義一個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īng)同一個事件。假設(shè)網(wǎng)頁上有兩個元素傻工，其中一個元素嵌套在另一個元素內(nèi)中捆，并且都被綁定了click事件坊饶，同時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元素的時候泄伪，即觸發(fā)span元素的click事件時，會輸出3條紀(jì)錄匿级，這就是由事件冒泡引起蟋滴。
在單擊span元素的同時，也單擊了包含span元素的元素div和包含div元素的元素body痘绎，并且每一個元素都會按照特定的順序響應(yīng)click事件津函。
2. 事件冒泡引發(fā)的問題
事件冒泡可能會引起預(yù)料之外的效果孤页。比如尔苦，本來只想觸發(fā)span元素的click事件，然而div元素和body元素的click事件也同時被觸發(fā)了，因此有必要對作用范圍進行限制允坚。
事件對象
由于IE-DOM和標(biāo)準(zhǔn)DOM的實現(xiàn)事件對象的方法各不相同魂那，導(dǎo)致在不同瀏覽器中獲取事件對象變得比較困難。針對這個問題稠项，jQuery進行了必要的擴展和封裝冰寻，從而使得在任何瀏覽器中都能輕松地獲取事件對象以及事件對象的一些屬性。
$("element").bind("click",function(event) {
// ...
});
這樣皿渗，當(dāng)單擊element元素時斩芭，事件對象就被創(chuàng)建了。這個事件對象只有事件處理函數(shù)才能訪問到乐疆。事件處理函數(shù)執(zhí)行完畢后划乖，事件對象就被銷毀。
停止事件冒泡
停止事件冒泡可以阻止事件中其他對象的事件處理程序被執(zhí)行挤土，在jQuery中提供了stopPropagation()來停止事件冒泡琴庵。
$("span").bind("click",function(event) {
var txt = $("#msg").html() + "<p>span元素被單擊</p>";
$("#msg").html(txt);
event.stopPropagation();
})
當(dāng)單擊span元素時，只會觸發(fā)span元素上的click事件仰美，而不會觸發(fā)div元素和body元素的click事件迷殿。
阻止默認行為
網(wǎng)頁中的元素都有自己的默認的行為，例如咖杂，單擊超鏈接后會跳轉(zhuǎn)庆寺、單擊提交按鈕后表單提交，有時需要阻止元素的默認行為诉字。
在jQuery中懦尝，使用preventDefault()方法來阻止元素默認行為。
event.stopPropagation();
事件捕獲
事件捕獲和事件冒泡是剛好相反的兩個過程壤圃，事件捕獲是從最頂端往下觸發(fā)陵霉。
事件捕獲是從最外層元素開始，然后再到最里層元素伍绳。因此綁定的click事件踊挠，首先會傳遞給body元素，然后到div冲杀，最后才到span元素效床。
遺憾的是，并非所有主流瀏覽器都支持事件捕獲漠趁，并且這個缺陷無法通過JavaScript來修復(fù)扁凛，jQuery不支持事件捕獲。如果需要用到闯传，直接使用原生JavaScript谨朝。
事件對象的屬性
event.type
該方法作用是可以獲取到事件的類型。
$("a").click(function(event) {
alert(event.type); // 獲取事件類型
return false; // 阻止事件跳轉(zhuǎn)
})
event.preventDefault()
阻止默認的事件行為。JavaScript中符合W3C規(guī)范的preventDefault()方法在IE中無效字币，jQuery對其進行了封裝则披，可以兼容各種瀏覽器。
event.target
event.target的作用是獲取到觸發(fā)事件的元素洗出，jQuery對其封裝后士复，避免了各個瀏覽器不同標(biāo)準(zhǔn)的差異。
$("a[).click(function(event) {
var tg = event.target; // 獲取事件對象
alert(tg.href);
return false // 阻止鏈接跳轉(zhuǎn)
})
以上代碼會輸出：
"http://google.com"
event.relatedTarget
在標(biāo)準(zhǔn)DOM中翩活，mouseover和mouseout所發(fā)生的元素可以通過event.target來訪問阱洪，相關(guān)元素是通過event.relatedTarget來訪問的。event.relatedTarget在mouseover中相當(dāng)于IE瀏覽器的event.fromElement菠镇，在mouseout中相當(dāng)于IE瀏覽器的event.toElement冗荸，jQuery對其進行了封裝，使之兼容各種瀏覽器利耍。
event.pageX and event.pageY
該方法的作用是獲取到光標(biāo)相對于頁面的x坐標(biāo)和y坐標(biāo)蚌本。如果沒有使用jQuery，那么IE瀏覽器中是用event.x/event.y隘梨，在Firefox中是用event.pageX/event.pageY程癌。如果頁面上有滾動條，則還要加上滾動條的寬度和高度轴猎。
$("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)右鍵
})
移除事件
在綁定事件的過程中烦秩，不僅可以為同一個元素綁定多個事件，也可以為多個元素綁定同一個事件郎仆。假設(shè)網(wǎng)頁上有一個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. 移除按鈕元素上以前注冊的事件
首先在網(wǎng)頁上添加一個移除事件的按鈕。
<button id="delAll">刪除所有事件</button>
最后：
$("#delAll").click(function() {
$("#btn").unbind("click");
})
因為元素綁定的都是click事件兜蠕，所以布鞋參數(shù)也可以達到同樣目的扰肌。
$("#delAll").click(function() {
$("#btn").unbind();
})
下面來看看unbind()方法的語法結(jié)構(gòu)。
unbind([type] , [data])
第1個參數(shù)是事件類型熊杨，第2個參數(shù)是將要移除的函數(shù)曙旭。
- 如果參數(shù)，則刪除所有綁定的事件晶府。
- 如果提供了事件類型作為參數(shù)桂躏，則只刪除該類型的綁定事件。
- 如果把綁定時傳遞的處理函數(shù)作為第2個參數(shù)川陆，則只有這個特定的事件處理函數(shù)會被刪除剂习。
2. 移除<button>元素的其中一個事件
首先需要為這些匿名處理函數(shù)指定一個變量。
$(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
})
另外，對于只需要觸發(fā)一次鳞绕，隨后就要立即解除綁定的情況失仁，jQuery提供了一種簡寫方法——one()方法。one()方法可以為元素綁定處理函數(shù)们何。當(dāng)處理函數(shù)觸發(fā)一次后萄焦，立即被刪除。即在每個對象上冤竹，事件處理函數(shù)只會被執(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>");
});
});
這里的三個click事件處理函數(shù)只會執(zhí)行一次烘苹。
模擬操作
1. 常用模擬
以上的例子都是用戶必須單擊按鈕，才能觸發(fā)click事件片部，但是有時镣衡，需要通過模擬用戶操作涯穷，來達到單擊的效果镐作，例如在用戶進入頁面后，就觸發(fā)click事件次酌，不需要用戶主動單擊辖所。
在jQuery中惰说，可以使用trigger()方法來完成模擬操作，例如：
$("#btn").trigger("click");
為id為btn的按鈕觸發(fā)click事件缘回。
這樣吆视，當(dāng)頁面裝載完畢后，就會立刻輸出想要的效果酥宴。
也可以直接用簡化寫法click()啦吧。
$("#btn").click();
$(function() {
$("#btn").bind("click",function() {
$("#test").append("<p>我的綁定函數(shù)1</p>");
})
$("#btn").trigger("click");
})
運行后，不需要點擊鼠標(biāo)拙寡，就已經(jīng)模擬了一次click事件授滓。
2. 觸發(fā)自定義事件
trigger()方法不僅能觸發(fā)瀏覽器支持的具有相同的名稱的事件，也可以觸發(fā)自定義名稱的事件肆糕。
例如為元素綁定一個myClick的事件般堆，jQuery代碼如下：
$("#btn").bind("myClick",function() {
$("#test").append("<p>我的自定義事件</p>");
})
$("#btn").trigger("myClick");
3. 傳遞數(shù)據(jù)
trigger(type,[data])方法有兩個參數(shù)，第1個參數(shù)是要觸發(fā)的事件類型诚啃，第2個是參數(shù)是要傳遞給事件處理函數(shù)的附加數(shù)據(jù)淮摔，以數(shù)組形式傳遞。通呈际辏可以通過傳遞一個參數(shù)給回調(diào)函數(shù)來區(qū)別這次事件是代碼觸發(fā)還是用戶觸發(fā)和橙。
$("#btn").bind("click",function(event,message1,message2) {
$("#test").append("<p>" + message1 + message2 + "</p>");
})
$("#btn").trigger("myClick",["我的自定義","事件"]); // 傳遞兩個數(shù)據(jù)
運行代碼如圖：
4. 執(zhí)行默認操作
trigger()方法觸發(fā)事件后仔燕，會執(zhí)行瀏覽器默認操作。如：
$("input").trigger("focus");
以上代碼不僅會觸發(fā)為<input>元素綁定的focus事件胃碾，也會使<input>元素本身得到焦點（這是瀏覽器默認操作）
如果只想觸發(fā)綁定的focus事件涨享，而不想執(zhí)行瀏覽器默認操作，可以使用jQuery中另一個類似的方法——triggerHandler()方法仆百。
$("input").triggerHandler("focus");
該方法會觸發(fā)<input>元素上綁定的特定事件厕隧，同時取消瀏覽器對此事件的默認操作，即文本框值觸發(fā)綁定的focus事件俄周，不會得到焦點吁讨。
其他用法
1. 綁定多個事件類型
例如可以為事件一次性綁定多個事件類型。
$("div").bind("mouseover mouseout",function() {
$(this).toggleClass("over");
})
當(dāng)光標(biāo)滑入<div>元素時峦朗，該元素的class切換為over建丧；當(dāng)光標(biāo)滑出<div>元素時，class切換為先前的值波势。這段代碼等同于：
$("div").bind("mouseover",function() {
$(this).toggleClass("over");
}).bind("mouseout",function() {
$(this).toggleClass("over");
});
2. 添加事件命名空間翎朱，便于管理
例如可以把為元素綁定的多個事件類型用命名空間規(guī)范起來：
$(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");
});
});
在所綁定的事件類型后面添加命名空間，這樣在刪除事件時只需指定命名空間即可尺铣。單擊<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");
});
})
刪除多個事件代碼也可以寫為鏈?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后面的感嘆號
});
});
當(dāng)單擊<div>元素后，會同時觸發(fā)click事件和click.plugin事件床牧。如果只是單擊button元素荣回，則只觸發(fā)click事件，而不觸發(fā)click.plugin事件叠赦。注意驹马，trigger("click!")后面的感嘆號的作用是匹配所有不包含在命名空間中的click方法。
如果需要兩者都被觸發(fā)：
$("div").trigger("click");
