[제이쿼리]- 마우스 이벤트

mouseover() / mouseout() / hover()

- mouseover() : 선택한 요소 위에 마우스 커서가 올라가면 이벤트가 발생.
- mouseout() : 선택한 요소에서 마우스 커서가 벗어나면 이벤트가 발생.
- hover() : 선택한 요소에서 마우스가 올라갔을 때와 벗어났을 때 각각 이벤트 발생시킬 수 있다. 

[기본형]
* mouseout()과 mouseover()는 기본형이 동일

- 단독 이벤트
$('요소선택').mouseover(function(){ 코드 ...})

- 그룹 이벤트
$('요소선택').on('mouseover', function(){ 코드 ..})

- 강제 이벤트
$('요소 선택').mouseover()

           

 [ hover 기본형 ] 
hover는 단독 이벤트만 존재한다. 

 $('요소선택').hover(
    function(){ 마우스오버하면 실행될 코드 },
    function(){ 마우스아웃하면 실행될 코드 }
)

            

 //mouseover / mouseout 를 그룹 이벤트

        $(".btn1").on({

          mouseover: function () {

            $(".txt1").css("color", "red");

          },

          mouseout: function () {

            $(".txt1").css("color", "#000");

          },

        });

 

---

 //hover 단독 이벤트

        $(".btn2").hover(

          function () {

            $(".txt2").text("내용이 바뀌었습니다.");

          },

          function () {

            $(".txt2").text("내용2");

          }

        );

 

<div>

      <button class="btn1">mouseover / mouseout</button>

    </div>

    <p class="txt1">내용1</p>

    <div>

      <button class="btn2">hover</button>

    </div>

    <p class="txt2">내용2</p>

---

 mouseenter() / mouseleave()

- mouseenter() : 대상 요소의 경계 범위에서 마우스 포인터가 들어오면 이벤트를 실행
- mouseleave() : 대상 요소의 경계 범위에서 마우스 포인터가 벗어나면 이벤트를 실행

 mouseover() / mouseout()과의 차이점은 대상 요소 위에 마우스가 올라가느냐 아니면,
경계 범위에서 이벤트가 실행되느냐의 차이이다. 
마우스오버,아웃은 대상위에 딱 올라가야 실행하는데 마우스엔터,리브는 대상의 부모박스까지가 범위

 

[기본형]
* mouseenter() / mouseleave()는 기본형이 동일

- 단독 이벤트
$('요소선택').mouseenter(function(){ 코드 ...})

- 그룹 이벤트
$('요소선택').on('mouseenter', function(){ 코드 ..})

- 강제 이벤트
$('요소 선택').mouseenter()

 

   // 마우스아웃과 마우스리브 비교

        $("#box_1").on("mouseout", function () {

          $("#box_1").css("background-color", "gold");

        });

        $("#box_2").on("mouseleave", function () {

          $("#box_2").css("background-color", "skyblue");

        });

 

마우스아웃은 글자영역에서 벗어나기만 하면 바로 이벤트가 실행된다. 범위가 더 적다

마우스리브는 조금 더 영역을 넓게 잡아서 내용글자를 감싸고 있는 박스에서 벗어나면 이벤트가 실행된다. 

범위가 더 크다. 

<h2>mouseout()</h2>

    <div id="box_1">

      <p><a href="#">내용1</a></p>

      <p><a href="#">내용2</a></p>

      <p><a href="#">내용3</a></p>

    </div>

    <h2>mouseleave()</h2>

    <div id="box_2">

      <p><a href="#">내용4</a></p>

      <p><a href="#">내용5</a></p>

      <p><a href="#">내용6</a></p>

    </div>

---

 mousemove() 

마우스가 움직일 때마다 이벤트가 발생한다. 

 

[기본형]

- 단독 이벤트
$('요소선택').mousemove(function(){ 코드 ...})

- 그룹 이벤트
$('요소선택').on('mousemove', function(){ 코드 ..})

- 강제 이벤트
$('요소 선택').mousemove()

---

좌표값을 span으로 묶어서 거기다가 실시간으로 마우스 커서 위치값을 가져와보기

마우스 커서의 위치값을 실시간으로 알려준다. 

 $(document).on("mousemove", function (e) {

          $(".posX").text(e.pageX);

          $(".posY").text(e.pageY);

        });

<h1>mousemove</h1>

    <p>X축 좌표 : <span class="posX">0</span></p>

    <p>Y축 좌표 : <span class="posY">0</span></p>