Artikel ini menjelaskan definisi dan penggunaan gelembung acara JavaScript. Bagikan untuk referensi Anda, sebagai berikut:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // 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"/> <-content "content =" text/html; charset = uTf-8 "/> <content" content = "text/html; charset = UTF-8" JavaScript dom </iteme> <style type = "text/css" media = "screen"> div * {display: block; margin: 4px; padding: 4px; Border: 1px solid white; } textarea {width: 20em; Tinggi: 2em; } </tyle> <script type = "text/javascript"> // <! [cdata [function init () {var log = document.geteLementsbyTagname ('textAreA') [0]; var all = document.geteLementsbyTagname ('div') [0] .geteLementsByTagname ('*'); untuk (var i = 0, n = all.length; i <n; ++ i) {all [i] .onmouseOver = function (e) {this.style.border = '1px solid red'; log.value = 'Mouse sekarang masuk:' + this.nodename; }; semua [i] .onmouseout = function (e) {this.style.border = '1px solid white'; }; } var all2 = document.geteLementsbyTagname ('div') [1] .geteLementsByTagname ('*'); untuk (var i = 0, n = all2.length; i <n; ++ i) {all2 [i] .onmouseOver = function (e) {this.style.border = '1px solid red'; if (e) // hentikan event bubble e.stoppropagation (); lain window.event.cancelbubble = true; log.value = 'Mouse sekarang memasuki:' + this.nodename; }; all2 [i] .onmouseout = function (e) {this.style.border = '1px solid white'; }; }} window.onload = init; //]]> </script> </head> <hody> <h1> gelembung di javascript dom </h1> <p> Struktur pohon DOM adalah: </p> <pe> <code> ul - li - a - span </code> </pr Pre> <v> <ul> <li> <li> href = "// www.vevb.com/#"> <span> bubblllllllllllllllllle </span> </a> </li> <li> <a href = "// www.vevb.com/#"> <span> Bubllllllllllllllle </span> </a> </lib </ullllllllllllllle </span> </a> </lib </ulllllllllllllllle </span> </a> </lib Jika mouse memasuki elemen anak dari UL, jika tidak berhenti menggelembung, kami mendefinisikan acara mouse hover (<code> mouseover </code>) dari UL ke span. Acara ini akan naik ke UL, sehingga akan ada tepi merah dari elemen yang dimasukkan oleh mouse ke elemen UL. </p> <div> <ul> <li> <a href = "// www.vevb.com/#"> <span> bublllllllllllllllllle </span> </a> </li> <li> <a href = "// www.vevb.com/#"> <pan> Bublllllllllllllllllllllllllllllllllllllllllllll </vevb.com/#"> <span> Bubllllllllllllllllllllllllllllllllll </vevb.com/#" <p> Jika gelembung berhenti, acara tidak naik, dan kita bisa mendapatkan elemen entri mouse yang tepat. </p> </body> </html>Untuk informasi lebih lanjut tentang konten terkait JavaScript, silakan periksa topik -topik situs ini: "Ringkasan Efek dan Teknik Peralihan Javascript", "Ringkasan Keterampilan Algoritma Pencarian JavaScript", "Ringkasan Teknik Animasi dan Teknik JavaScript," Ringkasan Ringkasan Data Javascript dan Ringkasan Data Javascript "," Ringkasan Data JavaScript "," Ringkasan Data JavaScript "," Ringkasan DEBUGRITM PENGABUNG DAN RINGKASI DAGGING "RINGKASI DAN RINGKASAN DATRICKS" RINGKASI DAN RINGKASI DAGGING "RINGKASI DAN RINGKASI DAGGING" RINGKAS Algoritma dan teknik traversal javascript ", dan" Ringkasan Penggunaan Operasi Matematika JavaScript "
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.