當然它的優點並不只在於這點，使用JQuery事件處理機制比直接使用Javascript本身內置的一些事件相應方式更加的靈活，更加不容易暴露在外，而且有更加優雅的語法，大大減少了我們工作的量度。
JQuery的事件處理機制包括：頁面加載、事件綁定、事件委派、事件切換四種機制。我們先從$(document).ready()事件開始。
一、頁面加載$(document).ready()相當與Javascript中的onLoad()事件，都是在頁面加載的時候執行該方法，但是兩者又有著微妙的差別，ready()事件是當HTML下載完成並解析成DOM樹之後就可以執行，而onLoad()事件要等HTML包括文件都下載完成之後才能執行。我們在ready()事件中可以綁定其他的一些事件或者函數，ready()有幾種語法可以表示：
$(document).ready(function(){});
$().ready(function(){});
$(function(){});
當然我個人還是習慣於用第一種，增強可讀性，需要注意的是在使用ready()事件的時候請確保在 <body> 元素的onload事件中沒有注冊函數，否則不會觸發$(document).ready()事件。也可以在同一個頁面中無限次地使用$(document).ready()事件。其中注冊的函數會按照（代碼中的）先後順序依次執行。
二、事件切換只有兩個方法，就是hover()和toggle()兩個方法，由於他們截取組合的用戶操作，並且以多個函數響應，因此也稱為復合事件處理機制。hover()方法是一個模仿鼠標懸停變化的方法，簡單的說就是鼠標移入移出是時候執行你指定的行為的方法，我們最常用的就是做菜單切換效果。toggle()方法就是當你點擊按照順序執行你指定的函數方法，第一次點擊執行第一個函數，第二次點擊執行第二個函數，以此類推，它可以使用事件綁定中的unbind('click')方法刪除。
hover(over,out)實例：
代碼如下:
<style type="text/css">
#Menu
{
background-color:Red;
width:150px;
height:30px;
text-align:center;
border:solid 1px black;
}
#Menu_child
{
width:150px;
border:solid 1px black;
display:none;
}
#Menu_child div
{
background-color:#f3f3f3;
width:150px;
height:30px;
text-align:center;
}
</style>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$("#Menu").hover(
function() {
$("#Menu_child").fadeIn();
},
function() {
$("#Menu_child").fadeOut();
});
});
</script>
</head>
<body>
<div id="Menu">JQuery事件處理</div>
<div id="Menu_child">
<div>頁面加載</div>
<div>事件綁定</div>
<div>事件委派</div>
<div>事件切換</div>
</div>
</body>
toggle(fn,fn)實例:
代碼如下:
HTML代碼
<input type="button" value="toggle()方法" id="toggle" />
JQuery代碼
$("#toggle").toggle(
function() {
alert("第一次點擊");
},
function() {
alert("第二次點擊");
},
function() {
alert("第三次點擊");
},
function() {
alert("第四次點擊");
});
三、事件委派中也只有兩個方法，live()和die()兩個方法，這兩個方法是1.3版本之後才新增的，之前的版本是沒有的。live()可以理解成元素組事件委派方法，比如li元素用live綁定了click事件。那麼當在以後增加一個li到這個頁面時，對於這個新增加的li，其click事件依然可用，而無需重新給這種新增加的元素綁定事件，在編寫樹形插件的時候相當有用。die()方法就很好解釋，用來解除live()綁定的方法。
live(type,fn):live()中type參數目前只支持click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup事件。實例如下
代碼如下:
HTML代碼：
<ul>
<li>頁面加載</li>
<li>事件綁定</li>
<li>事件委派</li>
<li>事件切換</li>
</ul>
JQuery代碼：
$("li").live('click', function() {
var index = $("li").index(this);//獲取li的索引
var text = $("li").eq(index).text();//根據單擊項索引獲得文本值
alert("索引：" + index + ",文本值：" + text);
});
die([type],[fn]):die()使用起來相當簡單，一種刪除所有live()事件，一種指定刪除，兩個參數是可選的。
代碼如下:
$("#die").click(function() {
$("li").die(); //刪除所有live()事件
$("li").die("click");//刪除指定為click的live()事件
$("li").die('click', function() { alert("刪除live()事件成功") });//刪除指定為click的live()事件並執行函數
});
僅供參考，歡迎感興趣的朋友參與討論。下篇文章再說事件綁定，寫一起太長了。未完待續........