사용자가 마우스를 클릭하거나, 이미지를 로드하거나, HTML 요소를 클릭하거나, HTML 양식을 제출하는 등의 이벤트 발생 시 JavaScript를 실행할 수 있습니다. 이벤트는 DOM(Document Object Model) 레벨 3의 일부이며 모든 HTML 요소에는 JavaScript 코드를 트리거할 수 있는 일련의 이벤트가 포함되어 있습니다.
예시
이벤트 핸들러에서 함수를 호출하여 텍스트를 변경할 수 있는 예를 살펴보겠습니다.
라이브 데모
<!DOCTYPE html>
<html>
<body>
<p onclick="myEvent(this)">Click me</p>
<script>
function myEvent(id) {
id.innerHTML = "Welcome!";
}
</script>
</body>
</html> 여기에서 이벤트와 자바스크립트 간의 관계를 이해하기 위한 몇 가지 예를 볼 수 있습니다.
onclick 이벤트 유형
가장 자주 사용되는 이벤트 유형으로 사용자가 마우스 왼쪽 버튼을 클릭할 때 발생합니다. 이 이벤트 유형에 대해 유효성 검사, 경고 등을 넣을 수 있습니다.
예
다음 예를 시도해 보십시오.
실시간 데모
<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
이 두 가지 이벤트 유형은 이미지나 텍스트로도 멋진 효과를 만드는 데 도움이 됩니다. 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>