Latest Tutorials| Questions and Answers|Ask Questions?|Site Map



Home Ajax Jquery Binding and unbinding events

Related Tutorials


 
 

Share on Google+Share on Google+

Binding and unbinding events

Advertisement
This page discusses - Binding and unbinding events

Binding and unbinding events

     

Binding and unbinding events

As the name says "binding events " is  the association of an element with an event. And reverse is true for "unbinding events" That is disassociation of an element with an event.

Binding events

You can bind events like click, mouseenter, mouseleave etc events with any elements like paragraph, div, span ,button etc.

Given below example demonstrate how to bind event with element :

bindEvent.html

<!DOCTYPE html>
<html>
<head>
  <style>
p { background:#DAA520; font-weight:bold; cursor:pointer; 
padding:5px;width:20%;}
p.over { background: #ADFF2F; }
span { color:red; }
</style>
  <script src="jquery-1.4.2.js"></script>
</head>
<body>
	<p>Click or double click here.</p>
<span></span>
<script>
$("p").bind("click", function(event){
var str = "( " + event.pageX + ", " + event.pageY + " )";
$("span").text("Click happened! " + str);
});
$("p").bind("dblclick", function(){
$("span").text("Double-click happened in " + this.nodeName);
});
$("p").bind("mouseenter mouseleave", function(event){
$(this).toggleClass("over");
});

</script>
</body>
</html>

Output  :

When we click one time :

 When we click two times :

 Description of the program :


1 $("p").bind("click", function(event){
2 var str = "( " + event.pageX + ", " + event.pageY + " )";
3 $("span").text("Click happened! " + str);});
4 $("p").bind("dblclick", function(){
5 $("span").text("Double-click happened in " + this.nodeName);});
6 $("p").bind("mouseenter mouseleave", function(event){
7 $(this).toggleClass("over");});

At first line , paragraph 'p' is associated with click event means when paragraph is clicked , it will execute lines 2 & 3.

Similarly the double click is associated  at line 4,  which executes line 5.

And at last, 'p' binds with "mouseenter mouseleave"  event, which changes the color of the 'p' by executing line number 7.

Download Source Code

Click here to see online demo

Learn from experts! Attend jQuery Training classes.

Advertisement

If you enjoyed this post then why not add us on Google+? Add us to your Circles



Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: April 18, 2011

Related Tutorials

Discuss: Binding and unbinding events  

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments:1
Arlis
February 23, 2012
EnkPicNvZoz

Looks nice but rolilng your mouse over it quickly keeps it animating even when the mouse isn't over the elements.Quick way to fix this (I'm sure you know) is to create timers on the roll over and kill them on mouse out. This method is used on a bunch of JS libraries to stop the constant jumping around when moving your mouse a lot.Pop it in a jquery plugin too
DMCA.com