jQuery - event handling
user-pcr
We have the ability to create dynamic web pages using events. Events are actions that can be detected by your web application.
Following are examples of events −
- Mouse click
- Loading a web page
- Taking the mouse over an element
- Submitting an HTML Form
- Pressing a key on the keyboard, etc.
When these events fire, you can use a custom function to do just about anything you want with that event. These user-defined functions call event handlers.
Required event handlers
Using the jQuery event model, we can set event handlers for DOM elements using the bind() method like this:
This will give the following result −
The complete syntax of the bind() command is as follows:
selector .bind( eventType[, eventData], handler)
Following is the description of the options −
-
eventType — A string containing the JavaScript event type, such as click or submit. See the next section for a complete list of event types.
-
eventData is an optional parameter that is a map of the data that will be passed to the event handler.
-
handler is a function that is executed every time the event is fired.
eventType — A string containing the JavaScript event type, such as click or submit. See the next section for a complete list of event types.
eventData is an optional parameter that is a map of the data that will be passed to the event handler.
handler is a function that is executed every time the event is fired.
Removing event handlers
Typically, once an event handler is set, it remains in effect for the rest of the page's life. It may be necessary to remove the event handler.
jQuery provides the unbind() command to remove an existing event handler. The syntax for unbind() is as follows:
selector .unbind(eventType, handler) or selector .unbind(eventType)
Following is the description of the options −
-
eventType — A string containing the JavaScript event type, such as click or submit. See the next section for a complete list of event types.
-
handler - if specified, specifies the specific listener to be removed.
eventType — A string containing the JavaScript event type, such as click or submit. See the next section for a complete list of event types.
handler - if specified, specifies the specific listener to be removed.
Event types
| Sr.No. | Event type and description |
|---|---|
| one |
spot Occurs when the element loses focus. |
| 2 |
change Occurs when the element changes. |
| 3 |
click Occurs when the mouse is clicked. |
| 4 |
DblClick Occurs when the mouse is double-clicked. |
| five |
mistake Occurs when a download or upload fails, etc. |
| 6 |
focus Occurs when the element receives focus. |
| 7 |
key down Occurs when a key is pressed. |
| 8 |
keystroke Occurs when a key is pressed and released. |
| nine |
key up Occurs when the key is released. |
| 10 |
load Occurs when the document is loaded. |
| eleven |
MouseDown Occurs when a mouse button is pressed. |
| 12 |
MouseEnter Occurs when the mouse enters the area of ​​the element. |
| 13 |
MouseLeave Occurs when the mouse leaves the area of ​​the element. |
| fourteen |
MouseMove Occurs when the mouse pointer moves. |
| 15 |
mouseout Occurs when the mouse pointer moves out of the element. |
| 16 |
mouseover Occurs when the mouse pointer moves over the element. |
| 17 |
mouseup Occurs when the mouse button is released. |
| eighteen |
resize Occurs when the window is resized. |
| 19 |
scroll Occurs when the window is scrolled. |
| twenty |
Select Occurs when text is selected. |
| 21 |
send Occurs when the form is submitted. |
| 22 |
unload Occurs when documents are uploaded. |
spot
Occurs when the element loses focus.
change
Occurs when the element changes.
click
Occurs when the mouse is clicked.
DblClick
Occurs when the mouse is double-clicked.
mistake
Occurs when a download or upload fails, etc.
focus
Occurs when the element receives focus.
key down
Occurs when a key is pressed.
keystroke
Occurs when a key is pressed and released.
key up
Occurs when the key is released.
load
Occurs when the document is loaded.
MouseDown
Occurs when a mouse button is pressed.
MouseEnter
Occurs when the mouse enters the area of ​​the element.
MouseLeave
Occurs when the mouse leaves the area of ​​the element.
MouseMove
Occurs when the mouse pointer moves.
mouseout
Occurs when the mouse pointer moves out of the element.
mouseover
Occurs when the mouse pointer moves over the element.
mouseup
Occurs when the mouse button is released.
resize
Occurs when the window is resized.
scroll
Occurs when the window is scrolled.
Select
Occurs when text is selected.
send
Occurs when the form is submitted.
unload
Occurs when documents are uploaded.
Event object
The callback function takes one parameter; when a handler is called, a JavaScript event object is passed through it.
The event object is often not needed and the parameter is omitted because enough context is usually available so that the handler needs to know exactly what to do when the handler is fired, but there are certain attributes that you need to access.
Event Attributes
| Sr.No. | Property Description |
|---|---|
| one |
Alt key Set to true if the Alt key was pressed when the event fired, false otherwise. The Alt key is labeled Option on most Mac keyboards. |
| 2 |
ctrlKey Set to true if the Ctrl key was pressed when the event was fired, false otherwise. |
| 3 |
data The value, if any, is passed as the second parameter to the bind() command when the handler is installed. |
| 4 |
key code For the keyup and keydown events, this returns the key pressed. |
| five |
metaKey Set to true if the meta key was pressed when the event fired, false otherwise. The meta key is the Ctrl key on PC and the Command key on Mac. |
| 6 |
pageX For mouse events, specifies the horizontal coordinate of the event, relative to the origin of the page. |
| 7 |
Pages For mouse events, specifies the vertical coordinate of the event, relative to the origin of the page. |
| 8 |
relatedTarget For some mouse events, identifies the element that the cursor left or entered when the event was fired. |
| nine |
ScreenX For mouse events, specifies the horizontal coordinate of the event, relative to the screen's home position. |
| 10 |
Screeny For mouse events, specifies the vertical coordinate of the event relative to the screen's home position. |
| eleven |
shiftKey Set to true if the Shift key was pressed when the event fired, false otherwise. |
| 12 |
goal Identifies the element for which the event was fired. |
| 13 |
TIMESTAMP The timestamp (in milliseconds) when the event was created. |
| fourteen |
type For all events, specifies the type of event that was triggered (for example, click). |
| 15 |
which the For keyboard events, specifies the numeric code of the key that triggered the event, and for mouse events, which button was pressed (1 for left, 2 for middle, 3 for right). |
Alt key
Set to true if the Alt key was pressed when the event fired, false otherwise. The Alt key is labeled Option on most Mac keyboards.
ctrlKey
Set to true if the Ctrl key was pressed when the event was fired, false otherwise.
data
The value, if any, is passed as the second parameter to the bind() command when the handler is installed.
key code
For the keyup and keydown events, this returns the key pressed.
metaKey
Set to true if the meta key was pressed when the event fired, false otherwise. The meta key is the Ctrl key on PC and the Command key on Mac.
pageX
For mouse events, specifies the horizontal coordinate of the event, relative to the origin of the page.
Pages
For mouse events, specifies the vertical coordinate of the event, relative to the origin of the page.
relatedTarget
For some mouse events, identifies the element that the cursor left or entered when the event was fired.
ScreenX
For mouse events, specifies the horizontal coordinate of the event, relative to the screen's home position.
Screeny
For mouse events, specifies the vertical coordinate of the event relative to the screen's home position.
shiftKey
Set to true if the Shift key was pressed when the event fired, false otherwise.
goal
Identifies the element for which the event was fired.
TIMESTAMP
The timestamp (in milliseconds) when the event was created.
type
For all events, specifies the type of event that was triggered (for example, click).
which the
For keyboard events, specifies the numeric code of the key that triggered the event, and for mouse events, which button was pressed (1 for left, 2 for middle, 3 for right).
Event Methods
There is a list of methods that can be called on an Event object −
| Sr.No. | Method and Description |
|---|---|
| one | preventDefault()
Prevents the browser from performing the default action. |
| 2 | isDefaultPrevented()
Returns whether event.preventDefault() was ever called on this event object. |
| 3 | stopPropagation()
Stops the transmission of the event to parent elements, preventing any parent handlers from being notified of the event. |
| 4 | isPropagationStopped()
Returns whether event.stopPropagation() was ever called on this event object. |
| five | stopImmediatePropagation()
Stops execution of other handlers. |
| 6 | isImmediatePropagationStopped()
Returns whether event.stopImmediatePropagation() was ever called on this event object. |
Prevents the browser from performing the default action.
Returns whether event.preventDefault() was ever called on this event object.
Stops the transmission of the event to parent elements, preventing any parent handlers from being notified of the event.
Returns whether event.stopPropagation() was ever called on this event object.
Stops execution of other handlers.
Returns whether event.stopImmediatePropagation() was ever called on this event object.
Event Management Methods
The following table lists the important methods associated with events.
| Sr.No. | Method and Description |
|---|---|
| one | bind(type, [data], fn)
Associates a handler with one or more events (such as click) for each matched element. You can also bind custom events. |
| 2 | off(events[, selector][, handler(eventObject)])
This is the opposite of live, it removes the associated live event. |
| 3 | hang out
Simulates a hang, for example, when moving the mouse and turning off the object. |
| 4 | on(events[, selector] [, data], handler)
Associates a handler with an event (such as a click) for all current and future elements. You can also bind custom events. |
| five | one(type, [data], fn)
Binds an event handler to one or more events that will be executed once for each matched element. |
| 6 | ready (fn)
Binds a function to be executed whenever the DOM is ready to be traversed and manipulated. |
| 7 | trigger(event, [data])
Trigger an event on each matching element. |
| 8 | triggerHandler(event, [data])
Fires all associated event handlers for the element. |
| nine | unbind([type], [fn])
This does the opposite of binding, it removes the associated events from each matched element. |
Associates a handler with one or more events (such as click) for each matched element. You can also bind custom events.
This is the opposite of live, it removes the associated live event.
Simulates a hang, for example, when moving the mouse and turning off the object.
Associates a handler with an event (such as a click) for all current and future elements. You can also bind custom events.
Binds an event handler to one or more events that will be executed once for each matched element.
Binds a function to be executed whenever the DOM is ready to be traversed and manipulated.
Trigger an event on each matching element.
Fires all associated event handlers for the element.
This does the opposite of binding, it removes the associated events from each matched element.
Event Helper Methods
jQuery also provides a set of event helper functions that can be used to either fire an event to bind any of the event types mentioned above.
Launch Methods
Below is an example that fires a blur event on all paragraphs.
$("p").blur();
Binding Methods
Following is an example which binds click event to all <div> −
blur()
Fires the blur event of each matched element.
blur (fn)
Bind a function to the blur event of each matched element.
change( )
Fires the change event of each matched element.
change (fn)
Associates a function with the change event of each matched element.
click ()
Raises a click event for each matched element.
press (FN)
Binds a function to the click event of each matched element.
dblclick()
Raises the dblclick event of each matched element.
dblclick (fn)
Binds a function to the dblclick event of each matched element.
mistake( )
Triggers the error event of each matched element.
error (fn)
Binds a function to the error event of each matched element.
focus()
Fires the focus event of each matched element.
focus (fn)
Associates a function with the focus event of each matched element.
keydown()
Raises the keydown event of each matched element.
Keydown (FN)
Bind a function to the keydown event of each matched element.
keystroke( )
Raises the keypress event of each matched element.
keystroke (fn)
Binds a function to the keypress event of each matched element.
keyup()
Fires the keyup event of each matched element.
Keyup (FN)
Bind a function to the keyup event of each matched element.
load (fn)
Binds a function to the load event of each matched element.
mousedown (fn)
Binds a function to the mousedown event of each matched element.
mouse center (fn)
Bind a function to the mouseenter event of each matched element.
mouse leave (fn)
Bind a function to the mouseleave event of each matched element.
mouse move (fn)
Bind a function to the mousemove event of each matched element.
mouse (fn)
Bind a function to the mouseout event of each matched element.
mouse hover (fn)
Bind a function to the mouseover event of each matched element.
mouseup (fn)
Bind a function to the mouseup event of each matched element.
resize (FN)
Bind a function to the resize event of each respective element.
scroll (fn)
Bind a function to the scroll event of each matched element.
Select( )
Raise the select event of each matched element.
select (fn)
Bind a function to the select event of each matched element.
Send( )
Raise the submit event of each matched element.
imagine (fn)
Bind a function to the submit event of each matched element.
unload (fn)
Associates a function with the unload event of each matched element.
