JQuery [ EventBubbling - success ]

양혜정·2024년 4월 21일
0

JQuery 실행

목록 보기
39/42

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이벤트 버블링 막기(이벤트 버블링 문제발생 해결한것)</title>
<!--
	이벤트 버블링 문제가 있어서 예상치 못한 결과가 나온다.
	이것을 막아보도록 한다.
-->

 <script type="text/javascript" src="../../js/jquery-3.7.1.min.js"></script>
 <script type="text/javascript" src="js/02.js"></script>

</head>
<body>
	<div class="d">
		div엘리먼트
		<p class="p">
			단락구분의 엘리먼트<br/>
			<span class="s">스팬태크의 엘리먼트</span>
		</p>
	</div>
</body>
</html>

JS

$(document).ready(function() {
   
    $("div").click(function(e){

        // 엘리먼트와 엘리먼트가 같은지 다른지 비교할때 is 를 사용한다.
        // 선택자1.is(선택자2) 은 선택자1과 선택자2가 동일한 엘리먼트를 가리키는 것이라면 true 이고, 
        // 선택자1.is(선택자2) 은 선택자1과 선택자2가 동일한 엘리먼트를 가리키는 것이 아니라면 false 이다.
        if($(e.target).is("span.s")){
            alert("span 엘리먼트를 클릭했습니다.");
        }
        else if($(e.target).is("p.p")){
            alert("p 엘리먼트를 클릭했습니다.");
        }
        else{
            alert("div 엘리먼트를 클릭했습니다.");
        }
    });
    
    /*
       HTML 파일의 DOM(Document Object Model)에서
       가장 상위의 엘리먼트는 div 엘리먼트이고,
       그 아래에 문단(p) 엘리먼트(<p> 는 <div>의 자식 엘리먼트 ),
       그리고 마지막에 span 엘리먼트(<span> 는 <p>의 자식 엘리먼트 )가 
       나오고 있다.
    */   
    
 }); // end of $(document).ready(function() {})-------------

정리

  • jQueryStudy -> 01_eventHandling -> chap14_eventBubbling -> 02_eventBubbling_success.html, 02.js
profile
양혜정
이전 포스트

JQuery [ EventBubbling - fail ]

다음 포스트

JQuery [ Flip card ]

0개의 댓글

관련 채용 정보