[Event] JQ - mouseover() 메서드 - 마우스오버이벤트 (= mouseover이벤트 = mouseover메서드 마우스오버 메서드) ※ 이벤트 발생 시 실행함수 적을 때 주의사항.

목차

1. mouseover() 예제 - 마우스커서가 요소 위에 위치 시 배경색 변경
2. mouseover() 정의
3. mouseover() 구문
4. mouseover() 예제 - cf. mouseenter(), mousemove()
5. 이벤트 발생 시 실행 함수 적을 때 주의사항

mouseover() 예제 - 마우스커서가 요소 위에 위치 시 배경색 변경

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("p").mouseover(function(){

    $("p").css("background-color", "yellow");

  });

  $("p").mouseout(function(){

    $("p").css("background-color", "lightgray");

  });

});

</script>

<p>홈짱닷컴 Homzzang.com</p>

 

결과보기

mouseover() 정의

 

mouseover 이벤트는 마우스커서가 선택 요소 위에 있을 때 발생.

※ mouseover() 메서드는 2가지 작동 가능.

① mouseover 이벤트 촉발.

② mouseover 이벤트 발생 시 실행할 함수 연결.

 

---

 

1. cf.

 

mouseover() 메서드

: 마우스커서가 선택 요소 및 자식 요소에 들어가면 이벤트 발생.

 

mouseenter() 메서드

: 마우스커서가 선택 요소에 들어갈 때만 이벤트 발생.

 

2.

mouseout() 메서드와 주로 함께 사용됨.

 

mouseover() 구문

 

mouseover 이벤트 촉발.

$(selector).mouseover()

 

mouseover 이벤트에 함수 연결.

$(selector).mouseover(function)

 

---

[매개변수]

 

function

선택. mouseover 이벤트 발생 시 실행할 함수 지정.

 

mouseover() 예제 - cf. mouseenter(), mousemove()

 

<style>

div {

  width: 200px;

  height: 100px;

  border: 1px solid black;

  margin: 10px;

  float: left;

  padding: 30px;

  text-align: center;

  background-color: lightgray;

}

h3 {background-color: white; padding:20px;}

span {display;block; color:red;}

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

var x = 0;

var y = 0;

var z = 0;

$(document).ready(function(){

  $("div.over").mouseover(function(){

    $(".over span").text(x += 1);

  });

  $("div.enter").mouseenter(function(){

    $(".enter span").text(y += 1);

  });

  $("div.move").mousemove(function(){

    $(".move span").text(z += 1);

  });

});

</script>

<div class="over">

  <h3>Mouseover 횟수: <span></span></h3>

</div>

<div class="enter">

  <h3>Mouseenter 횟수: <span></span></h3>

</div>

<div class="move">

  <h3>Mousemove 횟수: <span></span></h3>

</div>

 

결과보기

---

PS.

 

mouseover 이벤트

: 마우스커서가 div, h3 각각 들어갈 때 이벤트 발생.

 

mouseenter 이벤트

: 마우스커서가 div 들어갈 때만 이벤트 발생.

 

mousemove 이벤트

: 마우스커서가 div 위에서 1px 움직일 때마다 이벤트 발생.

 

이벤트 발생 시 실행 함수 적을 때 주의사항

 

지역함수 방식으로 실행 함수 기재하면, 정상 작동 X.

※ 지역함수 : 함수(=메서드) 안에 함수를 정의하는 형태.

---

[방법1]

 

<script src="http://code.jquery.com/jquery-latest.js"></script>

<style>

.hz {width:100px; height:100px; }

.r {background: red;}

.b {background: blue; display: none;}

</style>

<div class="hz r"></div>

<div class="hz b"></div>

<button onmouseover="r()">red</button>

<button onmouseover="b()">blue</button>

<script>

//$(document).ready(function() { <-- 이 부분 있으면 작동 X

  function r(){

     $('.hz').css('display','none'); $('.r').css('display','block');

  }

  function b(){

     $('.hz').css('display','none'); $('.b').css('display','block');

  }

//}); <-- 이 부분 있으면 작동 X

</script>

결과보기

---

[방법2] 

아래처럼 전역함수 형태로 정의 후, 호출할 때만 함수 안에 넣어야 함.

 

<script src="http://code.jquery.com/jquery-latest.js"></script>

<style>

.hz {width:100px; height:100px; }

.r {background: red;}

.b {background: blue; display: none;}

</style>

<div class="hz r"></div>

<div class="hz b"></div>

<button onmouseover="r()">red</button>

<button onmouseover="b()">blue</button>

<script>

$(document).ready(function() {

  r();  //굳이 부르겠다면 이렇게

  b();

});

function r(){

    $('.hz').css('display','none'); $('.r').css('display','block');

}

function b(){

    $('.hz').css('display','none'); $('.b').css('display','block');

}

</script>

 

결과보기 

균이 님, 플래토 님 (190918) https://sir.kr/qa/323817