마우스아웃 이벤트 ( onmouse event ) 는 웹페이지의 특정항목에서 마우스가 벗어나면 발생하는 이벤트이다. 마우스가 다가가면 발생하는 마우스오버 이벤트 ( mouseover event ) 와 함께 사용한다. 마우스가 특정 항목으로 다가가면 마우스오버 이벤트로 효과를 주고 마우스가 특정 항목에서 멀어지면 마우스아웃 이벤트로 원래의 상태로 돌아가게 한다.
자바스크립트 마우스아웃 이벤트 사용
javascript onmouseout event
마우스를 웹페이지의 특정 위치에 놓으면 그 구간의 컨텐츠가 변경된다.
내용이 확대되거나 강조되는 역할을 한다.
그 효과를 주기 위해 이전에 onmouseover 이벤트로 효과를 주는 것을 했다.
그런데 이 상태에서 마우스가 벗어나면 원래대로 돌아오지 않는다.
웹페이지는 정적이기 때문에 일일히 손을 봐줘야 한다.
원래대로 돌아오게 하기 위해 마우스아웃 onmouseout 이벤트를 설정한다.
onmouseout 이벤트
마우스아웃 이벤트는 마우스가 특정 태그에서 벗어날 때 반응한다.
그렇기에 마우스오버 이벤트와 함께 사용하는 것이 일반적이다.
마우스오버 이벤트로 마우스가 웹페이지의 특정항목에서 부분적인 강조효과를 주었다면
반대로 마우스아웃 이벤트로 마우스가 웹페이지의 특정항목에서 멀어질 때 원래대로 돌아오도록 해야 한다.
이 작업을 마우스아웃 이벤트가 처리한다.
- 마우스오버 이벤트 / onmouseover Evt
웹페이지의 특정영역에 마우스가 올로가면 이벤트 발생 - 마우스아웃 이벤트 / onmouseout Evt
웹페이지의 특정영역에 마우스가 멀어지면 이벤트 발생
사용법
모든 이벤트가 그렇듯 모든 태그와 함께 사용한다.
마우스아웃 이벤트가 발생하기 위한 곳에 onmouseout="메서드명" 을 작성해주면 된다.
보통은 마우스오버 이벤트와 함께 사용하며, 이전의 값으로 태그의 형태를 돌려주는 역할을 한다.
<tag onmouseover="메서드명" onmouseout="메서드명" />샘플코드
실제로 사용을 해본다.
마우스오버 이벤트로 특정 항목에 마우스가 다가가면 효과를 준다.
마우스아웃 이벤트로 특정 항목에 마우스가 멀어지면 원래대로 돌아오도록 하는 것을 해보도록 한다.
<!DOCTYPE html>
<html>
<body>
<h1>자바스크립트 클릭이벤트 onmouseout</h1>
<p id="txt" onmouseover="return fnEvtMusOvrTxt();" onmouseout="return fnEvtMusOutTxt();">
마우스오버 이벤트 <br/>
<span id="txtChild">하위 마우스오버 이벤트</span>
</p>
<script>
var gPreFontSize;
function fnEvtMusOvrTxt(){
gPreFontSize = window.getComputedStyle(document.getElementById("txt")).fontSize;
document.getElementById('txt').style.fontSize = "32px";
}
function fnEvtMusOutTxt(){
document.getElementById('txt').style.fontSize = gPreFontSize + "";
}
</script>
</body>
</html>이전값으로 되돌리기 위해 글자크기를 저장하는 변수를 하나 만들어 두었다.
gPreFontSize 구문이 있는 문장은 웹문서의 특정폰트의 크기를 가져오는 구문이다.
마우스가 다가가면 현재의 값을 저장하고 글자 크기를 36px로 키운다.
마우스가 멀어지면 저장된 값으로 원래대로 돌려주도록 한다.
'programming > javascript' 카테고리의 다른 글
| 자바스크립트 로드 이벤트 javascript onLoad Event (0) | 2021.11.02 |
|---|---|
| 자바스크립트 키다운 이벤트 javascript onkeydown event (0) | 2021.11.01 |
| 자바스크립트 마우스오버 이벤트 사용 javascript onmouseover event (0) | 2021.10.30 |
| 자바스크립트 체인지 이벤트 사용하기 javascript onchange event (0) | 2021.10.30 |
| 자바스크립트 마우스 클릭 이벤트 만들기 javascript mouse onclick event (0) | 2021.10.29 |
댓글