🔹onmouseover: 마우스가 표시 영역 위에 올리는 순간 이벤트 발생+하위 태그에도 이벤트 전파함
🔹onmouseout: 마우스가 표시 영역 위에서 벗어나는 순간 이벤트 발생+하위 태그에도 발생
🔹onmouseenter: 마우스가 표시 영역 위에 진입하는 순간 이벤트 발생 그러나! 하위 태그에 이벤트 전파? No
🔹onmouseleave: 마우스가 표시 영역에서 벗어나는 순간 이벤트 발생 그러나!하위 태그에 이벤트 전파? No
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
div{margin:50px; padding:50px;}
body>div{background-color:pink;}
body>div>div{background-color: yellow;}
h1{background-color:orange;}
p {font-size:2em;}
</style>
</head>
<body>
<!-- <div id="e" > -->
<div id="e" onmouseenter="fnt()" onmouseleave="fnt()" >
<div>
<h1>BMW, "삼성SDI Gen5 배터리 말해 뭐해"</h1>
</div>
</div>
<p></p>
<script>
var cnt = 0;
function fnt()
{
cnt++;
document.getElementsByTagName("p")[0].innerHTML = cnt;
}
</script>
</body>
</html>
풀스택eDot