JavaScript와 HTML의 상호 작용은 사용자 또는 브라우저가 페이지를 조작할 때 발생하는 이벤트를 통해 처리됩니다.
페이지가 로드되면 이벤트라고 합니다. 사용자가 버튼을 클릭하면 해당 클릭이 이벤트입니다. 다른 예로는 아무 키나 누르기, 창 닫기, 창 크기 조정 등과 같은 이벤트가 있습니다.
다음은 몇 가지 예입니다.
클릭 시 이벤트 유형
가장 자주 사용되는 이벤트 유형으로 사용자가 마우스 왼쪽 버튼을 클릭할 때 발생합니다. 이 이벤트 유형에 대해 유효성 검사, 경고 등을 넣을 수 있습니다.
다음 예를 시도해 보십시오.
라이브 데모
<html>
<head>
<script>
<!--
function sayHello() {
alert("Hello World")
}
//-->
</script>
</head>
<body>
<p>Click the following button and see result</p>
<form>
<input type="button" onclick="sayHello()" value="Say Hello" />
</form>
</body>
</html> 마우스오버 및 온마우스아웃
이 두 가지 이벤트 유형은 이미지나 텍스트로도 멋진 효과를 만드는 데 도움이 됩니다. onmouseover 이벤트는 요소 위로 마우스를 가져갈 때 트리거되고 onmouseout은 해당 요소에서 마우스를 이동할 때 트리거됩니다. 다음 예를 시도하십시오.
라이브 데모
<html>
<head>
<script>
<!--
function over() {
document.write ("Mouse Over");
}
function out() {
document.write ("Mouse Out");
}
//-->
</script>
</head>
<body>
<p>Bring your mouse inside the division to see the result:</p>
<div onmouseover="over()" onmouseout="out()">
<h2> This is inside the division </h2>
</div>
</body>
</html>