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.