jQuery event

Events in jQuery

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 jquery event handlers.

jQuery Events 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 with examples. Below you can also find many useful event links to their respective chapters with examples.

Syntax for jquery event methods

The general syntax used for events in jquery is:

selector.event_method();

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

$(“p”).dblclick();

Useful / Mostly used event methods

Following is the list of useful jquery event methods with basic example. Click on any method for full detail and online examples.

jQuery Mouse Events

Following are events supported related to mouse:

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

List of events related to keyboard are:

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 events related to window containing web page are:

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