jQuery events handling
jQuery events handling
Here we are with our next tutorial about events handling in jQuery. We arrived pretty far. By now you should know how to select elements from the DOM, use them further from traversing and all kinds of manipulations.
What are events?
Events are actions that can be detected by your Web Application that the user perform on your webpage. We have the ability to create dynamic web pages by using events. Some example events are:
– when the user clicks somewhere
– when a page or the DOM is loaded
– when a HTML form is submited
– when you press a key from your keyboard
– etc.
When these events are triggered you can then use a custom function to do pretty much whatever you want with the event.
Click event
You can determine when the user performs a click on your website by using this type of event, and then create an action for that (display new elements in page, hide the other one, or change the existing value for some of them). There are some different ways to attach an event, we will talk about them separately, but for now we will see an example of attaching a click event with the .bind method. Using the jQuery Event Model, we can establish event handlers on DOM elements with the bind() method as follows:
|
1 2 3 |
$(document).bind('click', function( e ){ alert('Hey, why are you clicking on my page?'); }); |
Parameters: selector.bind( eventType[, eventData], handler)
This is the description of the parameters:
- eventType: A string containing a JavaScript event type, such as click or mouseleave. Refer to the next section for a complete list of event types.
- eventData: This is optional parameter is a map of data that will be passed to the event handler.
- handler: A function to execute each time the event is triggered.
Another way of binding an event to an element is to use the .on() method from jQuery.
|
1 2 3 |
$(document).on('click', function( e ){ alert('Hey, why are you clicking on my page?'); }); |
See the difference? We attached the event using .on() method not .bind(). The result is the same. We can use another method again that is even easier:
|
1 2 3 |
$(document).click(function( e ){ alert('Hey, why are you clicking on my page?'); }); |
Above we binded to the .click() directly. Below is a list with events that can be triggered the same way we did for the click event.
List with events
| blur | Occurs when the element loses focus |
| change | Occurs when the element changes |
| click | Occurs when a mouse click |
| dblclick | Occurs when a mouse double-click |
| error | Occurs when there is an error in loading or unloading etc. |
| focus | Occurs when the element gets focus |
| keydown | Occurs when key is pressed |
| keypress | Occurs when key is pressed and released |
| keyup | Occurs when key is released |
| load | Occurs when document is loaded |
| mousedown | Occurs when mouse button is pressed |
| mouseenter | Occurs when mouse enters in an element region |
| mouseleave | Occurs when mouse leaves an element region |
| mousemove | Occurs when mouse pointer moves |
| mouseout | Occurs when mouse pointer moves out of an element |
| mouseover | Occurs when mouse pointer moves over an element |
| mouseup | Occurs when mouse button is released |
| resize | Occurs when window is resized |
| scroll | Occurs when window is scrolled |
| select | Occurs when a text is selected |
| submit | Occurs when form is submitted |
| unload | Occurs when documents is unloaded |
The “ready” event
This event is widely used because it gives you possibility to detect when the DOM is fully loaded, and allow you to perform operations on it then. Let’s see an example:
|
1 2 3 |
$(document).ready(function(){ alert('the dom is loaded'); }); |
We can use this to change the DOM structure and what the user sees in the page, right after the DOM was loaded, so inside the function, you can do anything you want from adding to removing elements.
Summary
Using jquery events you can detect user’s actions in your page. You can do whatever you want after you detect an action of the user, perform DOM operations or even math if you have to. You should have now an idea how events are working in jQuery. Stay tuned for the next tutorial.
