jQuery Events

Last Updated Jul 21, 2015, 12:00:06 PM





jQuery Events

jQuery makes it straightforward to set up event-driven responses on the HTML page elements. These events have often triggered by the end user's interaction with the page, such as when text was entered into a form element, or the mouse pointer is moved. In some cases, when the page load and unload events occur the browser itself will trigger the event.

In this chapter, you will learn about all the fundamental jQuery events

jQuery bind() Event

jQuery .bind() event is used to attach or bind the handler to a specific event on the HTML elements.


Syntax

The jQuery .bind() method is responsible for attaching an event handler directly to elements. Basically, Handlers are attached to the currently selected elements in the jQuery object, so those elements must exist when call we .bind() event method.


Example

In the above example, if you do a single click on the HTML element span tag that contains the text, it will bind that event and display back the result. And if you do a double click, it will attach that event and produce the result back by saying you clicked twice.


The above jQuery bind() event example produces the following result


Output
jQuery bind() event method
Try It Now

jQuery error() Event

jQuery error() event is used to bind event handler to an “error” in javascript event.


Syntax

Basically jQuery .error() method will be called when an element is not loaded properly such as images, vidoes etc... In such cases, the browser will send an error message back to the HTML document.


Note: The event handler must be attached before the browser fires an error event, which is why the example sets the src attribute after attaching the handler in the below example. Also, the error event may not be correctly fired when the page was served locally; error relies on HTTP status codes will not be triggered if the URL uses the file protocol.


Example

The above jQuery error() example will disply an error message if the image is not loading....


Output
jQuery error() event method

Try It Now

jQuery resize() Event

jQuery resize() eventmethod is called when the browser window size is changed.


Syntax

Note: The event will be continuously sent to an element as long as the window resizing is in progress. jQuery resize() method doesn’t depend on how many times this handler is being called.

Here is an example to use jQuery resize() method. In this example, we will see the resizing value printed when browser window resized.


Example

The above jQuery resize() event method will work every time you change the browser window size. It will display how many times you've resized the browser window.

The above jQuery resize() method will display the size of the browser window everytime the size is being changed

Output
jQuery resize() event method
Try It Now

jQuery scroll() Event

jQuery scroll() event is used to bind the event handler to “scroll” javascript event or to trigger that event on HTML element.


Syntax

The jQuery scroll() method will be called when scroll position is being changed. The jQuery scroll() event also raised when we click up on the mouse, drag up on scrollbar, dragging inside the element, pressing the arrow keys or mouse scroll wheel.


Example

In the above jqueryscroll() event method example, we will see the fading effect which indicates when a scroll position is being changed.

Output
jQuery scroll() event method

Try It Now

Other Advanced jQuery Events you might want to learn

jQuery Complete Events Reference

jQuery Events

jQuery Document Events

jQuery Keyboard Events

jQuery Mouse Events



Sources and Credits

The content and methods in the tutorial has been referred and updated with jQuery API and The jQuery Foundation

Last Updated Jul 21, 2015, 12:00:06 PM