jQuery Event Handling
What are events?
The actions that are used to create dynamic web pages are known as events.
Some of the examples are:
1. Mouse click
2. Web page loading
3. Hovering the mouse
4. Submitting an HTML form.
5. A keystroke
Custom functions known as
event handlers are written when these events are triggered.
Binding the event handlers
The bind() method is used by the event handlers that are established on the DOM elements.
Syntax:
selector.bind(eventType[,eventData],handler)
Where,
eventType - such as a click or submit.
EventData - it is an optional parameter that is passed to the event handler.
handler - it is a function which is executed each time the event is triggered.
Example: Writing the bind() method.
$('div').bind('click',function(event){alert('Hi!');})
In the above example, the <div> element responds to the click event.
Removing the Event handlers
To remove an existing event handler the unbind() method is used.
Syntax:
selector.unbind(eventType, handler)
or
selector.unbind(eventType)
Where,
eventType – such as click or submit
handler – it is a function which is executed each time an event is triggered.
Types of Events
Following are the types of events which can be bound by using jQuery:
| Event Type | Description |
|---|
| blur | It occurs when element loses focus. |
| change | It occurs when the element changes. |
| click | It occurs on the mouse click. |
| dblclick | It occurs on the mouse double click. |
| error | It occurs when there is an error in loading or unloading etc. |
| focus | It occurs when the element gets focus. |
| keydown | It occurs on the key press. |
| keypress | It occurs on key press and release. |
| keyup | It occurs on key press and release. |
| load | It occurs when the document is loaded. |
| mousedown | It occurs on the press of mouse button. |
| mouseenter | It occurs when the mouse enters in an element region. |
| mouseleave | It occurs when mouse leaves an element region. |
| mousemove | It occurs when the mouse pointer moves. |
| mouseout | It occurs when the mouse pointer moves out of an element. |
| mouseover | It occurs when the mouse pointer moves over an element. |
| mouseup | It occurs on the release of mouse button. |
| resize | It occurs when the window is resized. |
| scroll | It occurs when the window is scrolled. |
| select | It occurs when a text is selected. |
| submit | It occurs when a form is submitted. |
| unload | It occurs when a document is unloaded. |
Event Objects
- A single parameter is taken by the callback function; whenever the handler is called the event object is passed through it.
- When the event object is not required, the parameter is omitted.
- Whenever the handler is triggered sufficient amount of context is available and the handler is bound to know exactly what is needed to be done.
Event Attributes
Event object is associated with certain attributes.
They are as follows:
| Property | Description |
|---|
| altKey | It is set to true if the Alt key is pressed, false if not. |
| ctrlKey | It is set to true if the Ctrl key is pressed, false if not. |
| Data | If there is any value it is passed as the second parameter to the bind() command when the handler was established. |
| keyCode | It returns the key that was pressed for the keyup and keydown events. |
| metaKey | It is set to true if the Meta (Ctrl) key is pressed, false if not. |
| pageX | It is the horizontal coordinate of the event relative from the page origin. |
| pageY | It is the vertical coordinate of the event relative from the page origin. |
| relatedTarget | It identifies the element that the cursor left or entered when the event was triggered. |
| screenX | It is the horizontal coordinate of the event relative from the screen origin. |
| screenY | It is the vertical coordinate of the event relative from the screen origin. |
| shiftKey | It is set to true if the Shift key is pressed and false if not |
| Target | It identifies the element for which the event is triggered. |
| timeStamp | It is taken when the event is created for the time (in milliseconds). |
| Type | The type of event triggered is specified. |
| which | It is for the keyboard events. It specifies the numeric code for the key that caused the event and for the mouse events that specify which button was pressed. |
Event Methods
Following is the list of event methods which can be called on an event object.
| Method | Description |
|---|
| preventDefault() | It prevents the browser from executing default action. |
| isDefaultPrevented() | It returns whether event.preventDefault() was ever called on this event object. |
| stopPropagation() | It stops the bubbling of an event to the parent element. |
| isPropagationStopped() | It returns whether event.stopPropagation() was ever called on this event object. |
| stopImmediatePropagation() | It stops the rest of the handlers from being executed. |
| isImmediatePropagationStopped() | It returns whether event.stopImmediatePropagation() was ever called on this event object. |
Event Manipulation Methods
Following is the list of event manipulation methods
| Method | Description |
|---|
| bind(type, [data], function) | An event handler is binded to one or more events of each matched elements. |
| live(type, function) | A handler to an event is binded for all current and future matched elements. |
| die(type, function) | A bound live event is removed. |
| hover(over, out) | It simulates hovering.
For example moving the mouse on and off an object |
| one (type, [data], function) | A handler is binded to one or more events to be executed once for each matched element. |
| ready(function) | A function is binded whenever the DOM is ready to be traversed and manipulated. |
| toggle(function1, function2,function3,....) | It toggles among two or more function calls on every other click. |
| trigger(event, [data]) | It triggers an event on every matched element. |
| triggerHandler(event, [data]) | It triggers all bound event handlers on an element. |
| unbind([type], [fn]) | It does the opposite of bind, it removes bound events from each of the matched elements. |
