Javascript jquery click events

click event

Bind an event handler to the “click” event, or trigger that event on an element.

.click()

Bind an event handler to the “click” event, or trigger that event on an element.

contextmenu event

Bind an event handler to the “contextmenu” event, or trigger that event on an element.

.contextmenu()

Bind an event handler to the “contextmenu” event, or trigger that event on an element.

dblclick event

Bind an event handler to the “dblclick” event, or trigger that event on an element.

.dblclick()

Bind an event handler to the “dblclick” event, or trigger that event on an element.

.hover()

Bind one or two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements.

mousedown event

Bind an event handler to the “mousedown” event, or trigger that event on an element.

.mousedown()

Bind an event handler to the “mousedown” event, or trigger that event on an element.

mouseenter event

Bind an event handler to be fired when the mouse enters an element, or trigger that handler on an element.

.mouseenter()

Bind an event handler to the “mouseenter” event, or trigger that event on an element.

mouseleave event

Bind an event handler to be fired when the mouse leaves an element, or trigger that handler on an element.

.mouseleave()

Bind an event handler to the “mouseleave” event, or trigger that event on an element.

mousemove event

Bind an event handler to the “mousemove” event, or trigger that event on an element.

.mousemove()

Bind an event handler to the “mousemove” event, or trigger that event on an element.

mouseout event

Bind an event handler to the “mouseout” event, or trigger that event on an element.

.mouseout()

Bind an event handler to the “mouseout” event, or trigger that event on an element.

mouseover event

Bind an event handler to the “mouseover” event, or trigger that event on an element.

.mouseover()

Bind an event handler to the “mouseover” event, or trigger that event on an element.

mouseup event

Bind an event handler to the “mouseup” event, or trigger that event on an element.

.mouseup()

Bind an event handler to the “mouseup” event, or trigger that event on an element.

.toggle()

Bind two or more handlers to the matched elements, to be executed on alternate clicks.

• Ajax
  • Global Ajax Event Handlers
  • Helper Functions
  • Low-Level Interface
  • Shorthand Methods
  • Deprecated 1.3
  • Deprecated 1.7
  • Deprecated 1.8
  • Deprecated 1.9
  • Deprecated 1.10
  • Deprecated 3.0
  • Deprecated 3.2
  • Deprecated 3.3
  • Deprecated 3.4
  • Deprecated 3.5
  • Basics
  • Custom
  • Fading
  • Sliding
  • Browser Events
  • Document Loading
  • Event Handler Attachment
  • Event Object
  • Form Events
  • Keyboard Events
  • Mouse Events
  • Class Attribute
  • Copying
  • DOM Insertion, Around
  • DOM Insertion, Inside
  • DOM Insertion, Outside
  • DOM Removal
  • DOM Replacement
  • General Attributes
  • Style Properties
  • Collection Manipulation
  • Data Storage
  • DOM Element Methods
  • Setup Methods
  • Properties of jQuery Object Instances
  • Properties of the Global jQuery Object
  • Attribute
  • Basic
  • Basic Filter
  • Child Filter
  • Content Filter
  • Form
  • Hierarchy
  • jQuery Extensions
  • Visibility Filter
  • Filtering
  • Miscellaneous Traversing
  • Tree Traversal
  • Version 1.0
  • Version 1.0.4
  • Version 1.1
  • Version 1.1.2
  • Version 1.1.3
  • Version 1.1.4
  • Version 1.2
  • Version 1.2.3
  • Version 1.2.6
  • Version 1.3
  • Version 1.4
  • Version 1.4.1
  • Version 1.4.2
  • Version 1.4.3
  • Version 1.4.4
  • Version 1.5
  • Version 1.5.1
  • Version 1.6
  • Version 1.7
  • Version 1.8
  • Version 1.9
  • Version 1.11 & 2.1
  • Version 1.12 & 2.2
  • Version 3.0
  • Version 3.1
  • Version 3.2
  • Version 3.3
  • Version 3.4
  • Version 3.5
  • Version 3.6
  • Version 3.7

  Books

  Copyright 2023 OpenJS Foundation and jQuery contributors. All rights reserved. See jQuery License for more information. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them. OpenJS Foundation Terms of Use, Privacy, and Cookie Policies also apply. Web hosting by Digital Ocean | CDN by StackPath

  Источник

  jQuery Event Basics

  jQuery makes it straightforward to set up event-driven responses on page elements. These events are often triggered by the end user’s interaction with the page, such as when text is entered into a form element or the mouse pointer is moved. In some cases, such as the page load and unload events, the browser itself will trigger the event.

  jQuery offers convenience methods for most native browser events. These methods — including .click() , .focus() , .blur() , .change() , etc. — are shorthand for jQuery’s .on() method. The on method is useful for binding the same handler function to multiple events, when you want to provide data to the event handler, when you are working with custom events, or when you want to pass an object of multiple events and handlers.

  // Event setup using a convenience method
  $( "p" ).click(function( ) 
   console.log( "You clicked a paragraph!" );
  >);

  // Equivalent event setup using the `.on()` method
  $( "p" ).on( "click", function( ) 
   console.log( "click" );
  >);

  link Extending Events to New Page Elements

  It is important to note that .on() can only create event listeners on elements that exist at the time you set up the listeners. Similar elements created after the event listeners are established will not automatically pick up event behaviors you've set up previously. For example:

  $( document ).ready(function( )
   
   // Sets up click behavior on all button elements with the alert class
   // that exist in the DOM when the instruction was executed
   $( "button.alert" ).on( "click", function( ) 
   console.log( "A button with the alert class was clicked!" );
   >);
   
   // Now create a new button element with the alert class. This button
   // was created after the click listeners were applied above, so it
   // will not have the same click behavior as its peers
   $( "document.body );
  >);

  Consult the article on event delegation to see how to use .on() so that event behaviors will be extended to new elements without having to rebind them.

  link Inside the Event Handler Function

  Every event handling function receives an event object, which contains many properties and methods. The event object is most commonly used to prevent the default action of the event via the .preventDefault() method. However, the event object contains a number of other useful properties and methods, including:

  link pageX, pageY

  The mouse position at the time the event occurred, relative to the top left corner of the page display area (not the entire browser window).

  link type

  The type of the event (e.g., "click").

  link which

  The button or key that was pressed.

  link data

  Any data that was passed in when the event was bound. For example:

  Источник