본문 바로가기
IT 개발/JavaScript

07. 제이쿼리 이벤트 (3) : 마우스 이벤트

by Love of fate 2020. 3. 15.
728x90
반응형

click() / dblclick() 이벤트 메서드

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

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

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

 

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

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

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

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

<a> 요소에 click이나 dblclick을 등록하면 클릭할 때마다 <a>에 링크된 주소로 이동하는 문제가 발생

문제를 해결하려면 <a> 요소의 기본 이벤트를 차단해야 한다. 

<form> 요소의 제출 버튼(submit)도 action에 등록된 주소로 이동시키는 문제가 발생한다.

우리가 등록한 이벤트를 정사적으로 수행하려면 이러한 기본 이벤트를 차단해야 한다.

 

<a>, <form> 태그에 이벤트를 등록하기 위해 기본 이벤트를 차단하는 기본형

return false를 이요한 차단 방식
$("a 또는 form").이벤트 메서드(function(){
	자바스크립트 코드;
    return false;
});

prevenDefault() 메서드를 이용한 차단 방식
$("a 또는 form").이벤트 메서드(function(e) {
	e.preventDefault(); // prevent는 막다를, Default는 기본 이벤트를 의미.
    자바스크립트 코드;
});

$(".btn1").on("click", function(e){
	e.preventDefault();
    $(".txt1").css({"background-color" : "#ff0"});
});

<body>
    <p>
    	<a href="http://www.easyspub.co.kr/" class="btn1">버튼1</a>
    </p>
</body>

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

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

 

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

 

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

 

<기본형>

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

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

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

hover 이벤트 등록
$("이벤트 대상 선택").hover(
	function() {마우스 오버 시 실행될 코드 },
    function() {마우스 아웃 시 실행될 코드 }
};
<예제>

<script>
$(function() {
	$(".btn1").on({
    	//mouseover / mouseout 버튼에 마우스 포인터를 올리면 class 값이 "txt1"인 요소의
        //배경색을 노란색으로 변경한다.
    	"mouseover" : function(){
        	$(".txt1").css({"background-color" : "yellow"});
        },
        //버튼에서 마우스 포인터가 벗어나면 배경의 색을 다시 제거한다.
        "mouseout" : function(){
        	$(".txt1").css({"bacground" : "none"});
        } 
    });
    
    $(".btn2").hover(function(){
    	$(".txt2").css({"background-color" : "aqua"});
    }, function() {
    	$(".txt2").css({"backgorund" : "none"});
    });
});
</script>
</head>
<body>
     <p>
    	<button class="btn1">Mouse Over/Mouse Out</button>
    </p>
    <p class="txt1">내용1</p>
    <p>
    	<button class="btn2">Hover</button>
    </p>
    <p clas="txt2">내용2</p>
</body>

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

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

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

 

* "mouseover"와 "mouseenter" 이벤트의 차이점

mouseover mouseenter
대상 요소에 마우스 포인터가 올라가면 발생 이벤트 대상이 포함된 범위에 마우스 포인터가 들어오면 발생

* "mouseout"과 "mouseleave" 이벤트의 차이점

mouseout mouseleave
대상 요소에서 마우스 포인터가 벗어나면 발생 대상이 포함된 범위에서 마우스 포인터가 완전히 벗어나면 발생 
<기본형>
※ mouseenter 이벤트 등록
$("이벤트 대상 선택").mouseenter(function(){자바스크립트 코드;});
$("이벤트 대상 선택").on("mouseenter", function(){자바스크립트 코드; });

※ mouseenter 이벤트 강제 발생
$("이벤트 대상 선택").mouseenter();


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

※ mouseleave 이벤트 강제 발생
$("이벤트 대상 선택").mouseleave();

mousemove() 이벤트 메서드

<기본형>
mousemove 이벤트 등록
$("이벤트 대상 선택").mousemove(function(){자바스크립트 코드; });
$("이벤트 대상 선택").on("mousemove", function(){자바스크립트 코드; });

mousemove 이벤트 발생
$("이벤트 대상 선택").mousemove();
※ mousemove 이벤트가 발생할 떄마다 마우스 포인터의 좌푯값을 각각 <span>에 출력하는 예제

<script>
$(function(){
	$(document).on("mousemove", function(e){
    	$(".postX").text(e.pageX);
        $(".postY").text(e.pageY);
    });
});
</script>
</head>
<body>
	<h1>mousemove</h1>
    <p>X : <span class="postX">0</span>px</p>
    <p>Y : <span class="postY">0</span>px</p>    
</body>

==> 이벤트가 발생하면 이벤트 핸들러의 매개변수에 이벤트 객체가 생성됨.

==> 생성된 이벤트 객체에는 이벤트 성격에 맞는 다양한 속성이 들어 있다.

 

728x90
반응형

'IT 개발 > JavaScript' 카테고리의 다른 글

07. 제이쿼리 이벤트 (5) : 포커스 이벤트  (0) 2020.03.16
07. 제이쿼리 이벤트 (4) : 이벤트 객체와 종류 / Scroll 이벤트 메서드  (0) 2020.03.15
07. 제이쿼리 이벤트 (1) : 이벤트 메서드 종류 및 이벤트 발생 / 제거  (0) 2020.03.08
06. 제이쿼리 문서 객체 선택자와 조작법  (0) 2020.01.14
05. 함수  (0) 2020.01.10

관련글

티스토리툴바