버블링 이벤트란 무엇인가요?
여러 div가 중첩되어 있는 경우, 즉 상위 div와 하위 div가 onclick 이벤트에 참여할 때 발생합니다. 하위 div의 onclick 이벤트가 트리거된 후 하위 div는 해당 js 작업을 수행합니다. 그러나 상위 div의 onclick 이벤트도 트리거됩니다. 이로 인해 여러 수준의 이벤트 동시성이 발생하여 페이지 혼란이 발생합니다. 이것은 버블링 이벤트입니다.
버블링 이벤트 제거 방법
JavaScript 이벤트 버블링 전달 방지(cancelBubble, stopPropagation)
다음 코드는 버블링 효과가 무엇인지, 버블링 효과 제거가 무엇인지 잘 설명해줍니다
JavaScript 이벤트 버블링 전달 방지(cancelBubble, stopPropagation) <br><meta name="keywords" content="JavaScript, event bubble, stopPropagation" /> <br><script type="text/javascript"> <br>함수 doSomething(obj,evt) { <br>alert(obj.id); <br>var e=(evt)?evt:window.event; //IE 커널(window) 기반 브라우저인 경우 브라우저 유형을 결정하고 cancelBubble을 사용합니다. .event) { <br>e.cancelBubble=true; <br>} else { <br>//e.preventDefault(); //firefox 커널 기반 브라우저에서 stopPropagation<br>e 메소드를 지원합니다. ); <br>} <br>} <br></head> <br><body><div id="parent1" onclick="alert .id)" style="width:250px; background-color:yellow"> <br><p>부모1 div입니다.</p> <br><div id="child1" onclick =" Alert(this.id)" style="width:200px;Background-color:orange"> <br><p>어린이1입니다.</p> <br></div> <br>< ;p>부모1 div입니다.</p> <br><br /><br><div id="parent2" onclick="alert(this.id) " style="width:250px;Background-color:시안;"> <br><p>부모2 div입니다.</p> <br><div id="child2" onclick=" doSomething( this,event);" style="width:200px; background-color:lightblue;"> <br><p>어린이2입니다. 버블이 발생합니다.</p> <br></div> ; <br><p>부모2 div입니다.</p> <br></div> <br></html><br><br><br>이후 코드를 직접 복사해서 child1을 클릭하면 child1 대화상자뿐만 아니라 parent1 대화상자도 뜹니다<br>
<br><br>버블이벤트입니다</div>
<br>
그러나 chile2를 클릭하면 child2만 팝업되고 parent2는 팝업되지 않습니다. 이는 버블링 이벤트를 방지하는 특수 효과를 적용한 효과입니다.<p></p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>성명：</span><div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div></div></div><div class="nphpSytBox"><span>이전 기사：<a class="dBlack" title="Weibo 게시 효과_javascript 기술을 모방하는 JS 구현 예제 코드" href="http://m.php.cn/ko/faq/14884.html">Weibo 게시 효과_javascript 기술을 모방하는 JS 구현 예제 코드</a></span><span>다음 기사：<a class="dBlack" title="Weibo 게시 효과_javascript 기술을 모방하는 JS 구현 예제 코드" href="http://m.php.cn/ko/faq/14886.html">Weibo 게시 효과_javascript 기술을 모방하는 JS 구현 예제 코드</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>관련 기사</h2><em><a href="http://m.php.cn/ko/article.html" class="bBlack"><i>더보기</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout-key="-6t+ed+2i-1n-4w"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/ko/faq/1609.html" title="Bootstrap 목록 그룹 구성 요소에 대한 심층 분석" class="aBlack">Bootstrap 목록 그룹 구성 요소에 대한 심층 분석</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/1640.html" title="JavaScript 함수 커링에 대한 자세한 설명" class="aBlack">JavaScript 함수 커링에 대한 자세한 설명</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/1949.html" title="JS 비밀번호 생성 및 강도 감지의 전체 예(데모 소스 코드 다운로드 포함)" class="aBlack">JS 비밀번호 생성 및 강도 감지의 전체 예(데모 소스 코드 다운로드 포함)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/2248.html" title="Angularjs는 WeChat UI(weui)를 통합합니다." class="aBlack">Angularjs는 WeChat UI(weui)를 통합합니다.</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/2351.html" title="JavaScript를 사용하여 중국어 번체와 중국어 간체 간을 빠르게 전환하는 방법과 중국어 간체와 중국어 번체 간 전환을 지원하는 웹사이트의 요령_javascript 기술" class="aBlack">JavaScript를 사용하여 중국어 번체와 중국어 간체 간을 빠르게 전환하는 방법과 중국어 간체와 중국어 번체 간 전환을 지원하는 웹사이트의 요령_javascript 기술</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！</p></div><div class="footermid"><a href="http://m.php.cn/ko/about/us.html">회사 소개</a><a href="http://m.php.cn/ko/about/disclaimer.html">부인 성명</a><a href="http://m.php.cn/ko/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved
</p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) {
var _times = times || -1, //100次
_interval = interval || 20, //20毫秒每次
_self = this,
_selector = this.selector, //选择器
_iIntervalID; //定时器id
if( this.length ){ //如果已经获取到了，就直接执行函数
func && func.call(this);
} else {
_iIntervalID = setInterval(function() {
if(!_times) { //是0就退出
clearInterval(_iIntervalID);
}
_times <= 0 || _times--; //如果是正数就 --
_self = $(_selector); //再次选择
if( _self.length ) { //判断是否取到
func && func.call(_self);
clearInterval(_iIntervalID);
}
}, _interval);
}
return this;
}
$("table.syntaxhighlighter").wait(function() {
$('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
$(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body></html>
