●和WinForm一樣，在網頁中的交互也是需要事件來實現的，例如tab切換效果，可以通過鼠標單擊事件來實現

●jQuery事件是對JavaScript事件的封裝，常用事件分類

●基礎事件

• 鼠標事件
• 鍵盤事件
• window事件
• 表單事件

●復合事件

• 鼠標光標懸停
• 鼠標連續點擊

●語法：

　　　　時間名=”函數名()”;

　　 或：

　　　　DOM 對象.事件名=函數

●載入事件：在jQuery中，常用的window事件有文檔載入事件，它對應的方法是ready()。

●鼠標事件：當用戶在文檔上移動或單擊鼠標而產生的事件。

　　　　　　　　　　　　　　　　★

　　　　　　　　　　　　　　　　 $(this).css("background-color","#f01e28");

　　　　　　　　　　　　　　　　　　　　});

　　　　　　　　　　　　　　　　　　　$(".nav-ul a").mouseout(function(){ //當鼠標移出菜單時

　　　　　　　　　　　　　　　　 $(this).css("background-color","#ff2832");

　　　　　　　　　　　　　　　　　　　　});

　　　　　　　　　　　　　　◆鼠標事件方法的區別：

●鍵盤事件：鍵盤事件是指當鍵盤聚焦到Web瀏覽器時，用戶每次按下或釋放鍵盤上的按鍵時都會產生事件。常用的鍵盤事件有keydown、keyup、keypress。

◆eg：$("[type=password]").keyup(function () { //當鍵盤釋放時

$("#events").append("keyup");

}).keydown(function (e) { //當鍵盤按下時

$("#events").append("keydown");

}).keypress(function () { //向密碼框輸入字符時

$("#events").append("keypress");

});

　　　　　$(document).keydown(function (event) {

if (event.keyCode == "13") { //按下回車鍵時

alert("確認要提交麽？");

}

　　　　　　});

●瀏覽器事件：在瀏覽網頁時，大家經常會調整瀏覽器窗口的大小。這些都是通過jQuery中的resize()方法觸發resize事件，進而處理相關的函數，來完成頁面的一些特效。

語法：

　　　　　　$(selector).resize();

●綁定事件：在jQuery中，如果需要為匹配的元素同時綁定一個或多個事件，則可以使用bind()方法。

　　 語法：

　　　　　　　　bind(type,[data],fn);

★除了bind()方法之外，還有on()、live（）和one()等事件綁定方法；

　　　　　　★上面這種已經過時，建議使用on： On(type,[data],fn);

◆綁定單個事件：

Eg：使用綁定實現鼠標移至“我的當當”顯示二級菜單

$(document).ready(function(){

　　　　　　 $(".on").bind("mouseover",function(){

　　 $(".topDown").show();

　　　　　　 });

　　　　 });

效果：

◆綁定多個事件：

Eg：使用綁定多個事件實現“我的當當” 二級菜單的顯示和隱藏

$(".top-m .on").bind({

mouseover:function(){ //為mouseover綁定方法

$(".topDown").show();

},

mouseout:function(){ //為mouseout綁定方法

$(".topDown").hide();

}

});

●移除事件：當事件執行完了，需要把綁定的事件通過一定的方法取消。在jQuery中提供了移除事件的方法，同樣可以移除單個或多個事件，可以使用unbind()方法。

　　　　語法：

　　　　　　unbind([type],[fn])

　　　　　　　　　　//type：事件類型，主要包括：blur、focus、click、mouseout等基礎事件，此外，還可以是自定義事件;

　　　　　　　　　　//fn：處理函數，用來解除綁定的處理函數；

　　　　　　　　　　// Undind()方法有兩個參數，這兩個參數不是必須的。當unbind()不帶參數時，表示移除所綁定的全部事件。

●在jQuery中有兩個復合事件方法-hover()和toggle(),這兩個方法與ready()類似，都是jQuery自定義的方法。

●hover()方法：在jQuery中，hover()方法用於模擬鼠標移入和移出事件。

　　當鼠標移入時，會觸發指定的第一個函數（enter）;

　　當鼠標移除這個函數時，會觸發指定的第二個函數（leave）,

　　該方法相當於mouseenter和mouseleave事件的組合。

語法：

　　　　　　hover(enter,leave);

　　eg：$(".top-m .on").hover(function(){

　　 $(".topDown").show();

},

function(){

$(".topDown").hide();

}

　　　　　　);

●toggle()方法：在jQuery中，toggle()方法分為帶參數和不帶參數。

　　◆帶參數的方法用於模擬鼠標連續click事件。第一次單擊元素，觸發指定的第一個函數，再次單擊則觸發指定的第二個函數，如果有更多函數，則依次觸發，直到最後一個。隨後的單擊都重復對幾個函數的輪番調用。

　　　　語法：

　　　　　　toggle(fn1,fn2…..fnN);

　　eg：$("input").toggle(

　　 function(){$("body").css("background","#ff0000");},

　　function(){$("body").css("background","#00ff00");},

　　 function(){$("body").css("background","#0000ff");}

　　　　 )

　　◆toggle()不帶參數時，與show()和hide()方法的作用一樣，切換元素的可見狀態。如果是可見的，則切換為隱藏狀態；如果是隱藏的，則切換為可見狀態。

語法：

　　　　　　toggle();

　　　　eg：$("input").click(function(){

　　　　　　　　$("p").toggle();

　　　　　　})

　　◆與jQuery中的toggle()方法一樣，toggleClass()可以對樣式進行切換，實現事件觸發時某元素在“加載某個事件”和“移除某個事件”之間切換。

語法：

　　　　　　toggleClass(className);

　　　　eg：$("input").click(function(){

　　　　　　　　$("p").toggleClass("red");

　　　　　　})

●toggle( )和toggleClass( )總結

1、 toggle( fn1,fn2...)實現單擊事件的切換，無須額外綁定click事件

2、toggle( )實現事件觸發對象在顯示和隱藏狀態之間切換

3、toggleClass( )實現事件觸發對象在加載某個樣式和移除某個樣式之間切換

jQuery提供了很多動畫效果

1、 控制元素顯示與隱藏

2、改變元素的透明度

3、改變元素高度

4、自定義動畫

●控制元素的顯示：在jQuery中，可以使用show()方法控制元素的顯示，除此之外，它還能定義顯示時的效果，如顯示速度。

語法：

　　　　　　　　　　$(selector).show([speed],[callback]);

●控制元素的隱藏：用法與show()方法類似。

　　　　語法：

　　　　　　　$(selector).hide([speed],[callback]);

●改變元素的透明度：

　　　1.控制元素淡入：在jQuery中，如果元素是隱藏的，則可以使用fadeIn()方法控制元素淡入，它與show()方法相同，可以定義淡入時的效果，如顯示速度

　　　　 語法：

　　　　　　　　$(selector).fadeIn([speed],[callback]);

　　　　2.控制元素淡出

　　　　　　語法：

　　　　　　　　$(selector).fadeOut([speed],[callback]);

●改變元素的高度：在jQuery中，用於改變元素高度的方法是slideUp()和slideDown()。若元素中的display屬性值為none,當調用slideDown()方法時，這個元素會從上向下延伸顯示，而slideUp()方法正好相反，元素下到上縮短直至隱藏。

　　　　語法：

　　　　　　$(selector).slideUp([speed],[callback]);

$(selector).slideDown([speed],[callback]);

JQuery中的所有動畫效果，都可以設置三種速度參數，即slow、normal、fast（三者對應的時間分別為0.6秒，0.4秒，0.2秒）；

當使用關鍵字作為速度的參數時，需要使用雙引號引起來，如：fadeIn(“slow”)，

而使用時間數值作為速度參數時，則不需要使用雙引號，如：fadeIn(500),需要註意的是，當使用數值作為參數時，單位為毫秒而不是秒；

●自定義動畫：在jQuery中，可以創建自定義動畫，實現各種比較復雜的動畫。

　　　　語法：

　　　　　　$(selector).animate({params},[speed],[callback]);

　　　　 //params:必選項目，定義形成動畫的CSS屬性。

　　 //speed：可選，規定效果時長，取值：毫秒、fast、slow；

　　　　　　　　 //callback：選項，滑動完成後執行的函數名稱。

附加：

●事件冒泡：當一個父元素的子元素有與父元素相同的事件時，那麽父元素的事件執行時，子元素的事件也會執行，那麽父元素的一次click事件相當於執行了2次。

◆阻止冒泡事件

Eg：下面的例子，BODY元素下有DIV元素，DIV元素下有SPAN元素，分別將三種元素都註冊click事件。

那麽，click事件會按照DOM的層次結構，像水泡一樣不斷向上直到頂端，所以稱之為事件冒泡。

<body><div><span>我是****</span></div></body>

$("span").bind("click", function(){ alert(‘span click‘); });

$("div").bind("click", function(){ alert(‘div click‘); });

$("body").bind("click", function(){ alert(‘body click‘); });

解決這個問題的辦法是：在SPAN執行完click事件後，停止事件冒泡。

$("span").bind("click", function(event){

alert(‘span click‘);

event.stopPropagation(); //停止冒泡

});

js之事件冒泡和事件捕獲：

（1）冒泡型事件：事件按照從最特定的事件目標到最不特定的事件目標(document對象)的順序觸發。

IE 5.5: div -> body -> document

IE 6.0: div -> body -> html -> document

Mozilla 1.0: div -> body -> html -> document -> window

（2）捕獲型事件(event capturing)：事件從最不精確的對象(document 對象)開始觸發，然後到最精確(也可以在窗口級別捕獲事件，不過必須由開發人員特別指定)。

（3）DOM事件流：同時支持兩種事件模型：捕獲型事件和冒泡型事件，但是，捕獲型事件先發生。兩種事件流會觸及DOM中的所有對象，從document對象開始，也在document對象結束。

DOM事件模型最獨特的性質是，文本節點也觸發事件(在IE中不會)。

支持W3C標準的瀏覽器在添加事件時用addEventListener(event,fn,useCapture)方法，基中第3個參數useCapture是一個Boolean值，用來設置事件是在事件捕獲時執行，還是事件冒泡時執行。而不兼容W3C的瀏覽器(IE)用attachEvent()方法，此方法沒有相關設置，不過IE的事件模型默認是在事件冒泡時執行的，也就是在useCapture等於false的時候執行，所以把在處理事件時把useCapture設置為false是比較安全，也實現兼容瀏覽器的效果。

事件捕獲階段：事件從最上一級標簽開始往下查找，直到捕獲到事件目標(target)。
事件冒泡階段：事件從事件目標(target)開始，往上冒泡直到頁面的最上一級標簽。

假設一個元素div，它有一個下級元素p。
<div>
　　<p>元素</p>
</div>
這兩個元素都綁定了click事件，如果用戶點擊了p，它在div和p上都觸發了click事件，那這兩個事件處理程序哪個先執行呢？事件順序是什麽？

兩種模型
以前，Netscape和Microsoft是不同的實現方式。

Netscape中，div先觸發，這就叫做事件捕獲。

Microsoft中，p先觸發，這就叫做事件冒泡。

兩種事件處理順序剛好相反。IE只支持事件冒泡，Mozilla, Opera 7 和 Konqueror兩種都支持，舊版本的Opera‘s 和 iCab兩種都不支持 。

事件捕獲
當你使用事件捕獲時，父級元素先觸發，子級元素後觸發，即div先觸發，p後觸發。

事件冒泡
當你使用事件冒泡時，子級元素先觸發，父級元素後觸發，即p先觸發，div後觸發。

W3C模型
W3C模型是將兩者進行中和，在W3C模型中，任何事件發生時，先從頂層開始進行事件捕獲，直到事件觸發到達了事件源元素。然後，再從事件源往上進行事件冒泡，直到到達document。

程序員可以自己選擇綁定事件時采用事件捕獲還是事件冒泡，方法就是綁定事件時通過addEventListener函數，它有三個參數，第三個參數若是true，則表示采用事件捕獲，若是false，則表示采用事件冒泡。

ele.addEventListener(‘click‘,doSomething2,true)

true=捕獲

false=冒泡

傳統綁定事件方式
在一個支持W3C DOM的瀏覽器中，像這樣一般的綁定事件方式，是采用的事件冒泡方式。

ele.onclick = doSomething2

IE瀏覽器
如上面所說，IE只支持事件冒泡，不支持事件捕獲，它也不支持addEventListener函數，不會用第三個參數來表示是冒泡還是捕獲，它提供了另一個函數attachEvent。

ele.attachEvent("onclick", doSomething2);

附：事件冒泡（的過程）：事件從發生的目標（event.srcElement||event.target）開始，沿著文檔逐層向上冒泡，到document為止。

事件的傳播是可以阻止的：
? 在W3c中，使用stopPropagation（）方法
? 在IE下設置cancelBubble = true；
在捕獲的過程中stopPropagation（）；後，後面的冒泡過程也不會發生了~
3.阻止事件的默認行為，例如click <a>後的跳轉~
? 在W3c中，使用preventDefault（）方法；
? 在IE下設置window.event.returnValue = false;

Eg：

<!DOCTYPE html>
<html lang="en" onclick="alert(‘html‘)">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<title>Document</title>
</head>
<body onclick="alert(‘body‘)">
<!--html-->
<div style="width:400px; height:400px; background:red" onclick="alert(this.style.background)">
<div id="div2" style="width:300px; height:300px; background:palevioletred" >
<div style="width:200px; height:200px; background:yellow" onclick="alert(this.style.background)">
<div id="div1" style="width:100px; height:100px; background:palegreen">
<a id="aaa" href="http://www.baidu.com">aaa</a>
</div>
</div>
</div>
</div>

<script>
//此jquery既阻止默認行為又停止冒泡
// $("#div1").on(‘click‘,function(){
// return false;
// });

window.onload = function () {
var oDiv1 = document.getElementById(‘div1‘);
var oDiv2 = document.getElementById(‘div2‘);

oDiv1.onclick = function (ev){
var oEvent = ev || event;
alert("this is div1");

//js阻止事件冒泡
//oEvent.cancelBubble = true;
//oEvent.stopPropagation();

//js阻止鏈接默認行為，沒有停止冒泡
//oEvent.preventDefault();
//return false;
}

oDiv2.onclick = function (ev){
var oEvent = ev || event;
alert("this is div2");
oEvent.cancelBubble = true;
}
}
</script>
</body>
</html>

理解：

他們是描述事件觸發時序問題的術語。事件捕獲指的是從document到觸發事件的那個節點，即自上而下的去觸發事件。相反的，事件冒泡是自下而上的去觸發事件。綁定事件方法的第三個參數，就是控制事件觸發順序是否為事件捕獲。true,事件捕獲；false,事件冒泡。默認false,即事件冒泡。Jquery的e.stopPropagation會阻止冒泡，意思就是到我為止，我的爹和祖宗的事件就不要觸發了。

這是HTML結構

現在我們給它們綁定上事件

document.getElementById("parent").addEventListener("click",function(e){

alert("parent事件被觸發，"+this.id);

})

document.getElementById("child").addEventListener("click",function(e){

alert("child事件被觸發，"+this.id)

})

結果：

child事件被觸發，child

parent事件被觸發，parent

結論：先child，然後parent。事件的觸發順序自內向外，這就是事件冒泡。

現在改變第三個參數的值為true

　　　　　　　document.getElementById("parent").addEventListener("click",function(e){

alert("parent事件被觸發，"+e.target.id);

},true)

document.getElementById("child").addEventListener("click",function(e){

alert("child事件被觸發，"+e.target.id)

},true)

結果：

parent事件被觸發，parent

child事件被觸發，child

結論：先parent,然後child。事件觸發順序變更為自外向內，這就是事件捕獲。