一、jQuery中的事件
1、加載DOM
1）執行時機
常規的JavaScript中，通常使用window.onload方法，而在jQuery中，使用$(document).ready()方法，可以提高Web應用程序的響應速度。
window.onload方法必須等到每一幅圖片都加載完畢後纔可以操作。但是使用jQuery中的$(document).ready()方法內註冊的事件在DOM就緒的時候就會執行，但是要注意的是與圖片相關的資源是否下載完畢，如果設置圖片的樣式不一定會有效，要解決這個問題可以使用jQuery總另一個頁面加載的方法， -load()方法，load方法會在元素的onload方法中綁定一個處理函數如果處理函數綁定到window對象就會等窗口框架對象圖像等全部加載完成後觸發，如果綁定在元素上，則會等到元素加載完畢後觸發。
代碼如下：
$(window).load(function(){
})
等同於JavaScript中的window.οnlοad=function(){
}
2）多次使用
window.onload方法不可以多次使用例如：
function one（）{ alert（“one”）}
function two（）{alert（“two”）}
window.οnlοad=one;
window.οnlοad=two;
則只會彈出two，第二個會覆蓋第一個。而$(document).ready()則可以多次使用。
3）簡寫方式
$(document).ready()可以簡寫爲$(function(){ })
也就是說$()不帶參數的時候默認爲參數是document。
2、事件綁定
1) 在文檔加載完成後，要對一些元素banding事件可以使用bind方法，來對匹配元素進行特定事件的綁定，bind（）方法的調用格式爲：
bind（type【，data】，fn）；
第一個參數是事件類型，類型包括：blur、focus、load、resize、scroll、unload、click、dbclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup和error等當然也可以是自定義名稱；
第二個參數是可選參數，作爲event.data屬性值傳遞給時間隊形的二外數據對象。
第三個參數則是用來綁定處理函數。
PS：jQuery中的時間綁定類型比普通的JavaScript中的時間綁定類型收了on。例如：jQuery中的click（）和JavaScript中對應的onclick（）函數。
代碼示例：
$(function(){
$("$panelh5.head").bind("click" ,function（）{
if（$(this).next("div.content").is(":visible")){
$(this).next("div.content").hide();
}else{
$(this).next("div.content").show();
}
}
})
與JavaScript一樣在jQuery中也存在this關鍵字使用$(this)，this攜帶相應的DOM元素，使用$轉換成jQuery對象。
可以簡寫綁定事件代碼：
例如：
$("#PANEL H5.HEAD").mouseover(function(){
});
3、合成事件：
jQuery有兩個和成事件hover（）和toggle（）方法。
1 ) hove()方法語法結構：hove（enter，leave)
用於模擬鼠標懸停事件，當光標移動到元素上時，會出髮指定的第一個函數(enter),當鼠標移出這個元素時，會出髮指定的第二個函數（leave）。
拿鼠標移入移出事件則可以不用綁定mouseover和mouseleave了可以直接使用hove代替，例如：
$(functin(){
$("#panl h5.head").hover(function(){
//鼠標移入代碼
},function(){
//鼠標移出代碼
}
})
2） toggle方法語法結構：toggle（fn1，fn2，-----fnN）；
用於模擬鼠標的連續單擊事件。第一次時候出發函數fn1，再次單擊的時候觸發fn2，如果有更過函數則會依次處罰，直到最後一個，隨後每次單機都是對這幾個函數的輪番調用。
4、事件冒泡
1）什麼是冒泡？
頁面上可以有多個事件，也可以多個元素響應同一個事件。假設網頁上有兩個元素，其中一個元素嵌套在另一個元素中，並且都被綁定了click事件，同時body元素也綁定了click事件。則click事件會按照以下順序"冒泡“；從最裏面嵌套的元素到其父元素到body向上冒泡；
2 ）時間冒泡引發的問題
當點擊最裏面一層的元素的時候，事件冒泡就會出發所有click事件。爲了防止事件冒泡，例如：
$("element").bind("click",function(event){
event.stopPropagation();//停止事件冒泡
});
在事件的函數中使用event.stipPropagation();來停止事件冒泡。
阻止默認行爲：
如在頁面中元素有自己的默認行爲如超鏈接跳轉，submit提交form表單，有時候需要組織元素的默認行爲。在jQuery中提供了preventDefault（）方法；
例如：在submit中的按鈕上綁定點擊事件，在點擊事件中添加校驗，如果校驗不通過我們可以在校驗不通過的函數裏面添加event.preventDefault()方法,達到阻止表單提交的作用。相當於returnfalse；停止事件冒泡也可以使用return false阻止事件冒泡；
3）事件捕獲
事件捕獲和事件冒泡是兩個相反的過程，時間捕獲是從最頂端向下開始觸發，從外層向裏面開始捕獲；
不是所有的主流瀏覽器支持事件捕獲，jQuery不支持事件捕獲，如果想要使用事件捕獲可以使用原生的JavaScript；
5、事件對象屬性
1）event.type()方法
在鼠標事件中使用可以event.type獲取其事件類型。
2）event.preventDefault()方法
阻止默認時間行爲，例如表單提交還有超鏈接等；
3）evetn.stopPropagation()方法
阻止事件向上冒泡
4）even.target()方法
可以獲取觸發事件的元素,例如：event.target.href可以獲取時間元素的屬性；
5）event.relatedTarget()方法；
jQuery封裝的方法，相當於mouseove中IE瀏覽器上的event.fromElement()方法。使之適應各種瀏覽器。
6）evetn.pageX()方法/event.pageY()方法
獲取光標相對於頁面的x座標和y座標。
7）event.which()方法
該方法是在鼠標單擊事件中獲取到鼠標的左中右鍵：在鍵盤事件中獲取鍵盤按鍵。event.which獲取案件代表符號，1代表鼠標左鍵，2代表鼠標中鍵，3代碼鼠標右鍵。
8）event.metaKey()方法
獲取鍵盤事件中獲取crtl按鍵。
9）event.orginalEvent()方法
該方法用來指向原始的事件對象，例如js事件傳遞到jquery定義的事件中的時候可以使用event.orginalEvent.方法，調用原始事件中的方法。
6、移出事件unbind（）
1）移除按鈕元素上以前註冊的事件，例如：
$("#delAll").click(function(){
$("#btn").uncind("click");
}
語法結構：unbind（【type】【，data】）；
第一個參數是時間類型，第二個參數是將要移除的函數。
如果沒有參數則刪除所有綁定的事件。如果提供過事件類型作爲參數只刪除事件類型的事件。如果把綁定時傳遞的處理函數作爲第二個參數，則只有這個特定的時間處理會被刪除。
2）移除<button>元素的其中一個事件
數顯需要爲這些匿名處理函數指定一個變量。例如：
$(function(){
$('#btn').bind("click",myFun1=function(){
}.bind("click",myFun2=function(){
}.bing("click",myFun3=function(){
}
});
刪除的時候例如：
$('delTwo’).click(function(){
$('#btn).unbind("click",myFun2);//刪除“綁定的第二個函數myFun2；
});
One（）方法：
One（）方法的結構和bind（）方法類似，使用方法與bind（）方法相同，其語法結構如下：
one（type，【data],fn);
示例代碼如下：
$(function(){
$('#btn').one("click",myFun1=function(){
}.one("click",myFun2=function(){
}.one("click",myFun3=function(){
}
});
使用one方法綁定單擊事件後，只在用戶第一次單機按鈕時，處理函數才執行，之後單機毫無作用；
7、模擬操作
1）常用模擬
在jQuery中可以使用trigger（）方法完成模擬操作。例如可以使用下面的代碼觸發click事件；
$("#btn").trigger("click");
這樣當頁面裝載完畢後就會立刻輸出想要的效果，可以簡化成click（），例如：$("btn"）.click();
2)觸發自定義事件
trigger（）方法不僅出發瀏覽器支持的具有名稱的事件也可以觸發自定義名稱的事件；例如：
$("#btn").bind("myClick",function(){
});
出發事件需要$('#btn').trigger("myClick");
3）傳遞數據
trigger（type【，data])方法有兩個參數第一個參數是要出發的事件類型，第二個參數是要傳遞給事件處理函數的附加數據，一數組的形式傳遞。例如：
$('#btn').bind("myClick",function(event,message1,message2){
$('#test').append("<p>"+message1+message2+"</p>");
});
#('#btn').trigger("myclick",{"我的自定義“，”事件“});
4)執行默認操作
trigger（）方法出發事件後，會齒形瀏覽器默認操作；
$("input").trigger("focus");
不僅會出發<input>綁定的focus事件，也會使<input>元素本身得到焦點。
如果只是想出發綁定的focus事件，而不想執行瀏覽器默認操作，可以使用jQuery中另一個類似的方法，triggerHandler()方法；
$("input").triggerHandler("focus");這樣只會執行綁定的事件，而不獲得焦點。
8、其他方法
1）綁定多個事件類型
.bind("mouseovemouseout",function(){
});
2)添加事件命名空間，便於管理
.bind("click.plugin",function(){
}.bind("mouseover.plugin“，function（）{
}.bind("dbclick",function(){
}
使用$("button").click(function(){
$(“div”）.unbind(".plugin");
})
這樣就可以通過命名空間刪除要刪除的事件。
可以接觸綁定多個事件:
$("div").unbind("click").unbind("mouseover");
3)相同事件名稱，不同命名空間執行方法
如果存在同元素綁定兩個同樣的事件，例如click事件，但是其中一個帶有命名空間，
$("div").trigger("click！“）；//添加感嘆號就會只執行click事件，感嘆號的作用是去掉所有包含命名空間的click方法。
