Jam's story

[JS] 이벤트 버블링 본문

WEB/JavaScript

[JS] 이벤트 버블링

애플쩀 2022. 6. 9. 09:27
1.[  이벤트 버블링   ] 자식=>부모       
자식요소 이벤트가 발생하면 부모요소에 그 이벤트가 전달(전파)   

2. 이벤트 캡처링 부모=>자식       
부모요소 이벤트가 발생하면 자식요소에 그 이벤트가 전달(전파)

event.cancleBubble=true; => 이벤트 버블링 취소 
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>2022.06.09 09:17:15</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
    #out{
        background-color: coral;
        padding: 50px;
    }
    #in{
        background: white;
        font-size: 20px;
        border:1px solid;
        padding:20px;
    }
</style>
</head>
<body>
<h3>ex02.html</h3>
<pre>
    1.이벤트 버블링 
    자식요소 이벤트가 발생하면 부모요소에 그 이벤트가 전달
    2.이벤트 캡쳐링
    부모요소 이벤트가 발생하면 자식요소에 그 이벤트가 전달

</pre>
<div id="out">
    <h2>이벤트버블링체크</h2>
    <p id="in">자식p태그 클릭</p>
</div>
<script>
document.getElementById("out").onclick=function(){
    alert("out div click");
}
document.getElementById("in").onclick=function(){
    alert("in p click");
    event.cancelBubble=true; //버블링 취소  
}
</script>
</body>
</html>

 

저작자표시

'WEB > JavaScript' 카테고리의 다른 글

[JS] 클로저  (0) 2022.06.09
[JS] function (함수) 정리  (0) 2022.06.09
[JS] onclick 이벤트 처리  (0) 2022.06.09
[Js] Map  (0) 2022.06.09
[JS] 스크롤 표시하기  (0) 2022.06.08
'WEB/JavaScript' Related Articles more
Comments