[javascript] 자바스크립트 onmouseover 이벤트
참고: https://www.scaler.com/topics/javascript-mouseover/
자바스크립트의 onmouseover 이벤트는 마우스 커서가 HTML 요소 위로 이동하면 활성화됩니다. onmouseover 이벤트는 사용자가 요소를 클릭하거나 커서가 요소를 벗어나면 활성화되지 않습니다. 예를 들어 onmouseover 이벤트는 사용자가 링크 위로 마우스를 가져갈 때마다 하이퍼링크를 강조 표시하는 데 사용할 수 있습니다.
자바스크립트 onmouseover 이벤트 문법
onmouseover 이벤트의 문법은 세 가지 종류가 있습니다:
1. HTML 에서
<html>
<element onmouseover="function_name()">
</html>
<script>
function function_name() {
// 사용자 정의 스크립트
}
</script>HTML에서 onmouseover 이벤트를 정의하려면 요소의 속성에 [onmouseover="function_name"] 구문을 추가하면 됩니다. function_name 함수의 메인 코드는 script 요소에서 정의합니다.
2. 자바스크립트에서
object.onmouseover = function_name() { function_script };위의 구문은 자바스크립트만을 사용하여 HTML 요소에 onmouseover 이벤트를 정의하고자 할 때 유용합니다.
3. 자바스크립트의 addEventListener() 메소드 사용
object.addEventListener("mouseover", function_name);자바스크립트의 addEventListener() 메소드는 두 개의 매개변수를 받습니다. 첫 번째 매개변수는 onmouseover 이벤트를 정의하하는 "mouseover" 키워드입니다. 두 번째 매개변수는 이벤트가 발생했을 때 실행할 함수 이름입니다.
addEventListener() 메소드를 사용할 때 입력 값으로 onmouseover가 아닌 mouseover 키워드를 사용하는 점을 주의해야합니다.
이렇게 하면 onmouseover 이벤트가 발생하면 functioin_name이 실행됩니다.
자바스크립트 onmouseover 이벤트의 매개변수
onmouseover 이벤트는 이벤트가 발생했을 때 실행할 함수만을 매개변수로 받습니다.
onmouseover 이벤트를 가지고 있는 요소 위로 마우스를 가져갈 때마다 스크립트에 정의된 함수가 실행됩니다. onmouseover 이벤트의 매개변수로 지정한 함수 이름은 onmouseover 이벤트가 활성화될 때마다 실행됩니다.
자바스크립트 onmouseover 이벤트의 리턴 값
onmouseover 이벤트는 아무 것도 리턴하지 않습니다.
onmouseover 이벤트가 작동하는지 확인하려면 HTML 요소 위로 마우스를 가져갈 때마다 정의한 function_name 함수가 실행되는지 확인하면 됩니다.
자바스크립트 onmouseover 이벤트의 예외
onmouseover 이벤트는 다음의 상황에서는 작동하지 않습니다.
1. 다음의 HTML 요소에서는 onmouseover 이벤트가 작동하지 않습니다.
- <html>
- <script>
- <style>
- <title>
- <head>
- <meta>
- <br>
- <iframe>
- <base>
- <bdo>
- <param>
2. HTML 구문을 작성할 때 함수 이름을 넣은 후 괄호를 주가하지 않으면 해당 함수가 실행되지 않습니다.
<!-- wrong -->
<element onmouseover="function_name">
<!-- correct -->
<element onmouseover="function_name()">3. onmouseover 이벤트에 등록한 함수가 자바스크립트 코드에 선언되지 않았다면 이벤트는 작동하지 않습니다.
자바스크립트 onmouseover 이벤트 작동 방법
onmouseover 이벤트는 마우스 포인터가 요소 위에 올라올 때 트리거됩니다. 이 이벤트는 이런 일이 발생할 때마다 매개변수로 지정한 함수를 호출합니다. 개발자는 웹 페이지의 요구 사항에 따라 이 기능을 정의할 수 있습니다.
마우스 포인터가 요소 위에 있으면 onmouseover 이벤트가 활성화됩니다. 그러나 마우스 포인터가 해당 요소 밖으로 이동하면 onmouseover 이벤트가 작동하지 않습니다. 이것이 onmouseover 이벤트가 onmouseout 이벤트와 함께 사용되는 이유입니다. onmouseout 이벤트는 onmouseover 이벤트와 매우 유사하지만 유일한 차이점은 마우스 포인터가 요소를 벗어날 때 onmouseout이 트리거된다는 점입니다.
예를 들어 onmouseover 이벤트를 사용하여 하이퍼링크 텍스트 요소를 강조 표시하는 경우 마우스를 텍스트 요소 위로 가져가면 텍스트가 강조 표시됩니다. 그러나 마우스 포인터가 텍스트 요소를 벗어나면 텍스트 색상이 원래 색상으로 변경되지 않습니다. 왜냐하면 이 요소에 onmouseout 이벤트를 정의하지 않았기 때문입니다.
예제 1: alert 메시지 띄우기
<html>
<head>
<script>
function func() {
alert("onmouseover alert.");
}
</script>
</head>
<body>
<b onmouseover="func()">
Bring the cursor here to get an alert.
</b>
</body>
</html>위의 예제를 실행하여 텍스트 위에 마우스 포인터를 올리면 경고창이 뜨는 것을 확인할 수 있습니다.
이 예제에서는 <b onmouseover="func()">를 사용하여 onmouseover 이벤트를 정의했습니다. func() 함수에는 alert 메시지를 출력하는 코드가 들어있습니다. 이에 따라 사용자가 <b></b> 태그 안의 텍스트에 마우스를 가져갈 때마다 func()가 호출되고 경고 메시지가 표시됩니다.
예제 2: 요소 속성 변경
아래 코드는 <p> 요소에 마우스를 올리면 색상과 내용이 바뀌는 예제입니다.
<html>
<script>
function func() {
document.getElementById("para1").style.color = "red";
document.getElementById("para1").innerHTML = "I am red in color";
}
</script>
<body>
<h3> Hover over the text below to change the color and text. </h3>
<p id="para1" onmouseover="func()"> I am black in color </p>
</body>
</html>위의 예제를 실행하면 다음과 같은 화면을 볼 수 있습니다.
텍스트 위에 커서를 가져가면 다음과 같이 색상과 내용이 변경됩니다.
위의 예제에서는 onmouseover 이벤트를 생성했습니다. 일단 이벤트가 활성화되면 이 이벤트는 func() 함수를 호출합니다. 스크립트에는 func()에 id가 para1인 요소의 색상을 변경한 다음 이 요소 안에 쓰여진 텍스트도 변경했습니다.
예제 3: 텍스트 업데이트
이 예제는 onmouseover 이벤트가 실행된 횟수를 카운팅하여 표시하는 웹 페이지입니다. 처음에 카운터는 숫자 0을 표시합니다. 이 숫자의 값은 사용자가 onmouseover 이벤트를 실행할 때마다 증가합니다.
<html>
<body>
<div>
<strong> Hover over the number below to update the counter. </strong>
<p>
The onmouseover event was triggered
<span id="updater" style="color:blue;">
0
</span>
times.
</p>
</div>
<script>
var counter = 0;
document.getElementById("updater").addEventListener("mouseover", triggerCounter);
function triggerCounter() {
counter += 1;
document.getElementById("updater").innerHTML = counter;
}
</script>
</body>
</html>위의 코드를 실행하면 처음에는 다음과 같은 화면이 나타납니다.
텍스트 위에 마우스를 다섯 번 올렸다 내렸다 하면 다음과 같은 결과를 볼 수 있습니다.
위의 코드에서는 id가 updater인 span 요소를 만들었습니다. 처음에는 "0"이라는 텍스트가 그 안에 쓰여있었습니다. addEventListener를 사용하여 이 span 요소에 onmouseover 이벤트를 추가했습니다. 자바스크립트에서는 실행된 이벤트 수를 기억하기 위해 전역 변수 카운터(0으로 초기화됨)를 만들었습니다. 이벤트가 실행되면 triggerCounter() 함수가 실행됩니다. triggerCounter() 함수는 counter의 값을 1씩 증가시키도록 정의되었습니다. 그런 다음 span 내부의 값을 업데이트된 카운터로 교체했습니다.
정리
- onmouseover 이벤트는 마우스 커서가 HTML 요소를 가리키면 활성화됩니다.
- onmouseover 이벤트가 활성화될 때마다 연결된 함수가 실행됩니다. 개발자는 필요에 따라 이 기능을 정의할 수 있습니다.
- onmouseover 이벤트는 일부 요소를 제외한 대부분의 HTML 요소에서 작동합니다.