Event methods trigger or join a function to an event handler for the choosen elements. Mouse events attaches an event handler function to an HTML element. Here, below are some of the mouse events :-
.click() :- The function is executed when the user clicks on the HTML element.
Example :-
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>Click here to hide</p>
<p>Click Here</p>
<p>Click Here</p>
.dblclick() :- The function is executed when the user double-clicks on the HTML element.
Example :-
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>Double-click here to hide.</p>
<p>Click Here </p>
<p>Click Here </p>
</body>
.mousedown() :- When the mouse is over the HTML element, the left, middle or right mouse button is pressed down to execute this function.
Example :-
<script>
$(document).ready(function(){
$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});
});
</script>
</head>
<body>
<p id="p1">This is a paragraph.</p>
</body>
.mouseup() :- When the mouse is over the HTML element, the left, middle or right mouse button is released to execute this function.
Example :-
<script>
$(document).ready(function(){
$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});
});
</script>
</head>
<body>
<p id="p1">This is a paragraph.</p>
</body>
hover() :- It attaches one or two handlers to the matched elements to execute when two methods hovers the elements and this happens with the help of following two methods :-
- mouseenter() is executed when the mouse enters the HTML element.
- mouseleave() is executed when the mouse leaves the HTML element.
Example :-
<script>
$(document).ready(function(){
$("#p1").hover(function(){
alert("You entered!");
},
function(){
alert("You leave");
});
});
</script>
0 Comment(s)