1、對於原生事件對象，由於瀏覽器的差異，開發者總是需要做兼容性的處理；為了解決這個問題，jquery封裝了自己的事件對象，解決了原生事件對象的兼容性問題，還另外提供了很多新的屬性和方法。
內容提綱：
1.事件對象
2.冒泡和默認行為
發文不易，轉載請注明出處！
JavaScript 在事件處理函數中默認傳遞了 event 對象，也就是事件對象。但由於瀏覽器的兼容性，開發者總是會做兼容方面的處理。jQuery 在封裝的時候，解決了這些問題，並且還創建了一些非常好用的屬性和方法。
一．事件對象
事件對象就是 event 對象，通過處理函數默認傳遞接受。之前處理函數的 e 就是 event事件對象，event 對象有很多可用的屬性和方法，詳見JavaScript 基礎篇。
| 移動端touchEvent事件，在Jquery被封裝在originalEvent屬性中，調用方法，例如：e.originalEvent.touches[0].clientX;
原因： js事件有很多種：
鼠標事件：mouseEvent
觸摸與手勢事件：touchEvent
焦點事件：FocusEvent
鍵盤事件：keyboardEvent
等等，還有很多事件類型。在jquery中不同的事件類型被指向新的屬性originalEvent中，即originalEvent:touchEvent,所以訪問touchEvent中的屬性，需要前面加一個originalEvent,例如e.originalEvent.touches[0].clientX
|
對其中的幾個進行說明：
//通過 event.type 屬性獲取觸發事件名
$('input').click(function (e) {
alert(e.type);
});
//通過 event.data 獲取額外數據，可以是數字、字符串、數組、對象
$('input').bind('click', 123, function () { //傳遞 data 數據
alert(e.data); //獲取數字數據123
});
注意：如果字符串就傳遞：'123'、如果是數組就傳遞：[123,'abc']，如果是對象就傳遞：{user : 'Lee', age : 100}。數組的調用方式是：e.data[1]，對象的調用方式是：e.data.user。
//event.data 獲取額外數據，對於封裝的簡寫事件也可以使用
$('input').click({user : 'Lee', age : 100},function (e) {
alert(e.data.user);
});
PS：鍵值對的鍵可以加上引號，也可以不加；在調用的時候也可以使用數組的方式：alert(e.data['user']);
區別：target，currentTarget，relatedTarget：
//通過 event.target 獲取觸發事件的 DOM 元素
$('input').click(function (e) {
alert(e.target);
});
//relatedTarget獲取臨近元素
//獲取移入到 div 之前的那個 DOM 元素
$('div').mouseover(function (e) {
alert(e.relatedTarget);
});
//獲取移出 div 之后到達最近的那個 DOM 元素
$('div').mouseout(function (e) {
alert(e.relatedTarget);
});
//獲取綁定的那個 DOM 元素，相當於 this，區別與 event.target
$('div').click(function (e) {
alert(e.currentTarget);
});
PS：event.target 得到的是觸發元素（比如點擊事件，即具體點擊的那個元素）的 DOM，event.currentTarget 得到的是監聽元素（即綁定的那個元素）的DOM。相當於this， this 也是得到監聽元素的 DOM。
//result獲取上一次相同事件的返回值
$('div').click(function (e) {
return '123';
});
$('div').click(function (e) {
alert(e.result);
});
//which獲取鼠標的左中右鍵
$('div').mousedown(function (e) {
alert(e.which);
});
//which獲取鍵盤的按鍵
$('input').keyup(function (e) {
alert(e.which);
});
//獲取觸發元素鼠標當前的位置
$(document).click(function (e) {
alert(e.screenY+ ',' + e.pageY + ',' + e.clientY);
});
PS：pageX和pageY獲取的是距離頁面原點的位置；screenX和screenY獲取的是距離顯示屏的位置；clientX和clientY獲取的是距離頁面視口的距離。在沒有滾動條的時候，pageY和clientY在數值上是一樣的。當有滾動條的時候，pageY會明顯變大，因為它是相對於頁面原點。
二．冒泡和默認行為
阻止冒泡：
如果在頁面中重疊了多個元素， 並且重疊的這些元素都綁定了同一個事件， 那么就會出現冒泡問題。
示例：
//HTML 頁面
1 <div style="width:200px;height:200px;background:red;"> 2 <input type="button" value="按鈕" /> 3 </div>
1 //三個不同元素觸發事件
2
3 $('input').click(function () {
4
5 alert('按鈕被觸發了！');
6
7 });
8
9 $('div').click(function () {
10
11 alert('div 層被觸發了！');
12
13 });
14
15 $(document).click(function () {
16
17 alert('文檔頁面被觸發了！');
18
19 });
PS：當我們點擊文檔的時候，只觸發文檔事件；當我們點擊 div 層時，觸發了 div 和文檔兩個；當我們點擊按鈕時，觸發了按鈕、div 和文檔。觸發的順序是從小范圍到大范圍。這就是所謂的冒泡現象，一層一層往上。
jQuery 提供了一個事件對象的方法：event.stopPropagation()；這個方法設置到需要觸發的事件上時，所有上層的冒泡行為都將被取消。
$('input').click(function (e) {
alert('按鈕被觸發了！');
e.stopPropagation();
});
阻止默認行為：
網頁中的元素，在操作的時候會有自己的默認行為。比如：右擊文本框輸入區域，會彈出系統菜單、點擊超鏈接會跳轉到指定頁面、點擊提交按鈕會提交數據。
//阻止超鏈接進行跳轉
$('a').click(function (e) {
e.preventDefault();
});
//禁止提交表單跳轉（注意是在form上阻止）
$('form').submit(function (e) {
e.preventDefault();
});
PS： 如果想讓上面的超鏈接同時阻止默認行為且禁止冒泡行為， 可以把兩個方法同時寫上： event.stopPropagation()和 event.preventDefault()。 這兩個方法如果需要同時啟用的時候，還有一種簡寫方案代替，就是直接 return false。
$('a').click(function (e) {
return false;
});
For my lover,
and thank you Mr.Lee!