在介紹方法之前，我覺得有必要描述一下響應事件的兩種策略，一種是事件捕獲(Event capturing)，一種是事件冒泡(Event bubble)，這兩種策略是相對立的，它們是在浏覽器大戰中分別由Netscape和微軟提出的完全相反的兩種事件傳播模型。事件冒泡定義為在一個對象上觸發某類事件（比如單擊onclick事件），如果此對象定義了此事件的處理程序，那麼此事件就會調用這個處理程序，如果沒有定義此事件處理程序或者事件返回true，那麼這個事件會向這個對象的父級對象傳播，從裡到外，直至它被處理（父級對象所有同類事件都將被激活），或者它到達了對象層次的最頂層。而事件捕獲則與事件冒泡則恰好相反，處理事件是從對象的最外層往裡傳播，直到終止。W3C標注是支持兩種事件處理策略的，但是卻更偏向於事件冒泡，因為事件捕獲Bug較多，目前IE是不支持事件捕獲的，其他浏覽器基本兩種都支持。下面我給一個事件冒泡的例子，自己試一下就明白了，至於事件捕獲就算了.....
事件冒泡
代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript事件冒泡</title>
<style type="text/css">
#box {width:200px; height:100px; border:2px solid red}
#box h5 {margin:0; padding:2px 5px; font-size:18px; text-align:right; background:red; cursor:move}
#box h5 a {text-decoration:none; color:#FFF}
#box div{ white-space:inherit;}
</style>
</head>
<body>
<div id="box">
<h5 onmousedown="startDrag();"><a onmousedown="closeBox();" href="javascript:void(0);">關閉</a></h5>
<div id="testInfo"></div>
</div>
<script type="text/javascript">
function startDrag() {
document.getElementById('testInfo').innerHTML += '層事件';
}
function closeBox(e) {
document.getElementById('testInfo').innerHTML += '關閉事件';
//將下面一段注釋去掉則可以阻止冒泡
// if (e && e.stopPropagation)
// e.stopPropagation();
// else
// window.event.cancelBubble = true;
}
</script>
</body>
</html>
那麼在JQuery中阻止事件策略的方法有event.preventDefault();(阻止默認行為)、event.stopPropagation();event.stopImmediatePropagation();(阻止事件冒泡)、直接返回return false;(阻止默認行為和時間冒泡)。
事件處理包括bind(type,[data],fn)、bind(map)、one(type,[data],fn)、trigger(type,[data])、triggerHandler(type,[data])、unbind([type],[data])這幾個方法。
1、bind(type,[data],fn)用於為指定元素綁定指定的事件處理函數，[data]代表可選的傳遞的參數，它的寫法為：
代碼如下:
//帶參數的綁定方式
$("#text").bind('click', { result: "yes" }, function(event) {
alert(event.data.result);
})
//不帶參數並且阻止冒泡
$("#text").bind('click', function(e) {
//自定義處理行為
e.stopPropagation();
})
其實bind(type,[data],fn)這種綁定事件的方式我們還有一種簡寫的方式，但是他們的區別在於簡寫方式不能如bind一樣指定參數[data]，他的寫法就是直接將bind中type參數執行，如下：
代碼如下:
$("#text").click(function(e) {
//自定義處理行為
alert("簡寫方式");
})
2、bind(map)就是一次性為元素綁定多個事件處理函數，寫法如下
代碼如下:
$('#text').bind({
click: function() {
alert("bind(map)綁定的click事件");
},
mouseenter: function() {
alert("bind(map)綁定的mouseenter事件");
}
});
3、one(type,[data],fn)指定事件只執行一次，寫法與bind()方法一樣，在此就不做示范。
4、trigger(type,[data])、triggerHandler(type,[data])其實作用是一樣的，都是在每一個匹配的元素上觸發某類事件，唯一的區別就是前者是執行事件冒泡事件的，而後者只執行指定元素的事件。下面做個比較：
代碼如下:
//HTML代碼：
<button id="trigger">trigger()</button>
<button id="triggerHandler">triggerHandler()</button><br/><br/>
<div id="triggerdiv">
<div id="tri"></div>
</div>
//JQuery代碼
$("#triggerdiv").click(function() {
alert("DIV觸發");
});
$("#trigger").click(function() {
$("#tri").trigger("click");
});
$("#triggerHandler").click(function() {
$("#tri").triggerHandler("click");
});
$("#tri").click(function() {
alert("子集DIV觸發");
});
5、unbind([type],[data])就再簡單不過了，刪除指定元素的綁定事件，如果指定type參數則刪除指定的事件，如果沒有指定則刪除該指定元素的所有事件。
在這些事情機制中我最常用到的還是bind方法，再常用的就是它的簡寫方式。當然這些事件機制是可以結合起來用的，關鍵看業務需求而定。
前面有人說我寫的太簡單了，在這裡我也再次聲明一下，我講的是基礎，我本身接觸JQuery也沒多久，用意在於加深自己記憶和給剛學習JQuery的朋友一些資料而已，並不是想說我JQuery很厲害。希望大家共同學習，一起進步。未完待續......