JavaScript DOM 작업에서는 JS 버블 링 이벤트를 확실히 만나게됩니다. 가장 일반적인 것은 그림과 같이 div 팝업 이벤트입니다.
회색 부분을 클릭하면 팝업 창이 사라지고 검은 부분을 클릭하면 효과가 없습니다.
다음 코드를 사용하여 JS의 버블 링 이벤트를 분석하십시오.
HTML 코드 :
코드 사본은 다음과 같습니다.
<! doctype html>
<html lang = "en">
<헤드>
<meta charset = "utf-8">
<title> JS 버블 링 이벤트 </title>
<link rel = "Stylesheet"href = "Style.css">
</head>
<body>
<div>
<H1> JS 버블 이벤트 분석 </h1>
<HR>
<div>
<버튼>
나를 클릭하세요!
</버튼>
</div>
</div>
<cript>
var box = document.querySelector ( ". box"),
btn = document.querySelector ( ". btn");
box.onclick = function (이벤트) {
경고 ( "I am div");
}
btn.onclick = function (event) {
Alert ( "I Am Button");
}
</스크립트>
</body>
</html>
Firefox 브라우저의 기본 개발자 도구를 사용하여 3D보기는 DIV 레이어의 순서를 명확하게 볼 수 있습니다.
삽화:
버튼을 클릭하면 "I Am A Butter"가 나타나고 "I Am A Div"가 팝업됩니다. 버튼 이벤트가 먼저 트리거되고 다음 Div Click 이벤트의 레이어가 트리거되기 때문입니다.
이벤트의 트리거는 첫 번째 첫 번째 원칙입니다.
삽화:
그런 다음 때때로 우리는 여러 이벤트가 충돌을 유발하는 것을 원하지 않으므로 이벤트에는 stopPropagation ()이 있습니다. 거품을 방지하는 방법.
링크와 같이 일반적으로 사용되는 이벤트 방법도 있습니다. 링크를 클릭하면 점프하고 싶지 않으므로 이벤트를 사용합니다 .preventDefault (); 방법
예제 코드는 다음과 같습니다
코드 사본은 다음과 같습니다.
<! doctype html>
<html lang = "en">
<헤드>
<meta charset = "utf-8">
<title> JS 버블 링 이벤트 </title>
<link rel = "Stylesheet"href = "Style.css">
</head>
<body>
<div>
<H1> JS 버블 이벤트 분석 </h1>
<HR>
<div>
<버튼>
나를 클릭하세요!
</버튼>
<a href = "http://www.liteng.org"id = "link"> 나는 링크입니다 </a>
</div>
</div>
<cript>
var box = document.querySelector ( ". box"),
btn = document.querySelector ( ". btn");
box.onclick = function (이벤트) {
경고 ( "I am div");
}
btn.onclick = function (event) {
Alert ( "I Am Button");
event.stopPropagation ();
}
document.getElementById ( 'link'). onclick = function (event) {
Alert ( "I Am Link");
event.preventDefault ();
}
/*event.stopPropagation ()을 구별합니다. 및 event.preventDefault ();
전자는 stopPropagation () 메소드를 사용하여 이벤트가 거품을 방지하지 않습니다.
후자는 하이퍼 링크 차단과 같은 기본 동작을 차단하는 것입니다.
*/
</스크립트>
</body>
</html>
JS의 버블 링 사건을 완전히 이해할 수 있습니까? 질문이 있으시면 메시지를 남겨주세요