How to Use Events in jQuery?

jQuery is truly a magical library of JavaScript for web designers and UI developers. Over 90% of websites have implemented jQuery for various CSS effects and interactivity. While jQuery covers many important topics, I decided to start by explaining events in jQuery.

Events in jQuery are methods used to register behaviors that take effect when a user interacts with the page in the browser. If you’re interested in mastering these skills, consider joining web development training in Delhi to further enhance your expertise.

Let me put these events in few categories so that you can understand them easily.

1. Browser Events
   • These events are very useful to work with the browser.
     1. resize()
     2. error()
     3. scroll()
2. Document Loading
   • This type of events monitor for the loading of pages’ contents.
     1. load()
     2. ready()
     3. unload()
3. Event Handler Attachment
   • Event handling requires a special attention to adding or attaching and removing events in jQuery and these special events API work well.
     1. delegate()
     2. undelegate()
     3. of()
     4. off()
     5. trigger()
4. Event Object
   • When we work with the events in jQuery then there is an event object also get passed to the event handler with a lot of properties.
     1. event.currentTarget
     2. event.target
     3. event.result
     4. event.type
     5. event.pageX
     6. event.pageY
     7. event.which
     8. event.data
     9. event.stopPropagation()
     10. event.isDefaultPrevented()
     11. event.defaultPrevent()
5. Form Events
   • You must know that forms in web pages have special events to deal with the submission, resetting values etc etc.
     1. blur()
     2. change()
     3. focus()
     4. focusIn()
     5. select()
     6. submit()
6. Keyboard Events
   • Want to work with the keyboards’ keys then you need these events.
     1. focusout()
     2. keydown()
     3. keypress()
     4. keyup()
7. Mouse Events
   • All mouse specific tasks such as when you click or double-click and something happens will be handled by mouse events.
     1. click()
     2. dblclick()
     3. hover()
     4. mosuedown()
     5. mouseup()
     6. mouseenter()
     7. mouseleave()
     8. mousemove()
     9. mouseout()

Explaining some of the common event API in jQuery

1. bind() and unbind()

These methods attach and remove one or more than one event handlers to all the elements those you have selected and when your specified event occurs than that function calls up.

Example:

bind():

$(document).ready(function(){
  $("p").bind("click", function(){
      alert("The paragraph was clicked.");
  });
});

Explanation: Attach a click event to the <p> element.

unbind():

$(document).ready(function(){
  $("span:first").click( function(){
       $(‘p’).unbind(“click”);
  });
});

Explanation: Attach a click event to the <span:first> element to unbind the click event form.

2. blur() and focus()

These both events are very common in HTML forms validation. The blur event occurs when an element loses focus while focus() event works when an element gets focus.

Example:

blur():

$(document).ready(function(){
  $("input").blur(function(){
       alert("This input field has lost its focus.");
  });
});

Explanation: Attach a function to the blur event. The blur event occurs when the <input> field loses focus.

focus():

$(document).ready(function(){
  $("input").focus(function(){
      alert("This input field has got its focus.");
  });
});

Explanation: Attach a function to the focus event. The focus event occurs when the <input> field gets focus.

3. change()

The change event occurs when the value of an element is changed (only works on form fields).

Example:

$(document).ready(function(){
  $("input").change(function(){
     alert("The text has been changed.");
  });
});

Explanation: Alert a text when an <input> field is changed. It is also very good for select element in HTML. I would recommend you to try it on that too.

4. click() and dblclick()

The click event is very common event and it occurs when an element is clicked by someone.

Example:

$(document).ready(function(){
  $("p").click(function(){
      alert("The paragraph was clicked.");
  });
});

Explanation: Click on a <p> element to alert a text. You can try replacing ‘click’ with ‘dblclick’ yourself.

5. delegate() and undelegate()

The delegate() method attaches event handlers for specified element or elements that are children of selected elements. It also specifies a function to run when the attached event occurs.

While undelegate() does its just revert. Undelegate removes the attached event to any set of selected elements.

Example:

$(document).ready(function(){
  $("div").delegate("p","click",function(){
      $("p").css("background-color", "red");
  });
});

Explanation: When a <p> element inside a <div> element is clicked, change the background color of all <p> elements.

$(document).ready(function(){
   $(‘li:first’).click(function (){
       $("div").undelegate("p", "click”);
  })
});

Explanation: When a <li:first> element is clicked then it will undelegate or remove all the attached events from the <p> inside a <div>.

6. hover()

Using the hover() method you can specify two functions so that when you will bring your mouse on the element or take your mouse out of the element that those functions will be called simultaneously.

Example:

$(document).ready(function(){
    $("p").hover(function(){
       $("p").css("background-color","green");
    }, function(){
       $("p").css("background-color","pink");
    });
});

Explanation: Change background color of a <p> element when the mouse pointer hovers over it.

7. Keyup() and keydown()

These both methods specify two functions to run when you press or leave any key.

Example:

$(document).ready(function(){
    $("input").keyup(function(){
        $(this).css("background-color","yellow");
    });
});

Explanation: Try typing any letter inside the input field you will notice the change.

8. Trigger()

This method is very useful when you want to trigger all events and handler attached to a selected elements for the given event type.

Example 1:

$( "#foo" ).on( "click", function() {
    alert( $( this ).text() );
});
$( "#foo" ).trigger( "click" );  

Explanation: You can notice in above example that alert will be called up as you will open the html page because you have set a trigger.

9. preventDefault() and isDefaultPrevented()

These two methods are good when you want to set something like ‘return false’ in JavaScript. It means you can ignore the default action of the event with the help of this while isDefaultPrevented() is being used to check whether event.preventDefault() was called on the event or not.

Example:

$( "a" ).click(function( event ) {
      alert( event.isDefaultPrevented() ); // false
      event.preventDefault();
      alert( event.isDefaultPrevented() ); // true
});

Explanation:  When you will click on the given anchor in your page then you will notice that first alert shows false and last one true because we have added preventDefault() just after the first alert. And one more point i want to put here you will see that your page is not redirecting you to the given href attribute value;

Summary

Events in jQuery controls through the various methods or APIs as you know. Above explanation will surely help you in understanding jQuery’s events and If you’re looking for jQuery Courses Delhi, you can join our online jQuery classes or classroom jQuery training at a leading web design training institute in Delhi to further enhance your skills.