快捷導(dǎo)航

深入理解jQuery 事件處理

更新時(shí)間：2016年06月14日 12:20:35 投稿：jingxian

下面小編就為大家?guī)?lái)一篇深入理解jQuery 事件處理。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

瀏覽器的事件模型

DOM第0級(jí)事件模型

1.Event實(shí)例

他的屬性提供了關(guān)于當(dāng)前正被處理的已觸發(fā)事件的大量信息。這包括一些細(xì)節(jié)，比如在哪個(gè)元素上觸發(fā)的事件、鼠標(biāo)事件的坐標(biāo)以及鍵盤(pán)事件中單擊了哪個(gè)鍵。

2.事件冒泡

當(dāng)觸發(fā) dom 樹(shù)中一個(gè)元素上的事件時(shí)，事件模型會(huì)檢查這個(gè)元素是否已經(jīng)創(chuàng)建了特定的事件處理器。如果是，就會(huì)調(diào)用已創(chuàng)建的事件處理器。然后，事件模型會(huì)檢查目標(biāo)元素的父元素，看其是否已經(jīng)為此事件類(lèi)型創(chuàng)建了處理器。如果是，就調(diào)用已創(chuàng)建的處理器，之后檢查它的父元素，以及父元素的父元素，以此類(lèi)推，直到 dom 樹(shù)的頂部。

DOM第2級(jí)事件模型

IE事件模型

jQuery事件模型

使用jQuery綁定事件處理器

<html> 
<head> 
  <title>jQuery Events Example</title> 
  <script type="text/javascript" src="../scripts/jquery-1.7.1.js"></script> 
  <script type="text/javascript"> 
    $(function () { 
      $('#example') 
       .bind('click', function (event) { 
         alert('BOOM once!'); 
       }) 
       .bind('click', function (event) { 
         alert('BOOM twice!'); 
       }) 
       .bind('click', function (event) { 
         alert('BOOM three times!'); 
       }); 
    }); 
  </script> 
</head> 
 
<body> 
  <img id="example" src="example.jpg" /> 
</body> 
</html>

bind(eventType, data, handler); bind(eventMap)

可以為事件名稱添加以圓點(diǎn)分隔的后綴來(lái)指定命名空間，以批量操作事件處理器。

可以通過(guò)單個(gè)bind()方法來(lái)為一個(gè)元素綁定多個(gè)事件。

$('.whatever').bind({
  click:function(event){/* handle */},
  mouseenter: function (event) {/* handle */ },
  mouseleave: function (event) {/* handle */ }
})

特定的事件綁定：

blur change click dblclick error focus focusin focusout keydown keypress keyup load mousedown mouseenter mouseleave mousemove mouseout mouseover mouseup ready resize scroll select submit unload

當(dāng)使用這些便捷方法時(shí)，event.data值是只讀的。他們有一個(gè)參數(shù) listener 函數(shù)，表示事件處理器。

focusin focusout

one(eventType, data, listener)

刪除事件處理器

unbind(eventType, listener); unbind(event)

刪除特定的事件處理器

刪除命名空間中的所有事件處理器

$('*').unbind('.fred')Event實(shí)例

獨(dú)立于瀏覽器的jQuery.Event屬性和方法

名稱	描述
altKey
ctrlKey
currentTarget
data
metaKey
pageX
pageY
relatedTarget
screenX
screenY
shiftKey
result
target
timestamp
type
which
preventDefault()
stopPropagation()
stopImmediatePropagation()
isPropagationStopped()
isImmediatePropagationStopped()

觸發(fā)事件處理器

trigger(eventType, data)

triggerHandler(eventType, data)

觸發(fā)的便捷方法

blur() change() click() dblclick() error() focus() focusin() focusout() keydown() keypress() keyup() load() mousedown() mouseenter() mouseleave() mousemove() mouseout() mouseover() mouseup() resize() scroll() select() submit() unload()

其他事件相關(guān)的方法

1.起切換作用的監(jiān)聽(tīng)器

toggle(listener1, listener2, ...)

2.在元素上懸停鼠標(biāo)

hover(enterHandler, leaveHandler); hover(handler)

充分利用（更多的）事件

過(guò)濾大的數(shù)據(jù)集合

通過(guò)模板復(fù)制創(chuàng)建元素

建立主體標(biāo)記

添加新的過(guò)濾器

添加限定控件

刪除不需要的過(guò)濾器和其他任務(wù)