ITSourceCode.com

We Exist to Provide 100% Free Source Code and Tutorials

Custom Search

jQuery Events

jquery-javascript eventsIn this tutorial, you are going to learn how to put events on the HTML elements using jQuery. With this, you can set up an event handler on the page elements. These events are used by the web user’s to interact with the page and in some cases browser itself will perform the event.

 

jQuery offers easy methods for most browser events. These methods are:

  • Click()

Example: The click event handler will perform, if you click on any <h3> element.

$(document).ready(function(){
  $("h3").click(function(){
   // do the you process here..
  });
});

 

  • dbclick()

Example: The dbclick event handler will perform, if you double click on any <h3> element.

$(document).ready(function(){
  $("h3").dbclick(function(){
   // do the you process here..
  });
});

 

  • mouseenter()

Example: The mouseenter event handler will perform, if you drag the mouse pointer on any <h3> element.

$(document).ready(function(){
  $("h3").mouseenter(function(){
   // do the you process here..
  });
});

 

  • mouseleave()

Example: The mouseleave event handler will perform, if you leave the mouse pointer on any <h3> element.

$(document).ready(function(){
  $("h3").mouseleave(function(){
    //do your process here...
  });
});

 

  • mousedown()

Example: The mousedown event handler will perform, if you press down the left mouse button while the mouse pointer is above any <h3> element.

$(document).ready(function(){
  $("h3").mousedown(function(){
   //do your actions here...
  });
});

 

  • moseup()

Example: The mouseup event handler will perform, if you release the left mouse button while the mouse pointer is above any <h3> element.

$(document).ready(function(){
  $("h3").mouseup(function(){
   //do your actions here...
  });
});

 

  • hover()

Example: The hover event handler will perform, if you hover the mouse pointer on any <h3> element the first function will be executed, and if you leave the mouse pointer on any <h3> element the second function will be executed.

$(document).ready(function(){
 $("h3").hover(function(){
  //do your first actions here...
 },
 function(){
  //do your second actions here...
 });
});

 

  • focus()

Example: The focus event handler will perform, if the fields in the form gets focus.

$(document).ready(function(){
  $("input").focus(function(){
   //do your actions here...
  });
});

 

  • blur()

Example: The blur event handler will perform, if the fields in the form loose focus.

$(document).ready(function(){
  $("input").blur(function(){
   //do your actions here...
  });
});

 

For all students who need programmer for your thesis system or anyone who needs a sourcecode in any programming languages. You can contact me @ :

 

Email – jannopalacios@gmail.com
Mobile No. – 09305235027 – tnt

Facebook Comments

Check Your Domain Ranking

Leave a Reply

Your email address will not be published. Required fields are marked *

ITSourceCode.com © 2016 Frontier Theme

Subscribe For Latest Updates

Signup for our newsletter and get notified when we publish new articles for free!