JavaScript Tutorial/jQuery/Event Mouse
Содержание
- 1 30. Cascaded Mouse leave event
- 2 30. Mouse down event
- 3 30. mousedown(fn) event fires when the pointing device button is pressed over an element.
- 4 30. Mouse enter
- 5 30. Mouse enter event
- 6 header 1
- 7 header 1
- 7.1 30. mouseleave event triggering
- 7.2 30. mousemove(fn) event fires when mouse is moved
- 7.3 30. Mouse out event
- 7.4 30. mouseout(fn) event fires when mouse is moved away from an element.
- 7.5 30. Mouse over action
- 7.6 30. Mouse over event
- 7.7 30. mouseover event triggering
- 7.8 30. Mouse up event
- 7.9 30. Show texts when mouseup and mousedown event triggering.
- 7.10 30. Show the mouse coordinates when the mouse is moved over the yellow div. Coordinates are relative to the window which in this case is the iframe.
30. Cascaded Mouse leave event
<source lang="javascript">
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").mouseover(function(){
$(this).append("mouseover.");
}).mouseleave(function(){
$(this).append("mouseleave");
});
}); </script> </head> <body> <body>
adsf
</body>
</html></source>
30. Mouse down event
<source lang="javascript">
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").mouseup(function(){
$(this).append("Mouse up.");
}).mousedown(function(){
$(this).append("Mouse down.");
});
}); </script> </head> <body> <body>
adsf
</body>
</html></source>
30. mousedown(fn) event fires when the pointing device button is pressed over an element.
<source lang="javascript">
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").mouseup(function(){
$(this).append("Mouse up.");
}).mousedown(function(){
$(this).append("Mouse down.");
});
}); </script>
<style>
div.dbl { background:yellow;color:black; }
</style>
</head> <body> <body>
Press mouse and release here.
</body>
</html></source>
30. Mouse enter
<source lang="javascript">
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").mouseover(function(){
$(this).append("mouseover.");
}).mouseenter(function(){
$(this).append("mouseenter");
});
}); </script> </head> <body> <body>
adsf
</body>
</html></source>
30. Mouse enter event
<source lang="javascript">
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("h1").bind("mouseenter mouseleave", function(e){
var str = "( " + e.pageX + ", " + e.pageY + " )";
$("h1").text("Click happened! " + str);
});
}); </script>
</head> <body> <body>
header 1
</body>
</html></source>
30. mouseenter event triggering
<source lang="javascript">
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").mouseenter(function(e){
var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";
var clientCoords = "( " + e.clientX + ", " + e.clientY + " )";
$("span:first").text("( e.pageX, e.pageY ) - " + pageCoords);
$("span:last").text("( e.clientX, e.clientY ) - " + clientCoords);
});
}); </script> </head> <body> <body>
Move the mouse over the div.
asdf
</body>
</html></source>
30. Mouse leave event
<source lang="javascript">
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("h1").bind("mouseenter mouseleave", function(e){
var str = "( " + e.pageX + ", " + e.pageY + " )";
$("h1").text("Click happened! " + str);
});
}); </script>
</head> <body> <body>
header 1
</body>
</html></source>
30. mouseleave event triggering
<source lang="javascript">
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").mouseleave(function(e){
var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";
var clientCoords = "( " + e.clientX + ", " + e.clientY + " )";
$("span:first").text("( e.pageX, e.pageY ) - " + pageCoords);
$("span:last").text("( e.clientX, e.clientY ) - " + clientCoords);
});
}); </script> </head> <body> <body>
Move the mouse over the div.
asdf
</body>
</html></source>
30. mousemove(fn) event fires when mouse is moved
<source lang="javascript">
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").mousemove(function(e){
var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";
var clientCoords = "( " + e.clientX + ", " + e.clientY + " )";
$("span:first").text("( e.pageX, e.pageY ) - " + pageCoords);
$("span:last").text("( e.clientX, e.clientY ) - " + clientCoords);
});
}); </script> </head> <body> <body>
Move the mouse over the div.
asdf
</body>
</html></source>
30. Mouse out event
<source lang="javascript">
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").mouseover(function(){
$(this).append("mouseover.");
}).mouseout(function(){
$(this).append("mouseout");
});
}); </script> </head> <body> <body>
adsf
</body>
</html></source>
30. mouseout(fn) event fires when mouse is moved away from an element.
<source lang="javascript">
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").mouseout(function(e){
var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";
var clientCoords = "( " + e.clientX + ", " + e.clientY + " )";
$("span:first").text("( e.pageX, e.pageY ) - " + pageCoords);
$("span:last").text("( e.clientX, e.clientY ) - " + clientCoords);
});
}); </script> </head> <body> <body>
Move the mouse over the div.
asdf
</body>
</html></source>
30. Mouse over action
<source lang="javascript">
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("b").mouseover(function () {
$(this).css({"background-color" : "yellow", "font-weight" : "bolder"});
});
});
</script>
</head>
<body>
<body>
Hello
</body>
</html></source>
30. Mouse over event
<source lang="javascript">
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").mouseover(function(){
$(this).append("mouseover.");
}).mouseenter(function(){
$(this).append("mouseenter");
});
}); </script> </head> <body> <body>
adsf
</body>
</html></source>
30. mouseover event triggering
<source lang="javascript">
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").mouseover(function(e){
var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";
var clientCoords = "( " + e.clientX + ", " + e.clientY + " )";
$("span:first").text("( e.pageX, e.pageY ) - " + pageCoords);
$("span:last").text("( e.clientX, e.clientY ) - " + clientCoords);
});
}); </script> </head> <body> <body>
Move the mouse over the div.
asdf
</body>
</html></source>
30. Mouse up event
<source lang="javascript">
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").mouseup(function(){
$(this).append("Mouse up.");
}).mousedown(function(){
$(this).append("Mouse down.");
});
}); </script> </head> <body> <body>
adsf
</body>
</html></source>
30. Show texts when mouseup and mousedown event triggering.
<source lang="javascript">
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").mouseup(function(){
$(this).append("Mouse up.");
}).mousedown(function(){
$(this).append("Mouse down.");
});
}); </script>
<style>
div.dbl { background:yellow;color:black; }
</style>
</head> <body> <body>
Press mouse and release here.
</body>
</html></source>
30. Show the mouse coordinates when the mouse is moved over the yellow div. Coordinates are relative to the window which in this case is the iframe.
<source lang="javascript">
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").mousemove(function(e){
var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";
var clientCoords = "( " + e.clientX + ", " + e.clientY + " )";
$("span:first").text("( e.pageX, e.pageY ) - " + pageCoords);
$("span:last").text("( e.clientX, e.clientY ) - " + clientCoords);
});
}); </script> </head> <body> <body>
Move the mouse over the div.
asdf
</body>
</html></source>
