[제이쿼리] 마우스 이벤트의 다양한 종류 및 사용법! +링크 이동 차단
마우스 이벤트는 여러 이벤트 중에서 사용자가 마우스를 사용했을 때 발생할 수 있는 이벤트를 뜻한다.
가장 대표적인 것으로는 버튼에 클릭을 하거나, 해당 요소 위에 마우스를 올려놓는 것들, 마우스를 떼는 것 등이 해당 될 수 있다. 마우스 이벤트는 대표적인 이벤트이기 때문에 여러 가지 종류가 있다. 오늘은 여러 마우스 이벤트 중 대표적인 것들과 어떻게 사용하면 좋을지에 대해서 알아보도록 하겠다.
1. 클릭과 더블클릭에 관한 메서드 : click() / dblclick()
https://www.programmingstory.com/2024/02/blog-post.html클릭에 관한 메서드는 위 포스팅의 이벤트 등록방식에서 알아보았으니 오늘은 더블클릭에 대해서 알아보도록 하자.
더블클릭도 클릭과 같은 형태의 코드를 띄고 있다.
더블클릭 이벤트를 등록시키기 위해서는,
$("이벤트 대상 선택").dblclick(function(){//코드;});
$("이벤트 대상 선택").on("dblclick", function(){//코드;});위의 기본 형태로 등록을 시킬 수 있다. 이러면 사용자가 해당 요소를 더블클릭했을 때 원하는 효과를 지정할 수 있다.
더블클릭 이벤트를 강제 발생시키기 위해서는 클릭과 마찬가지로
$("이벤트 대상 선택").dblclick();이렇게 코드를 쓸 수 있다.
2. 선택한 요소에 마우스를 올릴때 : mouseover() / mouseout()/ hover()
- mouseover(): 선택한 요소에 마우스 포인터를 올릴 때마다 이벤트 발생
- mouseout(): 선택한 요소에 마우스 포인터가 벗어날 때마다 이벤트 발생
- hover(): 선택한 요소에 마우스 포인터가 올라갈 때와 선택한 요소에서 벗어날 때 각각 이벤트를 발생
여기서 mouseover과 mouseout은 위의 click과 같은 방식으로 이벤트를 등록시키고 이벤트를 강제 발생시킬 수 있는데 조금 다른 메서드는 hover()메서드이다. hover는 마우스 포인터가 올라갈 때 와 벗어날 때 각각 이벤트를 발생시키기 때문에 각각에 해당하는 코드가 따로 있어야 한다.
따라서 hover 메서드의 기본형은
$("이벤트 대상").hover(
function() {//마우스 오버 시 실행 코드},
function() {//마우스 아웃 시 실행 코드}
);
위와 같이 적을 수 있다.
따라서 on method를 사용하여 mouseover와 mouseout를 각각 등록해주는 것과 hover를 사용하여 두 가지 코드를 적어주는 것은 같은 효과를 낼 수 있다는 것을 알 수 있다.
다시 말해,
$(".btn1").on({
"mouseover" : function( ) {
$(".txt1")
.css({"background-color":"aqua"});
},
"mouseout" : function( ) {
$(".txt1")
.css({"background":"none"});
}
});위의 코드와,
$(".btn1").hover(function( ) {
$(".txt1")
.css({"background-color":"aqua"});
}, function(){
$(".txt1")
.css({"background":"none"});
});
});위의 코드는 같은 것을 의미하는 것이다.
3. 비슷하지만 다른 mouseeneter()/ mouseleave() 이벤트 메서드
mouseenter는 mouseover과 비슷한 개념이지만 mouseover보다 범위가 더 넓은 것이라고 보면 된다. mouseover의 경우 대상 요소에 마우스 포인터가 올라가면 발생하는 이벤트이지만, mouseenter는 이벤트 대상이 포함된 범위에 마우스가 올라오면 발생하는 이벤트이다.
mouseleave와 mouseout의 차이점도 유사하다. mouseleave는 대상이 포함된 범위에서 마우스 포인터가 완전히 벗어나면 발생하는 것이지만 mouseout의 경우에는 위에서도 다루었듯이 대상 요소에서 마우스 포인터가 벗어나면 발생하는 것이다. 즉 mouseleave가 mouseout보다 범위가 넓다.
다시 말해, mouseenter와 mouseleave는 '범위'와 관련된 마우스 이벤트이고 mouseover와 mouseout의 경우 '해당 요소'와 관련된 마우스 이벤트라고 할 수 있다.
예를 들어,
<div id="collection">
<p>내용1</p>
<p>내용2</p>
<p>내용3</p>
</div>
와 같은 코드가 body 태그 안에 있었을 때
$("#collection2").on({"mouseleave": function(){
$("#collection2").css({"background-color":"yellow"});},
"mouseenter": function(){
$("#collection2").css({"background-color":"aqua"});
}
});위와 같이 코드를 구성하여 해당 범위 안에 마우스가 있냐 없냐에 따른 효과를 줄 수 있다.
4. 마우스의 움직임에 따른 이벤트: mousemove() 메서드
mousemove는 사용자의 마우스의 움직임에 따른 이벤트를 등록하고 싶을 때 사용하는 메서드이다.
$("이벤트 대상").mousemove(function() {//코드});
위의 기본형 또는 on method를 사용하여,
$("이벤트 대상").on("mousemove", function() {//코드;});
이런식으로 이벤트를 등록할 수 있다.
mousemove 메서드를 사용하여 마우스의 현재 x좌표와 y 좌료를 스크린에 띄우는 코드를 작성해보자.
<body>
<p>X : <span class="posX">0</span>px</p>
<p>Y : <span class="posY">0</span>px</p>
</body>우선 body 부분은 위와 같이 적어줄 수 있다. 여기서 <span></span> 태그 안에 있는 숫자를 mouse의 이벤트와 연동시켜 숫자를 바꾸어 주어야 한다.
<script>
$(function( ) {
$(document).on("mousemove", function(e) {
$(".posX").text(e.clientX);
$(".posY").text(e.clientY);
});
});
</script>그러면 위와 같이 코드를 작성할 수 있다. function 안에 들어있는 e는 매개변수로 이벤트 객체를 가리킨다. 이벤트 객체의 속성에는 여러가지가 있는데 이 예제에서는 clientX와 clientY라는 속성을 사용했다.
clientX는 마우스포인터의 X 좌표값을 반환하는 것이고,
clientY는 마우스포인터의 Y 좌표값을 반환하는 속성이다.
따라서 해당 좌표값을 .text로 사용하여 해당 요소에 넘겨줌으로써 사용자의 마우스 이벤트와 연동되어 좌표값이 달라져 웹페이지에 나오게 된다.
5. 클릭 시 <a> 태그에 링크된 주소로 이동하는 문제점 해결하기
마지막으로 <a> 요소의 특수성 때문에 click 이벤트를 등록하게 되면 우리가 의도한 효과가 아닌데도 <a>링크 주소로 넘어가는 문제가 발생한다. 그러기 위해서는 이러한 이벤트를 차단하는 기본형 코드 한 줄을 추가해주면 된다.
물론 만약 버튼을 눌렀을 때 홈페이지 주소로 넘어가는 것을 의도한 것이라면 그냥 두어도 된다.
만약 아니라면
$(".btn1").on("click", function(e){
e.preventDefault( );
});이런식으로 function에 e 매개변수를 넘겨주고 e.preventDefault()를 추가해주면 된다.
저 자체로는 의미가 없어보이지만, 예를 들어,
$(".btn1").on("click", function(e){
e.preventDefault( );
$(".txt1")
.css({"background-color":"yellow"});
});이런식으로 해당 버튼을 클릭했을 때 링크로 이동하지 않고 다른 text의 배경색만 바꾸어주고 싶다라고 할 때 알아두면 좋을 기능이다.