evento javascript burbujeando
Autor：Eve Cole
Fecha de actualización：2009-06-11 16:22:17
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transicional//ES"
" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml " lang="zh" xml:lang="zh">
<cabeza>
<meta http-equiv="Tipo de contenido" content="text/html; conjunto de caracteres=UTF-8" />
<meta nombre="desarrollador" contenido="Realazy" />
<title>Burbuja en JavaScript DOM</title>
<tipo de estilo="texto/css" media="pantalla">
div * {display:bloque; margen: 4px; relleno: 4px; borde: 1px blanco sólido;}
área de texto {ancho: 20em; altura:2em;}
</estilo>
<tipo de script="texto/javascript">
//<![CDATA[
función inicio(){
var log = document.getElementsByTagName('textarea')[0];
var todo = document.getElementsByTagName('div')[0].getElementsByTagName('*');
para (var i = 0, n = toda la longitud; i < n; ++i){
todo[i].onmouseover = función(e){
this.style.border = '1px rojo sólido';
log.value = '鼠标现在进入的是： ' + this.nodeName;
};
todo[i].onmouseout = función(e){
this.style.border = '1px blanco sólido';
};
}
var all2 = document.getElementsByTagName('div')[1].getElementsByTagName('*');
para (var i = 0, n = all2.length; i < n; ++i){
all2[i].onmouseover = función(e){
this.style.border = '1px rojo sólido';
si (e) //停止事件冒泡
e.stopPropagation();
demás
ventana.event.cancelBubble = verdadero;
log.value = '鼠标现在进入的是： ' + this.nodeName;
};
all2[i].onmouseout = función(e){
this.style.border = '1px blanco sólido';
};
}
}
ventana.onload = init;
//]]>
</script>
</cabeza>
<cuerpo>
<h1>Burbuja en DOM de JavaScript</h1>
<p>DOM 树的结构是:</p>
<pre><código>
UL
-LI
- A
- DURAR
</código></pre>
<div>
<ul>
<li><a href="#"><span>Bubbllllllllllllllle</span></a></li>
<li><a href="#"><span>Bubbllllllllllllllle</span></a></li>
</ul>
</div>
<área de texto></área de texto>
<p>鼠标进入UL的任何一个子元素，如果不停止冒泡，我们从UL到SPAN都定义了鼠标悬停（<code>mouseover</code>）事件，这个事件会上升了UL，从而从鼠标所进入的元素到UL元素都会有红色的边.</p>
<div>
<ul>
<li><a href="#"><span>Bubbllllllllllllllle</span></a></li>
<li><a href="#"><span>Bubbllllllllllllllle</span></a></li>
</ul>
</div>
<p>如果停止冒泡，事件不会上升，我们就可以获取精确的鼠标进入元素。</p>
</cuerpo>
</html>
