建議學(xué)習(xí)時(shí)長(zhǎng)： 60分鐘
學(xué)習(xí)方式：深入
學(xué)習(xí)目標(biāo)
- 知道常見(jiàn)的事件有哪些
- 知道如何綁定和解除綁定事件
- 知道什么是事件委托毕荐，以及事件委托怎么寫(xiě)
- 知道如何組織事件冒泡和默認(rèn)行為
詳細(xì)介紹
綁定事件處理函數(shù)
通用寫(xiě)法
$elem.on(事件名稱, 事件處理函數(shù))
簡(jiǎn)寫(xiě)
$elem.事件名(事件處理函數(shù))
支持簡(jiǎn)寫(xiě)的事件有：
- click
- dblclick
- change
- hover
- keyup
- keydown
- keypress
- focus
- blur
- ...
事件委托
$par.on(事件名稱, 委托元素, 事件處理函數(shù))
解綁事件
解除某類(lèi)型事件的所有事件處理函數(shù)
$elem.off(事件名稱)
解除某類(lèi)型事件的某個(gè)事件處理函數(shù)
$elem.off(事件名稱, 要解除的事件處理函數(shù))
腳本觸發(fā)事件
$elem.trigger(事件名稱)
事件對(duì)象上的常用屬性
- target
- currentTarget
- relatedTarget
- pageX
- pageY
- which 按下的鍵值
- metaKey meta鍵是否被按下炒考，在 Window 指 Windows key，在 Mac 上指 Command Key
阻止事件冒泡
event.stopPropagation();
阻止元素的默認(rèn)行為
event.preventDefault();
元素的默認(rèn)行為郎逃，如
- 點(diǎn)擊a元素跳轉(zhuǎn)頁(yè)面
- 右擊元素出現(xiàn)上下文菜單
- 點(diǎn)擊表單的提交按鈕會(huì)提交表單
return false
在 jQuery 中葱色，若在事件處理函數(shù)中 return false响委，則會(huì)阻止事件冒泡和阻止默認(rèn)行為。
注:如果不用 jQuery剩愧，在事件處理函數(shù)中 return false 與寫(xiě)法有關(guān)猪叙。如
elem.onclick = function(event){
return false;// 相當(dāng)與 event.preventDefault()
};
elem.addEventListener(
'click',
function(event){
return false;// 什么都不做。
},
false
);
總結(jié)
考慮到可讀性以及歧義性仁卷。盡量不要用 return false穴翩。
鼠標(biāo)右擊事件
方法1:
$elem.bind("contextmenu",function(evt){// 事件處理函數(shù)});
方法2:
$elem.mousedown(function(event) {
switch (event.which) {
case 1: /* 左擊 */; break;
case 2: /* 點(diǎn)滑輪 */; break;
case 3: /* 右擊 */; break;
}
});
圖片加載失敗
$( "img" )
.error(function() {
$( this ).attr( "src", "replacement.png" );
})
