jQuery Event Methods

jQuery is tailor-made to respond to events in an HTML page.

What are Events?

All the different visitor's actions that a web page can respond to are called events.

An event represents the precise moment when something happens.

Examples:

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

     Examples:

     $(this).hide() - hides the current element.

     $("p").hide() - hides all <p> elements.

     $(".test").hide() - hides all elements with class="test".

     $("#test").hide() - hides the element with id="test".

jQuery Selector allow you to select and manipulate HTML elements.

jQuery Selector are used to find or select HTML elements based on their name,id,class,types,attributes

The Document Ready Event

The ready event's occurs when the dom(document object model) has been loaded because this event's occurs after the document is ready.

The ready method specifies what happens when a ready event occurs

You might have noticed that all jQuery methods in our examples, are inside a document ready event:

$(document).ready(function(){

   // jQuery methods go here...

});

This is to prevent any jQuery code from running before the document is finished loading (is ready).

It is good practice to wait for the document to be fully loaded and ready before working with it. This also allows you to have your JavaScript code before the body of your document, in the head section.

Here are some examples of actions that can fail if methods are run before the document is fully loaded:

  • Trying to hide an element that is not created yet
  • Trying to get the size of an image that is not loaded yet

    • Commonly Used jQuery Event Methods

    click()

    The click() method attaches an event handler function to an HTML element.

    The function is executed when the user clicks on the HTML element.

    The following example says: When a click event fires on a <p> element; hide the current <p> element:

    Example


    <script src="./jquery-3.2.1.js"> </script>
    <script>
    $(document).ready(function(){
    $("p").click(function(){
    $(this).hide();
    });
    });
    </script>
    <p>If you click on me, I will disappear.</p>
    <p>Click me away!</p>
    <p>Click me too!</p>

    Run Example>>



    dblclick()

    The dblclick() method attaches an event handler function to an HTML element.

    The function is executed when the user double-clicks on the HTML element:

    Example


    <script src="./jquery-3.2.1.js"> </script>
    <script>
    $(document).ready(function(){
    $("p").dblclick(function(){
    $(this).hide();
    });
    });
    </script>
    <p>If you click on me, I will disappear.</p>
    <p>Click me away!</p>
    <p>Click me too!</p>

    Run Example>>


    focus()

    The focus() method attaches an event handler function to an HTML form field.

    The function is executed when the form field gets focus:

    Example


    <script src="./jquery-3.2.1.js"> </script>
    <script>
    $(document).ready(function(){
    $("input").focus(function(){
    $(this).css("background-color", "#cccccc");
    });
    $("input").blur(function(){
    $(this).css("background-color", "#ffffff");
    });
    });
    </script>
    Name: <input type="text" name="fullname">

    Email: <input type="text" name="email">

    Run Example>>