Notice
Recent Posts
Recent Comments
Tags more
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Archives
Today
Total
관리 메뉴

웹개발자의 기지개

preventDefault(), stopPropagation() 본문

jquery

preventDefault(), stopPropagation()

http://portfolio.wonpaper.net 2018. 12. 13. 00:08

<!DOCTYPE html>

<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
  div#outer { border: 1px solid black; background-color: black; width: 200px; height: 200px; }
  div#inner { border: 1px solid black; background-color: lightgray; width: 100px; height: 100px; position: relative; left: 50px; top: 50px;}
 </style>
 <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
 <script>
  $(document).ready(function () {
   $("#outer").on("mouseover", function(e) {

    alert("바깥쪽 over");

   });

   $("#inner").on("mouseover", function(e) {

    alert("안쪽 over");

    e.stopPropagation();
   });   
  });
 </script>
</head>
<body>
 <div id="outer">
  <div id="inner">
   
  </div>
 </div>
</body>
</html>


[실행결과]



소스를 실행해서, 마우스를 바깥쪽 테두리, 안쪽 테두리로 마우스를 가져가 보자. 

검은색 바깥쪽 테두리 접근하면 "바깥쪽 over " 실행,  안쪽 회색 사각형에 접근하면 "안쪽 over" alert 되고 연이어 "바깥쪽 over" 도 같이 실행되는 것을 볼 수 있다.

이는 자식 태그에서 발생한 이벤트가 부모 태그로 올라가는 이벤트 버블링이 발생해서 나타나는 현상이다.


위에 소스상에서 e.stopPropagation() 은 inner 안쪽 자식태그에서 outer 바깥쪽 부모태그로 이벤트가 전파되는 것을 막아준다.

즉, inner 로 마우스 접근시에 inner 의 이벤트 내용만 작동된다.



<a href="www.naver.com">고고싱</a> 

<script>

$("a").click(function(event) {

  event.preventDefault();

  

  alert("클릭 이벤트 발생!")

});

</script>


위 소스에서 event.preventDefault() 는 a태그의 클릭이벤트 발생시에 a태그의 href 속성내 특정 주소로 이동시키는 기본 기능을 막아주는 역할을 한다. 

결국, 현재 이벤트의 기본 동작을 중지시켜주는 기능을한다.

'jquery' 카테고리의 다른 글

지시자 여러개 함께 선택할때  (0) 2018.12.23
div 태그의 z-index 와 zIndex 유의점  (0) 2018.12.14
달력 datepicker , 한글화 및 특정일 선택  (0) 2018.11.19
live 함수가 없어졌다.  (0) 2018.11.18
구글 Chart api 와 jquery mobile 연동시 오류해결방법  (0) 2018.11.18
'jquery' Related Articles more
Comments