이 기사에서는 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 = "text/html; charset = utf-8"/> <meta name = "teveloper ="realy " JavaScript dom </title> <Style Type = "Text/CSS"Media = "Screen"> div * {display : block; 마진 : 4px; 패딩 : 4px; 테두리 : 1px 솔리드 흰색; } textArea {너비 : 20em; 높이 : 2em; } </style> <script type = "text/javaScript"> // <! var all = document.getElementSyTagName ( '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; }; 모든 [i] .onmouseout = function (e) {this.style.border = '1px Solid White'; }; } 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 solid white'; }; }} window.onload = init; //]]> </script> </head> <body> <h1> javaScript dom </h1> <p> 돔 트리의 구조는 다음과 같습니다. href = "// www.vevb.com/#"> <span> bubbllllllllllllllllllle </</a> </li> <li> <a href = "// www.vevb.com/#"> <span> bubbllllllllllllllllle> </in textarea> </intarea>> </ul> 마우스가 UL의 자식 요소로 들어가면 기포를 멈추지 않으면 마우스 호버 (<code> 마우스 오버 </code>) 이벤트를 UL에서 스팬으로 정의합니다. 이 이벤트는 UL로 올라가서 마우스가 UL 요소로 입력 한 요소에서 빨간색 가장자리가 나타납니다. </p> <div> <ul> <li> <a href="//www.VeVB.COM/#"><span>Bubbllllllllllllllllle</span></a> </li> <li> <a href="//www.VeVB.COM/#"><span>Bubbllllllllllllllllle</span></a> </li> </ul> </div> <p> 버블이 멈추면 이벤트가 상승하지 않으며 정확한 마우스 입력 요소를 얻을 수 있습니다. </p> </body> </html>JavaScript 관련 컨텐츠에 대한 자세한 내용은이 사이트의 주제를 확인하십시오. "JavaScript 스위칭 효과 및 기술 요약", "JavaScript 검색 알고리즘 기술 요약", "JavaScript 애니메이션 효과 및 기술 요약", "Javascript 오류 및 디버깅 기술의 요약" "JavaScript 기술의 요약" "" "요약" "", Malgority Sknickes의 요약 "". JavaScript Traversal 알고리즘 및 기술 "및"JavaScript 수학 연산 사용 요약 "
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.