마우스 리스너

마우스 관련 이벤트 발생

"> 09-05_mouse

마우스 리스너

마우스 관련 이벤트 발생

"> 09-05_mouse

마우스 리스너

마우스 관련 이벤트 발생

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>09-05_mouse</title>
<script type="text/javascript">
	
</script>
<style type="text/css">
p {
	font-size: 24px;
}
span {
	border: 1px solid silver;
	display: inline-block;
}
</style>
</head>
<body>
	<h1>마우스 리스너</h1>
	<div>
		<p>마우스 관련
			<span onmousedown="down(this)"
				  onmouseup="up(this)"
				  onmouseover="over(this)"
				  onmouseout="out(this)" >이벤트 </span> 발생
		</p>
	</div>
	<!-- javascript -->
	<script type="text/javascript">
		function down(obj){
			obj.style.fontStyle='italic';
			obj.style.fontWeight='bold';
		}
		function up(obj){
			obj.style.fontStyle='normal';
			obj.style.fontWeight='normal';
		}
		function over(obj){
			obj.style.borderColor="gold";
		}
		function out(obj){
			obj.style.borderColor="silver";
			}
	</script>
</body>
</html>