태그 on~ 속성

개요

HTML 태그에는 onclick 속성 뿐만 아니라 onmouseover 등 다양한 속성이 존재한다.

이들은 각각 클릭 됬을때, 마우스가 객체 위에 올라 왔을 때 속성값에 있는 JavaScript를 실행 시켜 준다.

또한, 이처럼 태그등에 특정한 일이 있어 났을 때의 상황을 이벤트라 한다.

이때, 실행할 함수의 인자에 this 를 넣으면 본인 자신을 인자로 전달하게 된다.

사용법

<button onmouseover="mover()" onmouseout="mout(this)">Section</button>

예제

<html>
<head>
	<script type="text/javascript">
		function mover(target) {
			target.style.backgroundColor="red";
		}

		function mout(target) {
			target.style.backgroundColor="blue";
		}
	</script>
</head>

<body>
	<button id="my-btn" onmouseover="mover(this)" onmouseout="mout(this)">Mouse Over it.!</button>
</body>
</html>
출력 결과: