버블링 이벤트란 무엇입니까?
즉, 여러 div가 중첩된 경우, 즉 상위-하위 관계가 설정되면 상위 div와 하위 div가 onclick 이벤트에 참여하고 하위 div의 onclick 이벤트가 트리거되면 하위 div가 해당 작업을 수행합니다. js 작업. 그러나 상위 div의 onclick 이벤트도 트리거됩니다. 이로 인해 여러 수준의 이벤트 동시성이 발생하여 페이지 혼란이 발생합니다. 버블링 이벤트입니다.
버블링 이벤트를 제거하는 방법
JavaScript 이벤트 버블링 방지(cancelBubble, stopPropagation)
다음 코드는 버블링 효과가 무엇인지, 버블링 효과 제거가 무엇인지 매우 잘 설명합니다.
다음과 같이 코드 코드를 복사합니다.
<html>
<머리>
<title> JavaScript 이벤트 버블링 방지(cancelBubble, stopPropagation)</title>
<meta name="keywords" content="JavaScript, 이벤트 버블링, cancelBubble, stopPropagation" />
<스크립트 유형="텍스트/자바스크립트">
함수 doSomething(obj,evt) {
경고(obj.id);
var e=(evt)?evt:window.event; //브라우저 유형을 결정하고 IE 커널 기반 브라우저에서 cancelBubble을 사용합니다.
if (window.event) {
e.cancelBubble=true;
} 또 다른 {
//e.preventDefault(); //firefox 커널 기반 브라우저에서 stopPropagation 메소드 지원
e.stopPropagation();
}
}
</script>
</head>
<본문>
<div id="parent1" onclick="alert(this.id)">
<p>부모1 div입니다.</p>
<div id="child1" onclick="alert(this.id)">
<p>어린이1입니다.</p>
</div>
<p>parent1 div입니다.</p>
</div>
<br />
<div id="parent2" onclick="alert(this.id)">
<p>parent2 div입니다.</p>
<div id="child2" onclick="doSomething(this,event);">
<p>어린이2입니다.</p>
</div>
<p>parent2 div입니다.</p>
</div>
</body>
</html>
코드를 직접 복사한 후 child1을 클릭하면 child1 대화상자뿐만 아니라 parent1 대화상자도 팝업됩니다.
버블링 이벤트네요
그러나 chile2를 클릭하면 child2만 팝업되고 parent2는 팝업되지 않습니다. 이는 버블링 이벤트를 방지하는 특수 효과를 적용한 효과입니다.