jQuery的事件處理機(jī)制，增強(qiáng)了事件的處理能力向族，鏈?zhǔn)讲僮魇沟脛?dòng)畫更加的流暢和方便。封裝的方法讓我們不用去考慮處理js的瀏覽器兼容
jQuery中的事件
1. ready 和 load 事件
$(document).ready()方法。DOM就緒就會(huì)被執(zhí)行崭参。
DOM樹解析完畢相寇，但是圖片可能未加載完慰于，圖片的高度和寬度屬性不一定有效
$(window).load(function(){ }) 方法，將處理函數(shù)綁定給window對(duì)象唤衫，則會(huì)在所有內(nèi)容加載完畢后觸發(fā)婆赠。可以綁定在元素上佳励，元素加載完后執(zhí)行
ready 和 load 都可以多次使用
2. 事件綁定（on）
on(events,[selector],[data],fn)
events : 事件類型 blur休里、focus蛆挫、click、mouseover等等
selector: 篩選元素
data ：可選參數(shù)妙黍，傳遞給事件對(duì)象的額外數(shù)據(jù)對(duì)象
fn ：事件處理函數(shù)
$(this) jQuery代碼中的關(guān)鍵詞悴侵，在處理函數(shù)內(nèi)，this 引用的是攜帶相應(yīng)行為的DOM元素
3. 合成事件
jQuery有兩個(gè)合成事件拭嫁，hover()和toggle() 方法
hover() 方法
hover(enter,leave);
模擬光標(biāo)懸停事件可免，光標(biāo)移動(dòng)到元素上時(shí)，觸發(fā)enter 函數(shù)噩凹，光標(biāo)移出元素巴元，觸發(fā) leave 函數(shù)-
toggle() 方法
toggle(fn1,fn2,···,fnN)（1.9版本后取消了這個(gè)方法）
模擬鼠標(biāo)連續(xù)單擊事件，第一次單擊觸發(fā)函數(shù) fn1驮宴，第二次單擊觸發(fā)函數(shù) fn2逮刨，直到最后一個(gè)，隨后單擊重復(fù)對(duì)這幾個(gè)函數(shù)輪番調(diào)用toggle另一個(gè)作用堵泽，切換元素的可見狀態(tài)
4. 事件冒泡
冒泡: **
假設(shè)網(wǎng)頁上有兩個(gè)元素修己，div** 包裹著 span ，都綁定了click事件迎罗，body 也綁定了click 事件睬愤。當(dāng)點(diǎn)擊** span** 元素時(shí)，也單擊了div和 ** body** 纹安，會(huì)按照向上冒泡的順序響應(yīng)click 事件
停止事件冒泡: stopPropagation()
$('span').on('click',function(event){
alert("span 被點(diǎn)擊了");
event.stopPropagation(); // 停止事件冒泡
});
這里對(duì)IE 和 其他瀏覽器的 封裝尤辱，不用去使用js里針對(duì)IE 需要單獨(dú)使用event.cancekBubble=true
**阻止默認(rèn)行為: preventDefault **
例如默認(rèn)鼠標(biāo)右鍵點(diǎn)擊菜單的顯示,表單提交按鈕的在信息錯(cuò)誤時(shí)取消提交等等
event.preventDefault
注：如果想同時(shí)對(duì)事件對(duì)象停止冒泡和默認(rèn)行為，可以在事件處理函數(shù)中返回false
return false
5. 事件對(duì)象的屬性
jQuery 對(duì)事件對(duì)象常用的屬性進(jìn)行了封裝厢岂，使得事件處理在各大瀏覽器下都可以正常允許而不需要進(jìn)行瀏覽器類型判斷
- event.type 獲取事件類型
- event.preventDefault 阻止默認(rèn)事件行為
- ** event.stopPropagation()** 停止事件冒泡
- event.target 獲取觸發(fā)事件的元素
- event.relatedTarget 獲取相關(guān)元素
- ** event.pageX**光標(biāo)相對(duì)于頁面的x坐標(biāo)
- ** event.pageY**光標(biāo)相對(duì)于頁面的y坐標(biāo)（如果頁面上有滾動(dòng)條則還要加上滾動(dòng)條的寬度或者高度）
-
event.which 在鼠標(biāo)單擊事件中獲取到的鼠標(biāo)的左光督、中、右鍵塔粒，在鍵盤事件中獲取鍵盤按鍵
1 = 左结借、 2 = 中 、3 = 右 - ** event.metaKey** 鍵盤事件中獲取<ctrl>按鍵
6. 模擬操作
模擬用戶操作卒茬，例如打開頁面就觸發(fā)click事件 而不是需要用戶主動(dòng)去點(diǎn)擊
trigger 常用模擬
$('#btn').trigger('click');
//等價(jià)于
$('#btn').click();
//觸發(fā)自定義事件 myClick 自定義事件名
$('#btn').trigger('myClick');
trigger 傳遞數(shù)據(jù)
trigger(type,[data])
trigger方法觸發(fā)事件后船老，會(huì)執(zhí)行瀏覽器默認(rèn)操作。使用triggerHandler方法取消默認(rèn)操作
jQuery中的動(dòng)畫
jQuery 做動(dòng)畫要就在標(biāo)準(zhǔn)模式下圃酵，否則可能會(huì)引起動(dòng)畫抖動(dòng)
1.show 和 hide 方法
**hide： ** 在將元素的display 屬性設(shè)置為 none 之前柳畔，先記住原先的display屬性值
**show ： ** 根據(jù)之前記錄的display 屬性值，來顯示元素
2.fadeIn 和 fadeOut 方法
與show 和 hide 方法 類似辜昵，顯示和隱藏元素荸镊，通過改變?cè)氐耐该鞫?/p>
3.slideUp 和 slideDown 方法
改變?cè)氐母叨?br> **slideUp： ** 元素由下到上縮短隱藏
**slideDown： **元素由上至下延伸展示
3.自定義動(dòng)畫方法animate()
animate(params,speed,callback)
params : 一個(gè)包含屬性及值的映射例如｛left：1000｝
speed : 速度參數(shù) 可選
callback : 在動(dòng)畫完成時(shí)執(zhí)行的函數(shù) 可選
停止動(dòng)畫： stop ([clearQueue],[gotoEnd])
clearQueue: 是否清空未執(zhí)行的動(dòng)畫隊(duì)列 可選
gotoEnd: 是否將正在執(zhí)行的動(dòng)畫跳轉(zhuǎn)到末狀態(tài)
判斷元素是否處于動(dòng)畫狀態(tài)
if(!$(element).is(":animated")){
//如果當(dāng)前沒有進(jìn)行的動(dòng)畫
}
延遲動(dòng)畫：
delay();
3. 其他動(dòng)畫方法
toggle方法
切換元素的可見狀態(tài)
slideToggle方法
通過高度變化來切換匹配元素的可見性
fadeTo方法
把元素的不透明度以漸近的方式調(diào)整到指定的值
fadeToggle方法
通過不透明度變化來切換匹配元素的可見性
