Bubble in JavaScript DOM

JavaScript的事件冒泡(转载)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Bubble in JavaScript DOM</title>

div * {display:block; margin:4px; padding:4px; border:1px solid white;}

textarea {width:20em; height:2em;}

</style>

//<![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>

<h1>Bubble in JavaScript DOM</h1>

<p>DOM树的结构是：</p>

- LI

- A

- SPAN

</code></pre>

<div>

<ul>

<li><a href="#"><span>Bubbllllllllllllllle</span></a></li>

</ul>

</div>

<p>鼠标进入UL的任何一个子元素，如果不停止冒泡，我们从UL到SPAN都定义了鼠标悬停（<code>mouseover</code>）事件，这个事件会上升了UL，从而从鼠标所进入的元素到UL元素都会有红色的边。</p>

<div>

<ul>

<li><a href="#"><span>Bubbllllllllllllllle</span></a></li>

</ul>

</div>

<p>如果停止冒泡，事件不会上升，我们就可以获取精确的鼠标进入元素。</p>

</body>

</html>

http://realazy.org/blog/2007/04/09/javascript-bubble-demo/

posted on 2007-05-20 14:51 music000 阅读(125) 评论(0) 编辑收藏所属分类: javascript

与我联系

搜索

常用链接

留言簿

我参加的小组

我参与的团队

随笔分类(21)

随笔档案(21)

文章分类

收藏夹(25)

Links

最新随笔

最新评论

阅读排行榜

评论排行榜