In this lesson, you will learn what events are and how they make web pages interactive. jQuery is an event-driven scripting language which means it adds interactivity to web pages and can do interesting stuff in respond of events. These events could be pressing a key, loading the page in the web browser, moving a cursor over the web page.
Introduction to Events in jQuery
An event represents the exact moment when the user interacts with the web page or web browser recognizes some actions like page loading. For example, if a user clicks on a link, the exact moment when the user release the mouse, the web browser registers the click event. This is also known as ‘event being fired’ by programmers. When the user presses the mouse button, the web browser register the mouse down event; then when the user release the button, the mouse up event is registered.
Type of jQuery events
Mouse Events
Web browsers are programmed to recognize all kind of events including the mouse events.
- Click – The click event occurred when the user clicks and release the mouse button. You can click on a link, on the image, or any area of the page. The web browser will register every ‘click’ event being fired.
- Double click – When the user clicks the mouse button twice quickly and release, a double click event is registered.
- Mouse down – This event is registered when the user clicks the button but haven’t released it yet.
- Mouse up – This event is the other half of the click – the precise moment when the user releases the button.
- Mouse over – When the user hovers a cursor over an element on a web page, a mouseover event fires. It is different than actually clicking on the web element. In CSS hover pseudo-class is used for mouseover event.
Document/Window Events
In jQuery, there are a handful of events associated with the web page itself, like an event is fired when the web page is being loaded in the web browser.
The following are some of the documents or windows events:
- Load – The load events is registered when the web browser has finished downloading all of the web page’s files or external elements like CSS or JavaScript files.
- Resize – When the user maximizes or minimize the web browser window, the resize event is fired.
- Scroll – This event is associated with scroll bar of the web page. If there is no scroll bar, scroll event won’t get triggered.
Form Events
In jQuery, there are a handful of events associated with the web page itself, like an event is fired when the web page is being loaded in the web browser.
The following are some of the documents or windows events:
- Load – The load events is registered when the web browser has finished downloading all of the web page’s files or external elements like CSS or JavaScript files.
- Resize – When the user maximizes or minimize the web browser window, the resize event is fired.
- Scroll – This event is associated with scroll bar of the web page. If there is no scroll bar, scroll event won’t get triggered.
Keyboard Events
Web browsers can also recognize the user’s access to the web page via the keyboard. There are a few keyboard-related events in jQuery.
- Key press – The precise moment when the user presses a key, the keypress event is fired. If the user doesn’t let go the key, the keypress event will continue to fire again and again.
- Key down – The keydown event is the first half of the keypress event and fired when the user presses a key. It is fired before the keypress button and fired only once. In some web browsers, it acts similar to keypress event and continues to fire until the user press the key.
- Key up – This event is released when the user releases a key.
In the upcoming lessons, we will learn more about these events in detail with examples.
| jQuery Delay Animations | Tutorial Home | jQuery Click Event |
Comments