瀏覽器的事件模型 DOM第0級事件模型 他的屬性提供了關於當前正被處理的已觸發事件的大量信息。這包括一些細節，比如在哪個元素上觸發的事件、滑鼠事件的坐標以及鍵盤事件中單擊了哪個鍵。 當觸發 dom 樹中一個元素上的事件時，事件模型會檢查這個元素是否已經創建了特定的事件處理器。如果是，就會調用已創建的 ...
瀏覽器的事件模型
DOM第0級事件模型
- Event實例
他的屬性提供了關於當前正被處理的已觸發事件的大量信息。這包括一些細節，比如在哪個元素上觸發的事件、滑鼠事件的坐標以及鍵盤事件中單擊了哪個鍵。
- 事件冒泡
當觸發 dom 樹中一個元素上的事件時，事件模型會檢查這個元素是否已經創建了特定的事件處理器。如果是，就會調用已創建的事件處理器。然後，事件模型會檢查目標元素的父元素，看其是否已經為此事件類型創建了處理器。如果是，就調用已創建的處理器，之後檢查它的父元素，以及父元素的父元素，以此類推，直到 dom 樹的頂部。
DOM第2級事件模型
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)
可以為事件名稱添加以圓點分隔的尾碼來指定命名空間，以批量操作事件處理器。
可以通過單個bind()方法來為一個元素綁定多個事件。
$('.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
當使用這些便捷方法時，event.data值是只讀的。他們有一個參數 listener 函數，表示事件處理器。
focusin focusout
one(eventType, data, listener)
刪除事件處理器
unbind(eventType, listener); unbind(event)
刪除特定的事件處理器
刪除命名空間中的所有事件處理器
$('*').unbind('.fred')
Event實例
獨立於瀏覽器的jQuery.Event屬性和方法
| 名稱 | 描述 |
| altKey | |
| ctrlKey | |
| currentTarget | |
| data | |
| metaKey | |
| pageX | |
| pageY | |
| relatedTarget | |
| screenX | |
| screenY | |
| shiftKey | |
| result | |
| target | |
| timestamp | |
| type | |
| which | |
| preventDefault() | |
| stopPropagation() | |
| stopImmediatePropagation() | |
| isPropagationStopped() | |
| isImmediatePropagationStopped() |
預先管理事件處理器（deprecated)
- 創建live事件處理
live(eventType, data, listener)
- 刪除live事件處理
die(eventType, listener)
觸發事件處理器
trigger(eventType, data)
triggerHandler(eventType, data)
觸發的便捷方法
blur() change() click() dblclick() error() focus() focusin() focusout() keydown() keypress() keyup() load() mousedown() mouseenter() mouseleave() mousemove() mouseout() mouseover() mouseup() resize() scroll() select() submit() unload()
其他事件相關的方法
- 起切換作用的監聽器
toggle(listener1, listener2, ...)
- 在元素上懸停滑鼠
hover(enterHandler, leaveHandler); hover(handler)
充分利用（更多的）事件
過濾大的數據集合
通過模板複製創建元素
建立主體標記
添加新的過濾器
添加限定控制項
刪除不需要的過濾器和其他任務
