建議學(xué)習(xí)時長： 60分鐘
學(xué)習(xí)方式：深入

學(xué)習(xí)目標(biāo)

• 知道常見的事件有哪些
• 知道如何綁定和解除綁定事件
• 知道什么是事件委托，以及事件委托怎么寫
• 知道如何組織事件冒泡和默認(rèn)行為

詳細(xì)介紹

綁定事件處理函數(shù)

通用寫法

$elem.on(事件名稱, 事件處理函數(shù))

簡寫

$elem.事件名(事件處理函數(shù))

支持簡寫的事件有：

• click
• dblclick
• change
• hover
• keyup
• keydown
• keypress
• focus
• blur
• ...

事件委托

$par.on(事件名稱, 委托元素, 事件處理函數(shù))

解綁事件

解除某類型事件的所有事件處理函數(shù)

$elem.off(事件名稱)

解除某類型事件的某個事件處理函數(shù)

$elem.off(事件名稱, 要解除的事件處理函數(shù))

腳本觸發(fā)事件

$elem.trigger(事件名稱)

事件對象上的常用屬性

• target
• currentTarget
• relatedTarget
• pageX
• pageY
• which 按下的鍵值
• metaKey meta鍵是否被按下，在 Window 指 Windows key，在 Mac 上指 Command Key

阻止事件冒泡

event.stopPropagation();

阻止元素的默認(rèn)行為

event.preventDefault();

元素的默認(rèn)行為，如

• 點擊a元素跳轉(zhuǎn)頁面
• 右擊元素出現(xiàn)上下文菜單
• 點擊表單的提交按鈕會提交表單

return false

在 jQuery 中，若在事件處理函數(shù)中 return false，則會阻止事件冒泡和阻止默認(rèn)行為。

注:如果不用 jQuery，在事件處理函數(shù)中 return false 與寫法有關(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: /* 點滑輪 */; break;
    case 3: /* 右擊 */; break;
  }
});

圖片加載失敗

$( "img" )
  .error(function() {
    $( this ).attr( "src", "replacement.png" );
  })