제이쿼리 -마우스 이벤트들

-mouseover() /mouseout()/hover()이벤트 메서드

mouseover ->선택한 요소에 마우스 포인터를 올릴 때 마다 이벤트 발생 OR 선택한 요소에 mouseover에벤트 강제 발생

mouseout -> 선택한 요소에서 마우스 포인터가 벗어날 때마다 이벤트를 발생 OR 선택한 요소에 mouseout이벤트 강제 발생

hover ->선택한 요소에 마우스 포인터가 올라갈때와 선택한 요소에서 벗어날 때 각각 이벤트 발생( 이때, 각각 다른 이벤트 핸들러를 실행 시킴)

  

기본형 : 1.mouseover 이벤트 등록

$(“이벤트 대상 선택”).mouseover(function() {자바스큽코드; });

$(“이벤트 대상 선택”).on(“mouseover”,function() {자바스큽코드;});

2.mouseover 이벤트 강제 발생

$(“이벤트 대상 선택”).mouseover();

 

기본형 : 1.mouseout 이벤트 등록

$(“이벤트 대상 선택”).mouseout(function() {자바스큽코드;});

$(“이벤트 대상 선택”).on(“mouseout”,function(){자바스큽코드;});

2.mouseout 이벤트 강제 발생

$(“이벤트 대상 선택”).mouseout();

 

기본형 :1.hover 이벤트 등록

$(“이벤트 대상 선택”).hover (

function() {마우스 오버 시 실행될 코드},

function() {마우스 아웃 시 실행될 코드} 

) ;

-mouseenter() /mouseleave() 이벤트 메서드

mouseenter()->대상 요소의 경계 범위에 마우스 포인터가 들어오면 이번트를 발생

mouseleave()->대상 요소의 경계 범위에서 마우스 포인터가 완전히 벗어나면 이벤트 발생

 

%mouseover와 mouseenter의 차이점 　? ? ?

->mouseover->대상 요소에 마우스 포인터가 올라가면 발생하는 이벤트지만, mouseenter는 대상이 포함된 범위에 마우스 포인터가 들어오면 발생하는 이벤트이다.

mouseout,mouseover 메서드는 범위를 기준으로 하지 않고 요소에 정확하게 마우스 포인터가 “올라왔는지(벗어났는지)를 기준으로 이벤트를 발생시킵니다.

기본형 : 1.mouseenter 이벤트 등록

$(“이벤트 대상 선택”).mouseenter(function() {자바스큽코드;});

$(“이벤트 대상 선택”).on(“mouseenter”,function() {자바스큽코드;});

2.mouseenter 강제 발생

$(“이벤트 대상 선택”).mouseenter();

 

기본형 : 1.mouseleave 이벤트 등록

$(“이벤트 대상 선택”).mouseleave(function() {자바스큽코드;});

$(“이벤트 대상 선택”).on(“mouseleave”,function() {자바스큽코드;});

2.mouseleave 이벤트 강제 발생

$(“이벤트 대상 선택”).mouseleave();

 

-mousemove() 메서드

기본형 : 1.mousemove 이벤트 등록

1.$(“이벤트 대상 선택”).mousemove(function() {자바스큽코드; });

$(“이벤트 대상 선택”).on(“mousemove”,function() {

자바스큽 코드});

 

2.mousemove이벤트 발생

 $(“이벤트 대상 선택”).mousemove();