<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이벤트 - 부모 자식 요소 영향 단계</title>
<script src="jquery-3.6.0.min.js"></script>
<style type="text/css">
* {
margin: 10px;
padding: 10px;
}
.inner {
background: orange;
}
.outer {
background: lightgreen;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".wrap1").mouseover(function() { // 부모요소에게 이벤트 적용시 자식에게도 적용됨
$(".result").append("<strong>마우스 오버</strong>")
})
$(".wrap2").mouseenter(function() {
$(".result").append("<em>마우스 엔터</em>")
})
});
</script>
</head>
<body>
<div class="wrap1 outer">
<div class="inner">마우스 오버</div>
</div>
<div class="wrap2 outer">
<div class="inner">마우스 엔터</div>
</div>
<div class="result"></div>
</body>
</html>
