JavaScript 코스

태그의 on 속성

개요

HTML상에서 이벤트 발생시 실행될 코드나 함수를 바로 등록할 수 있습니다.

<input type="button" value="button" onclick="alert('Hello world')">

위는 버튼을 클릭했을 때 “Hello world” 경고창을 띄우는 코드입니다.
onclick 속성은 클릭되었을시 발생되는 이벤트를 의미합니다.

속성 안에서 this라는 변수도 사용이 가능한데, 이는 태그 자신을 나타내는 변수입니다.

예제

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

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

<body>
	<button id="my-btn" onmouseover="m_over(this)" onmouseout="m_out(this)">
        Mouse Over it!
    </button>
</body>
</html>

DOM의 on 속성

HTML 태그에서 바로 속성을 기술할 수도 있지만, QuerySelector를 통해 가져온 객체에서도 on 속성을 사용할 수 있습니다.

예제

<button id="my-btn2">Button2</button>

<script type="text/javascript">
	var myBtn2 = document.getElementById("my-btn2");
	myBtn2.onclick = function() {
		alert("hello world");
	};
</script>