jQuery events

Events are user’s actions on a web page that web page can respond to. For example pressing a keyboard key, bringing mouse pointer to a link, click that link, while page is loading, page is closed or unloading and many more actions.

Fortunately, jQuery is tailor-made to respond to many useful events that webpage can get. As a user triggers those events, custom function or actions can be performed by catching those events in event handlers.

Events that are supported by jquery can be categorized into following:

1. Mouse events e.g. click event, double click event
2. Keyboard events e.g. keypress, keydown, keyup
3. Form Events e.g. form submit event
4. Document events e.g. load event, resize event

In this chapter we will explain how to use event methods of jquery with example. Below you can also find many useful event links for their respective detailed chapters with examples.

Syntax of jquery event method

selector.event_method();

e.g. $(“p”).click();

$(“p”).dblclick();

Useful / Mostly used jQuery event’s methods

Below is the list of useful event methods with basic example. Click on any method for full detail and running example to learn fully.

jQuery Mouse Events

jQuery click event

e.g. $(“p”).click();

jQuery double click event

$(“p”).dblclick();

jQuery  mouseenter event

e.g. $(“p”).mouseenter ();

jQuery mouseleave event

e.g. $(“p”).mouseleave ();

jQuery mousedown event

e.g. $(“p”).mousedown ();

jQuery mouseup event

e.g. $(“p”).mouseup();

jQuery hover

e.g. $(“p”).hover ();

Keyboard events

jQuery keypress event

e.g. $(“p”).keypress();

jQuery keydown event

e.g. $(“p”).keydown();

jQuery keyup event

e.g. $(“p”).keyup();

Document events

jQuery Form submit event

e.g. $(“my_form”).submit()

jQuery Change event

e.g. $(“input”).change()

jQuery Focus event

e.g. $(“p”).focus()

jQuery Blur event

e.g. $(“input”).blur

Windows events

jQuery Load event

e.g. $(selector).load(function)

jQuery Resize event

e.g. $(window).resize

jQuery Scroll event

e.g. $(“div”).scroll

jQuery Unload event

e.g. $(window).unload

Other events

jQuery Bind

e.g. $(“p”).bind

jQuery Delegate

e.g. $(“div”).delegate

jQuery On Event

$(“p”).on

jQuery Select event

$(“input”).select