[Event] JQ - mouseenter() 메서드 ★★★ - mouseenter 이벤트발생/함수실행. (= mouseenter메서드 = 마우스엔터 메서드)

목차

1. mouseenter() 예제 - mouseenter 이벤트 때 경고창 띄우기
2. mouseenter() 정의
3. mouseenter() 구문
4. mouseenter() 예제 - cf. mouseover(), mousemove()

mouseenter() 예제 - mouseenter 이벤트 때 경고창 띄우기

 

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

<script>

$(document).ready(function(){

    $("#hz").mouseenter(function(){

        alert("Homzzang.com");

    });

});

</script>

<p id="hz">홈짱닷컴 주소 보기</p>

결과보기

mouseenter() 정의

 

mouseenter 이벤트는 마우스커서가 선택 요소로 들어갈 때 발생.

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

① mouseenter 이벤트 촉발.

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

 

---

 

1. 함수 비교.

 

mouseover() 메서드

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

 

mouseenter() 메서드

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

 

2.

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

 

mouseenter() 구문

 

mouseenter 이벤트 촉발.

$(selector).mouseenter()

 

mouseenter 이벤트에 함수 연결.

$(selector).mouseenter(function)

 

---

[매개변수]

 

function

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

 

mouseenter() 예제 - cf. mouseover(), 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 움직일 때마다 이벤트 발생.