이번장에서는 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 > jQuery Tutorial ' 카테고리의 다른 글
| jQuery Mobile 아이콘 (0) | 2013.11.07 |
|---|---|
| jQuery Events hover(), focus(), blur() (0) | 2013.05.10 |
| jQuery Events ( click(). dbclick() ) (0) | 2013.05.10 |
| jQuery Selectors (0) | 2013.05.08 |
| jQuery 기초 (0) | 2013.05.08 |
