Quick Reference
This is a quick reference list of jQuery event Methods that are used to trigger or attach a function to an event handler for the selected elements.
- jQuery – blur() MethodThe blur event occurs when an HTML element (usually a form field) loses focus.
- jQuery – change() MethodThe change event occurs when the value of a form element (input, textarea, select) has changed.
- jQuery – click() MethodThe click event occurs when an HTML element is clicked.
- jQuery – dblclick() MethodThe dblclick event occurs when an HTML element is double-clicked.
- jQuery – event.currentTarget PropertyThe event.currentTarget property is the current DOM element within the event bubbling phase, and is typically equal to “this”.
- jQuery – event.data PropertyThe event.data property contains the optional data passed to an event method when the current executing handler is bound.
- jQuery – event.delegateTarget PropertyThe event.delegateTarget property returns the element where the currently-called jQuery event handler is attached.
- jQuery – event.isDefaultPrevented() MethodThe event.isDefaultPrevented() method checks whether the preventDefault() method was called for the event.
- jQuery – event.isImmediatePropagationStopped() MethodThe event.isImmediatePropagationStopped() method checks whether the event.stopImmediatePropagation() was called for the event.
- jQuery – event.isPropagationStopped() MethodThe event.isPropagationStopped() method checks whether event.stopPropagation() was called for the event.
- jQuery – event.namespace PropertyThe event.namespace property returns the namespace when the event is triggered, and can be used to handle tasks differently depending on the namespace.
- jQuery – event.pageX PropertyThe event.pageX property returns the position of the mouse pointer, relative to the left edge of the document.
- jQuery – event.pageY PropertyThe event.pageY property returns the position of the mouse pointer, relative to the top edge of the document.
- jQuery – event.preventDefault() MethodThe event.preventDefault() method stops the default action of an element from happening, such as preventing a link or button from working.
- jQuery – event.relatedTarget PropertyThe event.relatedTarget property returns which element is being entered or exited on mouse movement.
- jQuery – event.result PropertyThe event.result property contains the previous value returned by an event handler triggered by the specified event.
- jQuery – event.stopImmediatePropagation() MethodThe event.stopImmediatePropagation() method stops the rest of the event handlers from being executed or bubbling up the DOM tree. In the following, any click events happening on the div will not be executed.
- jQuery – event.stopPropagation() MethodIn the following, the click event will NOT bubble up to its parent element such as a p or div. What this means is if the parent elements have click events attached to them, they will not fire when clicking on the span , even though the span is a part of those elements.
- jQuery – event.target PropertyThe event.target property returns which DOM element triggered the event and is often used to determine if the event is being handled due to event bubbling.
- jQuery – event.timeStamp PropertyThe event.timeStamp property returns the number of milliseconds since January 1, 1970, when the event was triggered.
- jQuery – event.type PropertyThe event.type property returns the event type that was triggered.
- jQuery – event.which PropertyThe event.which property returns which keyboard key or mouse button (by key/button number) was pressed for the event.
- jQuery – focus() MethodThe focus event occurs when an element gets focus when selected by a mouse click or by tabbing to it with the tab keyboard key.
- jQuery – focusin() MethodThe focusin event occurs when an element or any elements inside that element gets focus.
- jQuery – focusout() MethodThe focusout event occurs when an element or any elements inside that element loses focus.
- jQuery – hover() MethodThe hover() method specifies two functions to run when the mouse pointer hovers over the selected element, triggering the mouseenter and mouseleave events.
- jQuery – keydown() MethodThe keydown event occurs when a keyboard key is pressed down.
- jQuery – keypress() MethodThe keypress event occurs when a keyboard key is pressed down, but not for all keys (e.g. ALT, CTRL, SHIFT, ESC).
- jQuery – keyup() MethodThe keyup event occurs when a keyboard key is released after being pressed.
- jQuery – mousedown() MethodThe mousedown event occurs when the left mouse button is pressed down over a selected element.
- jQuery – mouseenter() MethodThe mouseenter event occurs when the mouse pointer enters a selected element.
- jQuery – mouseleave() MethodThe mouseleave event occurs when the mouse pointer leaves a selected element.
- jQuery – mousemove() MethodThe mousemove event occurs whenever the mouse pointer moves within a selected element.
- jQuery – mouseout() MethodThe mouseout event occurs when the mouse pointer leaves a selected element.
- jQuery – mouseover() MethodThe mouseover event occurs when the mouse pointer is over the selected element, and triggers even if over the element’s child element.
- jQuery – mouseup() MethodThe mouseup event occurs when the left mouse button is released over a selected element.
- jQuery – off() MethodThe off() method is most often used to remove event handlers attached with the on() method.
- jQuery – on() MethodThe on() method attaches one or more event handlers to the selected elements and child elements.
- jQuery – one() MethodThe one() method attaches one or more event handlers for the selected elements, and specifies a function to run when the event occurs.
- jQuery – $.proxy() MethodThe $.proxy() method takes an existing function and returns a new one with a particular context.
- jQuery – ready() MethodThe ready event occurs when the DOM (document object model) has been loaded and is ready for scripting.
- jQuery – resize() MethodThe resize event occurs when the browser window changes size.
- jQuery – scroll() MethodThe scroll event occurs when the user scrolls in a specified element.
- jQuery – select() MethodThe select event occurs when some text is selected in an HTML textarea or a text input field.
- jQuery – submit() MethodThe submit event occurs when an HTML form is submitted.
- jQuery – trigger() MethodThe trigger() method triggers a specified event and the default behavior of an event for the selected elements.
- jQuery – triggerHandler() MethodThe triggerHandler() method triggers a specified event for the selected element. The default behavior is not executed.
jQuery Notes:
- To use jQuery on your site, it must first be downloaded from the official jQuery site and linked to in your document <head>, or linked to via a CDN in your document <head>
- It is generally good practice to place your jQuery code/function inside the document load function so that the action takes place ONLY after the document has finished loading
- When using jQuery, single or double quotation marks are acceptable and work identically to one another; choose whichever you prefer, and stay consistent
We’d like to acknowledge that we learned a great deal of our coding from W3Schools and TutorialsPoint, borrowing heavily from their teaching process and excellent code examples. We highly recommend both sites to deepen your experience, and further your coding journey. We’re just hitting the basics here at 1SMARTchicken.