먼저 JS 이벤트 모델을 살펴보겠습니다. JS 이벤트 모델은 상향 버블링입니다. 예를 들어 특정 DOM 요소에서 onclick 이벤트가 트리거된 후 해당 이벤트는 클릭 이벤트가 발생할 때까지 노드를 따라 위쪽으로 전파됩니다. 특정 상위 노드에 바인딩되어 있지 않으면 문서의 루트로 이동합니다.
버블링 방지: 1. IE가 아닌 브라우저의 경우 stopPropagation(). 2. IE 브라우저의 경우 cancelBubble 속성이 true입니다.
Jquery에는 이미 브라우저 호환 메서드인 event.stopImmediatePropagation()이 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/jquery-1.4.4.min.js" ></script>
<title></title>
</head>
<style type="text/css">
body
{
background-color:#999999;
}
#myDiv
{
background-color:#FFFFFF;
width:250px;
height:250px;
display:none;
}
</style>
<body>
<input id="btn" type="button" value="显示DIV" />
<div id="myDiv">
This is a div;
</div>
</body>
<script type="text/javascript">
var myDiv = $("#myDiv");
$(function ()
{
$("#btn").click(function (event)
{
showDiv();//调用显示DIV方法
$(document).one("click", function ()
{//对document绑定一个影藏Div方法
$(myDiv).hide();
});
event.stopPropagation();//阻止事件向上冒泡
});
$(myDiv).click(function (event)
{
event.stopPropagation();//阻止事件向上冒泡
});
});
function showDiv()
{
$(myDiv).fadeIn();
}
</script>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
