JavaScript
e.preventDefault() , e.stopPropagation()란?
dev.mk
2020. 8. 14. 11:29
반응형
<body>
<!-- e.preventDefault() -->
<h1>
<a href="http://www.naver.com">이동</a>
</h1>
<!-- e.stopPropagation() -->
<div class="first">
<ul class="second">
<li class="third">
<div class="last">evnet</div>
</li>
</ul>
</div>
</body>html
<script>
$(document).ready(function(){
//원래 a태그를 클릭시 href 링크로 이동하지만
//e.preventDefault()로 인해 href 이벤트를 중단하고
//alert();을 실행한다.
$('a').click(function(e){
e.preventDefault(); //고유동작을 중단.
alert("alert");
});
//event 글자를 클릭하면 감싸져있는 엘리먼트들의 모든 클릭이벤트가 적용되지만
//e.stopPropagation()로 인해 상위 엘리먼트들의 이벤트가 중단된다.
$('.first').click(function(e){
alert('first');
});
$('.second').click(function(){
alert('second');
});
$('.third').click(function(){
alert('third');
});
$('.last').click(function(e){
e.stopPropagation(); //상위 엘리먼트들의 이벤트 전파 중단
alert('last');
});
});
</script>script
반응형