1.jQuery中的事件
傳統的js事件是以on+事件名開頭的，如onClick();onChange()等，
Jquery則是直接以事件名開頭，如click();change()等；jquery中的事件盡可能的往兼容瀏覽器做努力，推薦使用Jquery中的事件
1.?1加載 DOM（入口函數）
一個 DOM 事件可以分為捕獲過程、觸發過程、冒泡過程。 DOM 事件流為 DOM 事件的處理及執行的過程。
1.?2綁定事件
bind(type,[data],fn)函數
one(type[ ,data], fn)：jQuery提供的one()方法，可以為元素綁定處理函數，當函數觸發一次后，立即被刪除。即在每個對象上，事件處理函數只會被執行一次。
- 第一個參數type表示事件類型：blur、focus、load、resize、scroll、unload、click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup和error等
- 第二個為可選參數，為做 event.data 屬性傳遞給事件對象的額外數據
- 第三個參數fn是用來綁定的處理函數
例：
$(function(){
$("#body h5.head").bind("click",function(){
$(this).next().show(); //獲取$(this).next()元素
})
});
注意：
事件簡寫：$(variable).bind(type [, data], fn) 簡寫為 $(variable).type(fn)
1.3合成事件
(1)hover(fn, fn)方法-是 mouseover(fn) 和 mouseout(fn) 的合成
:hover() 用于模擬光標懸停事件，hover(enter,leave)，當光標移動到元素上時會觸發第一個函數enter，當光標移除元素時觸發第二個函數enter。例子如下：
//以下的hover函數寫法其實等價于鼠標獲取焦點和取消焦點事件
$(function(){
$("#panel h5.head").hover(function(){
$(this).next("div.content").show();
},function(){
$(this).next("div.content").hide();
});
});
//如果想把這種效果改成鼠標點擊展現的話把mouseover和mouseout事件換成click就OK了。
$(function(){
$("#panel h5.head").bind("mouseover",function(){
$(this).next("div.content").show();
});
$("#panel h5.head").bind("mouseout",function(){
$(this).next("div.content").hide();
});
});
(2)toggle(fn1, fn2, ...)
- ：toggle() 用于模擬鼠標連續單擊事件。toggle(f1,f2,.....)，第一次單擊時觸發第一個函數f1，第二次單擊時觸發第二個函數f2以此類推直到最后一個。隨后的每次單擊事件循環這一過程。
$(function(){
$("#panel h5.head").toggle(function(){
$(this).next("div.content").show();
},function(){
$(this).next("div.content").hide();
});
});
- 用于切換元素的可見狀態(上面例子相當于）
$(function(){
$("#panel h5.head").toggle(function(){
$(this).next("div.content").toggle();
},function(){
$(this).next("div.content").toggle();
});
});
1.4 事件冒泡
冒泡事件就是點擊子節點，會向上觸發父節點、祖先節點的點擊事件，造成了事件的多層并發。除了可能是包含、嵌套關系還有其它很多事件，比如鼠標的mouseover等等也都會觸發冒泡事件。
(1)事件冒泡是指事件會按照 DOM 的層次結構像水泡一樣不斷向上直至頂端
(2)事件冒泡可能會引起預料之外的效果，可以使用
阻止事件冒泡:兩種方式
- event.stopPropagation()-停止事件冒泡，不會阻止默認行為
ent.preventDefault()-阻止默認行為，如比如鏈接的跳轉。 - return false-停止事件冒泡或者阻止默認行為
例：
下面是html代碼部分：
<body>
<div id="content">
外層div元素
<span>內層span元素</span>
外層div元素
</div>
<div id="msg"></div>
</body>
對應的jQuery代碼如下：
<script type="text/javascript">
$(function(){
// 為span元素綁定click事件
$('span').bind("click",function(){
var txt = $('#msg').html() + "<p>內層span元素被點擊.<p/>";//獲取html信息
$('#msg').html(txt);// 設置html信息
});
// 為div元素綁定click事件
$('#content').bind("click",function(){
var txt = $('#msg').html() + "<p>外層div元素被點擊.<p/>";
$('#msg').html(txt);
});
// 為body元素綁定click事件
$("body").bind("click",function(){
var txt = $('#msg').html() + "<p>body元素被點擊.<p/>";
$('#msg').html(txt);
});
})
</script>
//當點擊span時，會觸發div與body 的點擊事件。點擊div時會觸發body的點擊事件。
阻止事件冒泡:
方式一：event.stopPropagation();
$("#div1").mousedown(function(event){
event.stopPropagation();
});
方式二：return false;
$("#div1").mousedown(function(event){
return false;
});
但是這兩種方式是有區別的。
return false 不僅阻止了事件往上冒泡，而且阻止了事件本身。
event.stopPropagation() 則只阻止事件往上冒泡，不阻止事件本身。
?5. 事件對象的屬性
+ event.type()-獲取事件的類型
$("a").click(function(event) {
alert(event.type);
});
+ event.target()-獲取到觸發事件的dom對象
$("a[href=http://google.com]").click(function(event) {
alert(event.target.href);
});
+ event.relatedTarget()-獲取觸發事件的相關元素，對于鼠標事件, 標示觸發事件時離開或者進入的DOM元素
$("a").mouseout(function(event) {
alert(event.relatedTarget);
});
+ event.pageX()-獲取鼠標相對于頁面的 x 坐標
event.pageY()-獲取鼠標相對于頁面的 y 坐標
$("a").click(function(event) {
alert("Current mouse position: " + event.pageX + ", " + event.pageY );
});
+ event.which()-在鼠標單擊事件中獲取鼠標的左(1)、中(2)、右健(3)；在鍵盤事件中獲取鍵盤的按鍵
$(function(){
$("a").mousedown(function(e){
alert(e.which) // 1 = 鼠標左鍵 left; 2 = 鼠標中鍵; 3 = 鼠標右鍵
return false;//阻止鏈接跳轉
})
})
+ event.metaKey()
針對不同瀏覽器對鍵盤中的 ctrl 按鍵解釋不同，jQuery也進行了封裝，并規定event.metaKey()方法為鍵盤事件中獲取 ctrl 按鍵。
+ event.originalEvent()-指向原始的事件對象
?6. 移除事件
unbind([type][ ,data])
(1)第一個參數為事件類型，第二個參數為要移除的函數
(2)沒有參數，刪除所有綁定的事件
(3)提供事件類型為參數，只刪除該類型的綁定事件
(4)提供處理函數作為第二個函數，只刪除提供的特定事件
7. 模擬事件操作
(1)模擬點擊事件
+ $(variable).trigger("click")
+ $(variable).click()
(2)觸發自定義事件
+ $(variable).bind("customEvent", fn);
+ $(variable).trigger("customEvent");