HI WELCOME TO SIRIS

jQuery Events

What is jQuery Event? An event that represents the action that perform for a specific times.

Which are the event are perform in jQuery?

  • Mouse click event
  • Mouse double click event
  • Submit a post request or form
  • Mouse hover on element
  • Some content loading on web-page where need to use by users etc.
Tip jQuery has its own ability to create interaction with Users. Events is a perform action in dynamic web-page.
We are create dynamic and responsive web page using jQuery techniques to make more easy. jQuery syntax is very simple or more powerful.

jQuery event functions

In this example, event is occurs and function is called when the click button is triggered.
$("#btn2").click(function () { 
  click action code write here...
  ...
  ...
});
Example
<!DOCTYPE html>
<html>
<head>
  <title>jQuery hide() show() function</title>
  <script src="jquery-latest.min.js"></script>
  <script>
    $(document).ready(function() {
      $("#btn1").hide();
      $("p").hide();

      $("#btn2").click(function () {
        $("p").show("slow");
        $("#btn2").hide();
        $("#btn1").show();
      }); 
      $("#btn1").click(function () {
        $("p").hide("slow");
        $("#btn1").hide();
        $("#btn2").show();
      });
    });
  </script>
  <style type="text/css">
    p {
      background-color: #99FFFF;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <div>
    <button id="btn1">Hide Paragraph</button> 
    <button id="btn2">Show Paragraph</button> 
    <p>This paragraph will be hide/show animated.</p> 
  </div>
</body>
</html>
Run it...   »

Some jQuery Events Methods

Following are few frequently useful jQuery event methods
MethodDescription
$(document).ready(function)ready function ready to execute when document load.
$(selector).focus(function)focus function perform when focus event perform on selected element.
$(selector).blur(function)blur function perform when focus out event perform on selected element
$(selector).click(function)click function perform when click event perform on selected element
$(selector).dblclick(function)dblclick function perform when double click event perform on selected element
$(selector).mouseover(function)mouseover function perform when mouse hover event perform on selected element