什麼是事件
頁面對不同通路者的響應叫做事件。
事件處理程式指的是當 HTML 中發生某些事件時所調用的方法。
常見 DOM 事件：
| 滑鼠事件 | 鍵盤事件 | 表單事件 | 文檔/視窗事件 |
| click | keypress | submit | load |
| dblclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | blur | unload |
事件綁定
文檔裝載完成後，如果打算為元素綁定事件來完成某些操作，則可以使用on()方法來對被選元素及子元素上添加一個或多個事件處理程式。
注意：自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。該方法給 API 帶來很多便利，我們推薦使用該方法，它簡化了 jQuery 代碼庫。
提示：如需移除事件處理程式，請使用Off()方法。
提示：如需添加隻運作一次的事件然後移除，請使用one()方法。
文法
$(selector).on(event,childSelector,data,function,map)
| 參數 | 描述 |
| event | 必需。規定要從被選元素移除的一個或多個事件或命名空間。由空格分隔多個事件值。必須是有效的事件。 |
| childSelector | 可選。規定隻能添加到指定的子元素上的事件處理程式（且不是選擇器本身，比如已廢棄的 delegate() 方法）。 |
| data | 可選。規定傳遞到函數的額外資料。 |
| function | 可選。規定當事件發生時運作的函數。 |
| map | 規定事件映射 ({event:function, event:function, ...})，包含要添加到元素的一個或多個事件，以及當事件發生時運作的函數。 |
範例代碼
<!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>test</title>
<style type="text/css">
*{margin:0;padding:0;}
body { font-size: 13px; line-height: 130%; padding: 60px }
#panel { width: 300px; border: 1px solid #0050D0 }
.head { height:24px;line-height:24px;text-indent:10px;background: #96E555; cursor: pointer;width:100%; }
.content { padding: 10px; text-indent:24px; border-top: 1px solid #0050D0;display:block;display:none; }
</style>
<script src="scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
// $("#panel h5.head").on("mouseover",function(){
// $(this).next().show();
// }).on("mouseout",function(){
// $(this).next().hide();
// })
// 與上一段代碼等價，隻是簡化了代碼
$("#panel h5.head").on("mouseover mouseout",function(){
$(this).next().toggle();
});
})
</script>
</head>
<body>
<div id="panel">
<h5 class="head">什麼是jQuery?</h5>
<div class="content">
jQuery是繼Prototype之後又一個優秀的JavaScript庫，它是一個由 John Resig 建立于2006年1月的開源項目。jQuery憑借簡潔的文法和跨平台的相容性，極大地簡化了JavaScript開發人員周遊HTML文檔、操作DOM、處理事件、執行動畫和開發Ajax。它獨特而又優雅的代碼風格改變了JavaScript程式員的設計思路和編寫程式的方式。
</div>
</div>
</body>
</html>
View Code
移除事件
off() 方法通常用于移除通過 on() 方法添加的事件處理程式。
自 jQuery 版本 1.7 起，off() 方法是 unbind()、die() 和 undelegate() 方法的新的替代品。該方法給 API 帶來很多便利，我們推薦使用該方法，它簡化了 jQuery 代碼庫。
注意：如需移除指定的事件處理程式，當事件處理程式被添加時，選擇器字元串必須比對 on() 方法傳遞的參數。
提示：如需添加隻運作一次的事件然後移除，請使用 one() 方法。
$(selector).off(event,selector,function(eventObj),map)
事件對象的屬性和方法
| 方法 | |
| event.currentTarget | 在事件冒泡階段内的目前 DOM 元素 |
| event.data | 包含目前執行的處理程式被綁定時傳遞到事件方法的可選資料 |
| event.delegateTarget | 傳回目前調用的 jQuery 事件處理程式所添加的元素 |
| event.isDefaultPrevented() | 傳回指定的 event 對象上是否調用了 event.preventDefault() |
| event.isImmediatePropagationStopped() | 傳回指定的 event 對象上是否調用了 event.stopImmediatePropagation() |
| event.isPropagationStopped() | 傳回指定的 event 對象上是否調用了 event.stopPropagation() |
| event.namespace | 傳回當事件被觸發時指定的命名空間 |
| event.pageX | 傳回相對于文檔左邊緣的滑鼠位置 |
| event.pageY | 傳回相對于文檔上邊緣的滑鼠位置 |
| event.preventDefault() | 阻止事件的預設行為 |
| event.relatedTarget | 傳回當滑鼠移動時哪個元素進入或退出 |
| event.result | 包含由被指定事件觸發的事件處理程式傳回的最後一個值 |
| event.stopImmediatePropagation() | 阻止其他事件處理程式被調用 |
| event.stopPropagation() | 阻止事件向上冒泡到 DOM 樹，阻止任何父處理程式被事件通知 |
| event.target | 傳回哪個 DOM 元素觸發事件 |
| event.timeStamp | 傳回從 1970 年 1 月 1 日到事件被觸發時的毫秒數 |
| event.type | 傳回哪種事件類型被觸發 |
| event.which | 傳回指定事件上哪個鍵盤鍵或滑鼠按鈕被按下 |
常用jQuery事件的範例代碼
$("ul li:eq(0)").click(function(){
alert("單擊操作");
$("ul li:eq(1)").dblclick(function(){
alert("輕按兩下操作");
$("p").mouseenter(function(){
$("#result").val("mouseenter");
}).mouseleave(function(){
$("#result").val("mouseleave");
}).mousedown(function(){
$("#result").val("mousedown");
}).mouseup(function(){
$("#result").val("mouseup");
$("#result").focus(function(){
$(this).css("background-color","#cccccc");
}).blur(function(){
$(this).css("background-color","#ffffff");
});
<ul>
<li>單擊我</li>
<li>輕按兩下我</li>
<div>
<p id="p1">請在此處操作滑鼠，文本編輯框内容會變化。如果點選文本框，文本框顔色會變化。</p>
<input type="text" id="result"/>
</ul>