العربية
<!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" /> <title>فقاعة في JavaScript DOM</title> <style type="text/css" media="screen"> div * {display: حاجز؛ الهامش: 4 بكسل؛ الحشو: 4 بكسل؛ الحدود: 1 بكسل أبيض خالص؛} منطقة النص {العرض: 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 أبيض خالص'; }; } 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 أبيض خالص'; }; } } window.onload = init; //]]> </script> </head> <body> <h1>فقاعة في JavaScript DOM</h1> <p>DOM树的结构是:</p> <pre><code> UL - LI - أ - SPAN </code></pre> <div> <ul> <li><a href="#"><span>Bubbllllllllllllll</span></a></li> <li><a href ="#"><span>Bubbllllllllllllllle</span></a></li> </ul> </div> <textarea></textarea> <p> لا داعي للقلق بشأن UL استخدم هذا الرابط لـ UL وSPAN لتتمكن من استخدام الماوس (<code>تمرير الماوس</code>) إلى UL، ثم قم بتشغيله مرة أخرى هذا هو السبب في أن UL هو أفضل ما في الأمر. </p> <div> <ul> <li><a href="#"><span>فقاعة</span></a></li> <li><a href="#"><span > bubblllllllllllllle </aa> </a> </li></ul> </viv> <p> 如果停止冒泡 ， 事件不会上升 ， 我们就可以获取精确的鼠标进入元素。 </p> < / الجسم> </html>
