jQuery事件的綁定執行順序
編輯：JQuery常見問題
體驗效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery事件觸發順序-</title>
<script type="text/javascript" src="http:///keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
</head>
<body>
<!-----------------------------測試代碼開始-------------------------------->
<div id='p1' style="width: 500px; height: 500px; background: #ccc">
點擊d
<div id='p2' style="width: 300px; height: 300px; background: #a9ea00">
點擊c
<p id="p3" style="width: 100px; height: 100px; background: red">
點擊b <span id="p4" style="width: 50px; height: 50px; background:silver" >點擊a</span>
</p>
</div>
</div>
<script type="text/javascript">
$("#p4").on('click', function () { alert('點擊a') });
var p1 = $('#p1')
p1.on('click', function () {
alert('點擊d灰p1')
})
var p2 = $('#p2')
p2.on('click', 'a,p', function (e) {
alert(e.currentTarget.nodeName)
})
p2.on('click', function (e) {
alert('點擊c默認事件1')
})
var p3 = $('#p3')
p3.on('click', function () {
alert('點擊b紅p3')
})
</script>
<!-----------------------------測試結束-------------------------------------->
</body>
</html>
點擊事件順序：
由此可見：
默認的觸發循序是從事件源目標元素也就是event.target指定的元素，一直往上冒泡到document或者body，途經的元素上如果有對應的事件都會被依次觸發
最後得到的結論：
元素本身綁定事件的順序處理機制
分幾種情況：
假設綁定事件元素本身是A，委派元素B.C
第一種：
A,B,C各自綁定事件， 事件按照節點的冒泡層次觸發
第二種：
元素A本身有事件，元素還需要委派元素B.C事件
委派的元素B.C肯定是該元素A內部的，所以先處理內部的委派，最後處理本身的事件
第三種：
元素本身有事件，元素還需要委派事件，內部委派的元素還有自己的事件，這個有點繞
先執行B,C自己本身的事件，然後處理B,C委派的事件，最後處理A事件
為什麼需要了解這個處理的順序呢？ 因為jQuery做委托排序的時候要用到
既然可以冒泡，相應的也應該可以停止
事件對象提供了preventDefault，stopPropagation2個方法一個停止事件傳播，一個傳遞默認的行為（暫且無視IE）
jQuery提供了個萬能的 return false 不僅可以阻止事件冒泡，還可以阻止浏覽器的默認行為，還可以減少ie系列的bug。
其實就是根據返回的布爾值調用preventDefault，stopPropagation方法，下面會提到
e.stopImmediatePropagation方法不僅阻止了一個事件的冒泡，也把這個元素上的其他綁定事件也阻止了
事件委托原理都知道，但是能有多少寫得出jQuery這樣的設計思路呢？好吧，如果您覺得不需要，那麼看看總是沒壞處的。。。
先看看jQuery需要應對的幾個問題
需要處理的的問題一：事件對象不同浏覽器的兼容性
event 對象是 JavaScript 中一個非常重要的對象，用來表示當前事件。event 對象的屬性和方法包含了當前事件的狀態。
當前事件，是指正在發生的事件；狀態，是與事件有關的性質，如 引發事件的DOM元素、鼠標的狀態、按下的鍵等等。
event 對象只在事件發生的過程中才有效。
浏覽器的實現差異：
獲取event對象
在 W3C 規范中，event 對象是隨事件處理函數傳入的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持這種方式；
但是對於 IE8.0 及其以下版本，event 對象必須作為 window 對象的一個屬性。
在遵循 W3C 規范的浏覽器中，event 對象通過事件處理函數的參數傳入。
event的某些屬性只對特定的事件有意義。比如，fromElement 和 toElement 屬性只對 onmouseover 和 onmouseout 事件有意義。
特別指出：分析的版本是2.0.3，已經不再兼容IE6-7-8了，所以部分兼容問題都已經統一了,例如：事件綁定的接口，事件對象的獲取等等
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery事件觸發順序-</title>
<script type="text/javascript" src="http:///keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
</head>
<body>
<!-----------------------------測試代碼開始-------------------------------->
<div id='p1' style="width: 500px; height: 500px; background: #ccc">
點擊d
<div id='p2' style="width: 300px; height: 300px; background: #a9ea00">
點擊c
<p id="p3" style="width: 100px; height: 100px; background: red">
點擊b <span id="p4" style="width: 50px; height: 50px; background:silver" >點擊a</span>
</p>
</div>
</div>
<script type="text/javascript">
$("#p4").on('click', function () { alert('點擊a') });
var p1 = $('#p1')
p1.on('click', function () {
alert('點擊d灰p1')
})
var p2 = $('#p2')
p2.on('click', 'a,p', function (e) {
alert(e.currentTarget.nodeName)
})
p2.on('click', function (e) {
alert('點擊c默認事件1')
})
var p3 = $('#p3')
p3.on('click', function () {
alert('點擊b紅p3')
})
</script>
<!-----------------------------測試結束-------------------------------------->
</body>
</html>
點擊事件順序：
由此可見：
默認的觸發循序是從事件源目標元素也就是event.target指定的元素，一直往上冒泡到document或者body，途經的元素上如果有對應的事件都會被依次觸發
最後得到的結論：
元素本身綁定事件的順序處理機制
分幾種情況：
假設綁定事件元素本身是A，委派元素B.C
第一種：
A,B,C各自綁定事件， 事件按照節點的冒泡層次觸發
第二種：
元素A本身有事件，元素還需要委派元素B.C事件
委派的元素B.C肯定是該元素A內部的，所以先處理內部的委派，最後處理本身的事件
第三種：
元素本身有事件，元素還需要委派事件，內部委派的元素還有自己的事件，這個有點繞
先執行B,C自己本身的事件，然後處理B,C委派的事件，最後處理A事件
為什麼需要了解這個處理的順序呢？ 因為jQuery做委托排序的時候要用到
既然可以冒泡，相應的也應該可以停止
事件對象提供了preventDefault，stopPropagation2個方法一個停止事件傳播，一個傳遞默認的行為（暫且無視IE）
jQuery提供了個萬能的 return false 不僅可以阻止事件冒泡，還可以阻止浏覽器的默認行為，還可以減少ie系列的bug。
其實就是根據返回的布爾值調用preventDefault，stopPropagation方法，下面會提到
e.stopImmediatePropagation方法不僅阻止了一個事件的冒泡，也把這個元素上的其他綁定事件也阻止了
事件委托原理都知道，但是能有多少寫得出jQuery這樣的設計思路呢？好吧，如果您覺得不需要，那麼看看總是沒壞處的。。。
先看看jQuery需要應對的幾個問題
需要處理的的問題一：事件對象不同浏覽器的兼容性
event 對象是 JavaScript 中一個非常重要的對象，用來表示當前事件。event 對象的屬性和方法包含了當前事件的狀態。
當前事件，是指正在發生的事件；狀態，是與事件有關的性質，如 引發事件的DOM元素、鼠標的狀態、按下的鍵等等。
event 對象只在事件發生的過程中才有效。
浏覽器的實現差異：
獲取event對象
在 W3C 規范中，event 對象是隨事件處理函數傳入的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持這種方式；
但是對於 IE8.0 及其以下版本，event 對象必須作為 window 對象的一個屬性。
在遵循 W3C 規范的浏覽器中，event 對象通過事件處理函數的參數傳入。
event的某些屬性只對特定的事件有意義。比如，fromElement 和 toElement 屬性只對 onmouseover 和 onmouseout 事件有意義。
特別指出：分析的版本是2.0.3，已經不再兼容IE6-7-8了，所以部分兼容問題都已經統一了,例如：事件綁定的接口，事件對象的獲取等等
- 上一頁:jQuery生成密碼
- 下一頁:keleyi菜單0.1.8新增功能
小編推薦
熱門推薦