jQuery Events

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

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.

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

jQuery error() Event

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.

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

jQuery resize() Event

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.

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

jQuery scroll() Event

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.

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

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