บทความนี้อธิบายถึงคำจำกัดความและการใช้ฟองสบู่เหตุการณ์ JavaScript แบ่งปันสำหรับการอ้างอิงของคุณดังนี้:
<! 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 = "ข้อความ/html; JavaScript Dom </title> <style type = "text/css" media = "หน้าจอ"> div * {display: block; มาร์จิ้น: 4px; Padding: 4px; ชายแดน: 1px Solid White; } textarea {width: 20em; ความสูง: 2em; } </style> <script type = "text/javascript"> // <! [cdata [function init () {var log = document.getElementByTagname ('textarea') [0]; var all = document.getElementByTagname ('div') [0] .getElementByTagname ('*'); สำหรับ (var i = 0, n = all.length; i <n; ++ i) {all [i] .onmouseover = function (e) {this.style.border = '1px red 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 red red'; ถ้า (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> ฟองใน JavaScript Dom </h1> <p> โครงสร้างของทรี DOM คือ: </p> <pre> <code> ul - li - a - span </code> href = "// www.vevb.com/#"> <span> bubbllllllllllllllle </span> </a> </li> <li> <a href = "// www.vevb.com/#"> <pan> <p> หากเมาส์เข้าสู่องค์ประกอบลูกใด ๆ ของ UL หากไม่หยุดการทำให้เกิดฟองเราจะกำหนดเหตุการณ์เมาส์ (<code> Mouseover </code>) เหตุการณ์จาก UL ถึง Span เหตุการณ์นี้จะเพิ่มขึ้นเป็น UL เพื่อให้มีขอบสีแดงจากองค์ประกอบที่ป้อนโดยเมาส์ไปยังองค์ประกอบ UL </p> <div> <ul> <li> <a href = "// www.vevb.com/#"> <span> bubbllllllllllllllle </span> </a> </li> <li> <a href = "// www.vevb.com/#"> <span> </div> <p> หากฟองหยุดหยุดเหตุการณ์จะไม่เพิ่มขึ้นและเราจะได้องค์ประกอบรายการเมาส์ที่แน่นอน </p> </body> </html>สำหรับข้อมูลเพิ่มเติมเกี่ยวกับเนื้อหาที่เกี่ยวข้องกับ JavaScript โปรดตรวจสอบหัวข้อของไซต์นี้: "สรุปเอฟเฟกต์และเทคนิคการสลับ JavaScript", "สรุปทักษะอัลกอริธึมการค้นหา JavaScript", "สรุปผลการสรุปและเทคนิคการสรุปของ JavaScript ของ JavaScript อัลกอริทึมและเทคนิคการสำรวจ JavaScript "และ" สรุปการใช้งานทางคณิตศาสตร์ JavaScript "
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน