-
e.preventDefault() , e.stopPropagation()란?JavaScript 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
반응형'JavaScript' 카테고리의 다른 글
javascript evnet?? 자바스크립트 이벤트란?? (0) 2021.09.11 javascript 자바스크립트 map, reduce, filter, find, every 응용하기 (0) 2020.10.10 innerHTML와 outerHTML 차이 (0) 2020.05.10 JSON.stringify 과 JSON.parse 차이점 (0) 2020.03.09 [Java Script] 자바스크립트 alert 내용 2줄(줄바꿈)만들기 (0) 2020.01.29