Html代码
!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" lang="zh" xml:lang="zh"
head
meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /
meta name="developer" content="Realazy" /
titleBubble in JavaScript DOM/title
style type="text/css" media="screen"
div * {display:block; margin:4px; padding:4px; border:1px solid white;}
textarea {width:20em; height:2em;}
/style
script type="text/javascript"
//![CDATA[
function init(){
var log = document.getElementsByTagName('textarea')[0];
var all = document.getElementsByTagName('div')[0].getElementsByTagName('*');
for (var i = 0, n = all.length; i n; ++i){
all[i].onmouseover = function(e){
this.style.border = '1px solid red';
log.value = '鼠标现在进入的是: ' + this.nodeName;
};
all[i].onmouseout = function(e){
this.style.border = '1px solid white';
};
}
var all2 = document.getElementsByTagName('div')[1].getElementsByTagName('*');
for (var i = 0, n = all2.length; i n; ++i){
all2[i].onmouseover = function(e){
this.style.border = '1px solid red';
if (e) //停止事件冒泡
e.stopPropagation();
else
window.event.cancelBubble = true;
log.value = '鼠标现在进入的是: ' + this.nodeName;
};
all2[i].onmouseout = function(e){
this.style.border = '1px solid white';
};
}
}
window.onload = init;
//]]
/script
/head
body
h1Bubble in JavaScript DOM/h1
pDOM树的结构是:/p
precode
UL
- LI
- A
- SPAN
/code/pre
div
ul
lia href="#"spanBubbllllllllllllllle/span/a/li
lia href="#"spanBubbllllllllllllllle/span/a/li
/ul
/div
textarea/textarea
p鼠标进入UL的任何一个子元素,如果不停止冒泡,我们从UL到SPAN都定义了鼠标悬停(codemouseover/code)事件,这个事件会上升了UL,从而从鼠标所进入的元素到UL元素都会有红色的边。/p
div
ul
lia href="#"spanBubbllllllllllllllle/span/a/li
lia href="#"spanBubbllllllllllllllle/span/a/li
/ul
/div
p如果停止冒泡,事件不会上升,我们就可以获取精确的鼠标进入元素。/p
/body
/html
javascript 事件冒泡
下面图老师小编跟大家分享javascript 事件冒泡,一起来学习下过程究竟如何进行吧!喜欢就赶紧收藏起来哦~