تصف هذه المقالة تعريف واستخدام فقاعات أحداث JavaScript. شاركه للرجوع إليه ، على النحو التالي:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" xmlns = "http://www.w3.org/1999/xhtml" lang = "ZH" JavaScript dom </itlem> <style type = "text/css" media = "screen"> div * {display: block ؛ الهامش: 4px ؛ الحشو: 4px ؛ الحدود: 1 بكسل أبيض صلب ؛ } textarea {width: 20em ؛ الارتفاع: 2EM ؛ } </style> <script type = "text/javaScript"> // <! var all = document.getElementSbyTagName ('div') [0] .getElementsByTagName ('*') ؛ لـ (var i = 0 ، n = all.length ؛ i <n ؛ ++ i) {all [i] .onmouseover = function (e) {this.style.border = '1px solid Red' ؛ log.value = 'الماوس يدخل الآن:' + this.nodename ؛ } ؛ الكل [i] .onmouseout = function (e) {this.style.border = '1px solid white' ؛ } ؛ } var all2 = document.getElementSbyTagName ('div') [1] .getElementsByTagName ('*') ؛ لـ (var i = 0 ، n = all2.length ؛ i <n ؛ ++ i) {all2 [i] .onmouseover = function (e) {this.style.border = '1px solid Red' ؛ إذا (هـ) // توقف الفقاعة الحدث estoppropagation () ؛ 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> فقاعة في javaScript dom </h1> <p> هيكل شجرة dom هو: </p> <pre> <code> ul - li - a - span </code> </pre> <viv> <ul> <li> <a href = "// www.vevb.com/#"> <spl> bubblllllllllllllllllle </aa> </a> </li> <li> <a href = "// www.vevb.com/#" إذا دخل الماوس أي عنصر طفل في UL ، إذا لم يتوقف عن الفقاعة ، فإننا نحدد حدث تحوم الماوس (<code> Mouseover </code>) من UL إلى Span. سيرتفع هذا الحدث إلى UL ، بحيث تكون هناك حواف حمراء من العنصر الذي أدخله الماوس إلى عنصر UL. </p> <viv> <ul> <li> <a href = "// www.vevb.com/#"> <splblllllllllllllllle </af> </a> </li> <li> <li> <a href = "// www.vevb.com/#"> <splbllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllls <p> إذا توقفت الفقاعة ، فلن يرتفع الحدث ، ويمكننا الحصول على عنصر إدخال الماوس الدقيق. </p> </body> </html>لمزيد من المعلومات حول المحتوى المتعلق بـ javaScript ، يرجى مراجعة موضوعات هذا الموقع: "ملخص لتأثيرات وتقنيات تبديل JavaScript" ، "ملخص لمهارات خوارزمية بحث JavaScript" ، "ملخص لتأثيرات الرسوم المتحركة JavaScript و Techniques و" ملخص ". خوارزميات وتقنيات JavaScript Traversal "، و" ملخص استخدام العمليات الرياضية JavaScript "
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.