이번장에서는 jQuery 이벤트중 mouseenter(), mouseleave(), mousedown(), mouseup() 마우스와 관련된 이벤트에 대해서 알아보겠습니다.
----------------------------------------------------------------------------------
mouseenter()
마우스 다가왔을때 발생하는 이벤트입니다.
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
관련예제
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
});
</script>
</head>
<body>
<p id="p1">Enter this paragraph.</p>
</body>
</html>
↓
↓
↓
마우스를 아이디값 p1에 올렸을때 alert 메시지를 보여 줍니다.
----------------------------------------------------------------------------------
mouseleave()
마우스가 자리를 떠났을때 이벤트를 줄수 있는 함수 입니다.
$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});
관련예제
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});
});
</script>
</head>
<body>
<p id="p1">이곳에 마우스를 올렸다가 치워보세요.</p>
</body>
</html>
----------------------------------------------------------------------------------
mousedown()
마우스 왼쪽 버튼 클릭과 동시에 이벤트를 줄수 있는 함수입니다.
$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});
관련예제
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});
});
</script>
</head>
<body>
<p id="p1">마우스 왼쪽 버튼을 이곳에 눌러보세요!.</p>
</body>
</html>
----------------------------------------------------------------------------------
mouseup()
마우스 왼쪽버튼을 클릭하고 놓을때 이벤트를 줄수 있는 함수입니다.
$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});
관련예제
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});
});
</script>
</head>
<body>
<p id="p1">여기에 마우스를 클릭하고 놓아보세요!</p>
</body>
</html>
다음장에서는 jQuery Event 중 hover(), focus(), blur() 에 대하여 알아보겠습니다.
