[JS + jquery] 제이쿼리 마우스 이벤트 메서드 ( click(), dblclick(), mouseover(), mouseout(), hover(), mouseenter(), mouseleave(), mousemove())

1. 마우스 이벤트 

마우스 이벤트는 사용자가 사이트에서 마우스를 이용해서 취하는 모든 행위를 말한다. 

 

1️⃣ click()/ dbclick() 메서드 

click() 이벤트 메서드는 선택한 요소를 클릭했을 때 이벤트를 발생시키거나 선택한 요소에 강제로 클릭 이벤트를 발생시킬 때 사용한다. 

$("이벤트 대상 선택").click(function() { 자바스크립트 코드;});

$("이벤트 대상 선택").on("click", function() {자바스크립트 코드;});

 

$("이벤트 대상 선택").click(); -> click 이벤트 강제 발생 

 

dblclick() 이벤트 메서드는 선택한 요소를 연속해서 두번 클릭했을 때 이벤트를 발생시키거나 선택한 요소에 강제로 더블 클릭 이벤트를 발생시킬 때 사용한다.

 

$("이벤트 대상 선택").dblclick(function() { 자바스크립트 코드;});

$("이벤트 대상 선택").on("dblclick", function() {자바스크립트 코드;});

 

$("이벤트 대상 선택").dblclick();

 

 

* <a>, <form> 태그에 클릭 이벤트 적용시 기본 이벤트 차단하기 

<a> 요소에 click이나 dbclick을 등록하면 클릭할 때 마다 <a>에 링크된 주소로 이동하는 문제가 발생하는데 이 문제를 해결하기 위해서는 <a>요소의 기본 이벤트를 차단해야 한다.

<form> 요소의 제출 버튼 submit도 action 에 등록된 주소로 이동시키는 문제가 있는데 등록한 이벤트를 정상적으로 실행시키기 위해서는 기본 이벤트를 차단해야한다. 

e.preventDefault() 해주면 기본 이벤트를 차단할 수 있다. 

버튼2를 클릭하면 background-color가 바뀌면서 a주소에 등록된 url로 이동한다. 

 

2️⃣ mouseover() / mouseout() / hover() 이벤트 메서드 

mouseover() 이벤트 메서드는 선택한 요소에 마우스 포인터를 올릴 때 마다 이벤트를 발생시키거나 선택한 요소에 mouseover 이벤트를 강제로 발생시킨다. 

$("이벤트 대상 선택").mouseover(function() {자바스크립트 코드;});

$("이벤트 대상 선택").on("mouseover", function() {자바스크립트 코드;});

 

$("이벤트 대상 선택").mouseover(); -> 이벤트 강제 발생 

 

mouseout() 이벤트 메서드는 선택한 요소에 마우스 포인터가 벗어날 때 마다 이벤트를 발생시키거나 선택한 요소에 mouseout 이벤트를 강제로 발생시킨다.

$("이벤트 대상 선택").mouseout(function() {자바스크립트 코드;});

$("이벤트 대상 선택").on("mouseout", function() {자바스크립트 코드;});

 

$("이벤트 대상 선택").mouseout(); -> 이벤트 강제 발생 

 

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

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

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

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

);

 

3️⃣ mouseenter()/ mouseleave() 이벤트 메서드 

 mouseenter() 이벤트 메서드는 대상 요소의 경계 범위에 마우스 포인터가 들어오면 이벤트를 발생시키고,

mouseleave() 이벤트 메서드는 대상 요소의 경계 범위에서 마우스 포인터가 완전히 벗어나면 이벤트를 발생시킨다. 

 

❗❗❗

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

 

mouseout은 대상 요소에서 마우스 포인터가 벗어나면 발생하는 이벤트이고, mouseleave는 이벤트 대상이 포함된 범위에서 마우스 포인터가 완전히 벗어나면 발생하는 이벤트이다. 

 

$("이벤트 대상 선택").mouseenter(function() {자바스크립트 코드;});

$("이벤트 대상 선택").on("mouseenter", function() {자바스크립트 코드;});

 

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

 

 

$("이벤트 대상 선택").mouseleave(function() {자바스크립트 코드;});

$("이벤트 대상 선택").on("mouseleave", function() {자바스크립트 코드;});

 

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

 

4️⃣ mousemove() 이벤트 메서드 

$("이벤트 대상 선택").mousemove(function() {자바스크립트 코드;});

$("이벤트 대상 선택").on("mousemove", function() {자바스크립트 코드;});

 

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

 

- mousemove 이벤트가 발생할 때마다 마우스 포인터의 좌표값을 각각 출력하는 예제