mousedown()
This method binds the mousedown event to the specified element. The mousedown event occurs when the mouse pointer is over an element and the mouse button is pressed.
mouseup()
This method binds the mouseup event to the specified element. The mouseup event occurs when the mouse pointer is over an element and the mouse button is released.
mouseover()
This method binds the mouseover event to the specified element. The mouseover event occurs when the mouse pointer is over an element i.e. when the mouse pointer enters the specified element.
mouseout()
This method binds the mouseout event to the specified element. The mouseout event occurs when the mouse pointer leaves the specified element.
Code:
<!DOCTYPE HTML>
<html>
<head>
<title>Mouse Events</title>
<style type="text/css">
.buttons{
width: 100px;
text-align: center;
font-weight: bold;
margin: 10px;
border: 2px solid;
}</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$('.buttons').bind('mousedown', function(){
document.getElementById('p').innerHTML = "The mousedown event occurs when the mouse pointer is over an element and the mouse button is pressed";
});
$('.buttons').bind('mouseup', function(){
document.getElementById('p').innerHTML = "The mouseup event occurs when the mouse pointer is over an element and the mouse button is released";
});
$('.buttons').bind('mouseover', function(){
document.getElementById('p').innerHTML = "The mouseover event occurs when the mouse pointer enters the specified element";
});
$('.buttons').bind('mouseout', function(){
document.getElementById('p').innerHTML = "The mouseout event occurs when the mouse pointer leaves the specified element";
});
</script>
</head>
<body>
<span class="buttons">Button</span>
<p id="p"></p>
</body>
</html>
There are two more less known events, that are mouseenter and mouseleave events.
mouseenter()
It binds an event handler to be fired when the mouse enters an element.
For example,
$('#divId').mouseenter(function{
alert('Mouse enters divId')
});
mouseleave()
It binds an event handler to be fired when the mouse leaves an element.
For example,
$('#divId').mouseleave(function{
alert('Mouse leaves divId')
});
Now you may ask that how mouseenter() and mouseleave() events are different from mouseover() and mouseout() events.
The problem with mouseover and mouseout events are that these events fire for a given element if the user mouses over or out of an element nested within the given element. You can get rid of this problem by using mouseenter and mouseleave events.
No comments:
Post a Comment