JQuery [ EventBubbling - fail ]

양혜정·2024년 4월 21일
0

JQuery 실행

목록 보기
38/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/01.js"></script>

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

JS

$(document).ready(function() {
   
    $("div").click(function(){
       alert("div 엘리먼트를 클릭했습니다.");
    });
    
    $("p").click(function(){
       alert("p 엘리먼트를 클릭했습니다.");
    });
    
    $("span").click(function(){
       alert("span 엘리먼트를 클릭했습니다.");
    });
    
    /*
       HTML 파일의 DOM(Document Object Model)에서
       가장 상위의 엘리먼트는 div 엘리먼트이고,
       그 아래에 문단(p) 엘리먼트(<p> 는 <div>의 자식 엘리먼트 ),
       그리고 마지막에 span 엘리먼트(<span> 는 <p>의 자식 엘리먼트 )가 
       나오고 있다.
    */   
    
 }); // end of $(document).ready(function() {})-------------

정리

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

JQuery [ keydown, keyup ]

다음 포스트

JQuery [ EventBubbling - success ]

0개의 댓글

관련 채용 정보