태그의 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>