js06 js事件事件委託冒泡和捕獲！

對於文件嵌入內容不是很清楚的同學可以去看一下html5權威指南的第15章節內容。


"text" id=
"test"
>
<
/body>
/* 雖然id可以直接拿來使用，但是並不提倡，這不符合規範！ */
test.
onkeypress
=function
(event)
;<
/script>

在我依次按下數字鍵1、2、3、4、5、6時控制台是如下效果：

index.html:15 49 index.html:16 index.html:15 50 index.html:16 1 index.html:15 51 index.html:16 12 index.html:15 52 index.html:16 123 index.html:15 53 index.html:16 1234 index.html:15 54

index.html:16 12345

但是如果是keyup的事件呢：

在我依次按下數字鍵1、2、3、4、5、6時控制台是如下效果：

index.html:15 49 index.html:16 1 index.html:15 50 index.html:16 12 index.html:15 51 index.html:16 123 index.html:15 52 index.html:16 1234 index.html:15 53 index.html:16 12345 index.html:15 54

index.html:16 123456

根據網頁文件的dom級別規定層級結構：

文件結構

document

html

body

element

假定事件在element上觸發，然後事件會跟著下圖一次冒泡

graph lr
element-->body
body-->html
html-->document

事件是預設冒泡的，在ie9，opera9.5及其他瀏覽器各版本及更高版本都是支援事件流的，但是上述明確瀏覽器的更低版本則不支援。

控制台輸出的結果：

index.html:29 index.html:26 … index.html:23 … index.html:20 #document

index.html:17 window

如果我們把this全**tostring方法改為字串！

index.html:29    [object htmldivelement]
index.html:26    [object htmlbodyelement]
index.html:23    [object htmlhtmlelement]
index.html:20    [object htmldocument]
index.html:17    [object window]

同事件冒泡正好相反，它會按照事件流向下級結構傳遞：

graph lr
document-->html
html-->body
body-->element

而控制他們事件流傳遞方向的建立事件監聽時的乙個引數，後面我再詳細解釋。

testelement.
addeventlistener
("click"
,function
(event)
,false);
/*index.html:32    
index.html:33    click
*/

它的第三個引數預設為false，代表預設使用事件冒泡規則，同時事件會根據冒泡規則一次向上傳遞，如果改為true則事件採用事件捕獲規則，根據文件結構和元素關係進行事件的向下傳遞。

testelement.
removeeventlistener
("click"
,function
(event)
,false
);

但是我們要注意的地方是，事件移除程式移除的是第二引數傳遞進去的函式，如果是函式體，會因為指向問題使移除監聽並不算成功，而我們如果傳遞進去的是函式名的話，則能很好的達到效果！沒聽懂，沒關係，看下面：

testelement.
addeventlistener
("click"
,function
(event)
,false);
testelement.
removeeventlistener
("click"
,function
(event)
,false);
/*index.html:32 
index.html:33 click
*/

沒錯，remove裡的沒有執行，但是add裡的卻仍然很好的執行了！那我們來看正確的方式！

testelement.
addeventlistener
("click"
, handler,
false);
testelement.
removeeventlistener
("click"
, handler,
false);
function
handler
(event)
/*控制台你什麼也不會看到！
*/

究其原因，是因為上面的建立和移除是各自建立的函式，它們看起來很像，但是根本沒有絲毫"血緣"關係，它們在記憶體中佔據了兩個不同的位置，而後面引用的函式名確實代表的同乙個"東西"，它們指向的是記憶體中的同乙個位置！！！

/*index.html:29 index.html:30 click

*/

如果要測試事件捕獲需要用規範的建立事件監聽，並使第三個引數改為true就可以了！

var eventutil =
else
if(ele.attachevent)
else},
removehandler:
function
(ele, type, handler)
else
if(ele.detachevent)
else},
getevent:
function
(event)
,    gettarget:
function
(event)
,    preventdefault:
function
(event)
else
}，    stoppropagation:
function
(event)
else}}
;//比如建立乙個鍵盤監聽事件
eventutil.
addhandler
(document,
"keyup"
,function
(event)
);

/* 事件處理程式建立了乙個鍵盤監聽事件，通過eventutil物件的getevent獲取當前事件，然後通過event的特有屬性， event.target獲取到事件觸發時的響應目標(直接獲取到元素物件！)，然後通過引數等呼叫相應需要實現的函式 */eventutil. addhandler (document, "keyup" ,function (event)

);

js06 js事件事件委託冒泡和捕獲！

js事件冒泡和事件委託

JS基礎事件事件委託

JS事件冒泡事件捕獲和事件委託

js06 js事件 事件委託 冒泡和捕獲！

js事件冒泡和事件委託

JS基礎 事件 事件委託

JS事件冒泡 事件捕獲和事件委託

相關推薦

js06 js事件事件委託冒泡和捕獲！

JS基礎事件事件委託

JS事件冒泡事件捕獲和事件委託