Menu Search Sign up

Implement Custom Code in JQuery Events

A JQuery event is essentially an HTML DOM event.

Examples of an HTML DOM event include:

  • moving a mouse over an element
  • selecting a radio button
  • clicking on an element

Here is a list of some common DOM events:

  • Mouse Events
    • click    
    • dblclick    
    • mouseenter    
    • mouseleave          
  • Keyboard Events     
    • keypress    
    • keydown    
    • keyup    
  • Form Events   
    • submit    
    • change    
    • focus    
    • blur   
  • Document/Window Events
    • load
    • resize
    • scroll
    • unload

You can implement your own code logic in a JQuery event on particular HTML DOM element(s) so that when a JQuery event has fired, your custom code will be executed. Below is an example:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").dblclick(function(){
    alert("You double-clicked!!");
  });
});
</script>
</head>
<body>
<p>If you double-click on me, I will alert you.</p>
</body>
</html>

In above example, when you double-click on any paragraph element identified by HTML tag <p>, the alert function (which is your custom code logic) will be called.