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 – [email protected]
Mobile No. – 09305235027 – tnt

Leave a Comment