반응형
태그 on~ 속성
HTML 태그에는 onclick 속성 뿐만 아니라 onmouseover 등 다양한 속성이 존재한다.
이들은 각각 클릭 됬을때, 마우스가 객체 위에 올라 왔을 때 속성값에 있는 JavaScript를 실행 시켜 준다.
또한, 이처럼 태그등에 특정한 일이 있어 났을 때의 상황을 이벤트라 한다.
이때, 실행할 함수의 인자에 this 를 넣으면 본인 자신을 인자로 전달하게 된다.
사용법
<button onmouseover="mover()" onmouseout="mout(this)">Section</button>
ex)
<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>태그 onclick 속성
HTML태그에는 onclick 속성이 있는데 이 속성 안에는 JavaScript 문법을 쓸 수 있다.
이 속성은 이 태그 안의 문법은 태그를 클릭 했을 때 실행된다.
사용법
<button onclick="myFunc()">BUTTON</button>ex)
<head>
<script type="text/javascript">
function btnClick() {
alert("Button Click");
}
</script>
</head>
<body>
<div onclick="btnClick">Click</div>
</body>반응형