We learnt about the various DOM selectors provided in jQuery. The series of posts explained Basic and Hierarchical selectors,CSS filters part 1,CSS filters part 2 and Form filters. In another post, we also read about styling DOM with jQuery. jQuery offers various ways of selecting a particular DOM element or a combination of different DOM elements. However, this is where the process actually starts. jQuery provides support for performing many useful operations on the selected DOM elements
The user interacts with the web page and certain events happen. An event can be a click of button or hovering mouse pointer over a link. When an event happens, it is said to have fired. The piece of code that handles an event is called Event handlers. Not all events require a code to handle them. However, when we write handler for an event, we say that we have caught the event.
In jQuery, the first and the most important event that gets fired is the document-ready event. This is the event that gets fired when the document is ready. When we write the code for document-ready event, we say that we have caught the document-ready event. We have read about the jQuery wrapper; I will also be writing a separate post about the document-ready event handler and its importance. jQuery also provides methods to attach handlers to elements and remove handlers from them.
An event can be a browser event like an error encountered on the web page. The error event may get fired when the image tag tries to load an image that does not exist on that location. jQuery provides
.error() method to catch the browser errors.
Another example of a browser event is the browser scroll event. The event gets fired when the document is scrolled. The jQuery method to catch the browser scroll event is
Document Loading Events
Briefly, we made a mention of document-ready event. Another example of a document loading event is the unload event. It gets fired when an attempt is made to exit the page. It can be click of a page link, browser forward, back or close buttons.
The most important category of events is the On-page events. These events cover the most of the requirements of a webpage. This includes the user interaction events fired through the input devices. These events are usually mouse events and keyboard events. The AJAX events and various animations and transitions are also a part of on-page events.
This post is an introduction to the various events supported by jQuery. We will cover each event separately.