理解JavaScript的事件冒泡
2023-04-12
http://www.blueidea.com/tech/web/2007/4628.asp
如果你還不理解JavaScript的事件冒泡往下看：
代碼:
<
html
xmlns
="http://www.w3.org/1999/xhtml"
lang
="zh"
xml:lang
="zh"
>
<
head
>
<
meta
http-equiv
="Content-Type"
content
="text/html; charset=UTF-8"
/>
<
meta
name
="developer"
content
="Realazy"
/>
<
title
>
Bubble in JavaScript DOM
<
style
type
="text/css"
media
="screen"
>
div *
{
display
:
block
;
margin
:
4px
;
padding
:
4px
;
border
:
1px solid white
;
}
textarea
{
width
:
20em
;
height
:
2em
;
}
<
script
type
="text/javascript"
>
//
<
body
>
<
h1
>
Bubble in JavaScript DOM
<
p
>
DOM樹的結(jié)構(gòu)是：
<
pre
><
code
>
UL
- LI
- A
- SPAN
<
div
>
<
ul
>
<
li
><
a
href
="#"
><
span
>
Bubbllllllllllllllle
<
li
><
a
href
="#"
><
span
>
Bubbllllllllllllllle
<
textarea
>
<
p
>
鼠標進入UL的任何一個子元素，如果不停止冒泡，我們從UL到SPAN都定義了鼠標懸停（
<
code
>
mouseover
）事件，這個事件會上升了UL，從而從鼠標所進入的元素到UL元素都會有紅色的邊。
<
div
>
<
ul
>
<
li
><
a
href
="#"
><
span
>
Bubbllllllllllllllle
<
li
><
a
href
="#"
><
span
>
Bubbllllllllllllllle
<
p
>
如果停止冒泡，事件不會上升，我們就可以獲取精確的鼠標進入元素。
本文僅代表作者觀點，版權(quán)歸原創(chuàng)者所有，如需轉(zhuǎn)載請在文中注明來源及作者名字。
免責聲明：本文系轉(zhuǎn)載編輯文章，僅作分享之用。如分享內(nèi)容、圖片侵犯到您的版權(quán)或非授權(quán)發(fā)布，請及時與我們聯(lián)系進行審核處理或刪除，您可以發(fā)送材料至郵箱：service@tojoy.com