Jquery javascript click event

Category: Event Object

jQuery’s event system normalizes the event object according to W3C standards. The event object is guaranteed to be passed to the event handler. Most properties from the original event are copied over and normalized to the new event object.

jQuery.Event Constructor

The jQuery.Event constructor is exposed and can be used when calling trigger. The new operator is optional.

Check trigger’s documentation to see how to combine it with your own event object.

//Create a new jQuery.Event object without the "new" operator.
var e = jQuery.Event( "click" );
 
// trigger an artificial click event
jQuery( "body" ).trigger( e );

As of jQuery 1.6, you can also pass an object to jQuery.Event() and its properties will be set on the newly created Event object.

// Create a new jQuery.Event object with specified event properties.
var e = jQuery.Event( "keydown", < keyCode: 64 > );
 
// trigger an artificial keydown event with keyCode 64
jQuery( "body" ).trigger( e );

Common Event Properties

jQuery normalizes the following properties for cross-browser consistency:

The following properties are also copied to the event object, though some of their values may be undefined depending on the event:

altKey, bubbles, button, buttons, cancelable, char, charCode, clientX, clientY, ctrlKey, currentTarget, data, detail, eventPhase, key, keyCode, metaKey, offsetX, offsetY, originalTarget, pageX, pageY, relatedTarget, screenX, screenY, shiftKey, target, toElement, view, which

Other Properties

To access event properties not listed above, use the event.originalEvent object:

// Access the `dataTransfer` property from the `drop` event which
// holds the files dropped into the browser window.
var files = event.originalEvent.dataTransfer.files;

event.currentTarget

The current DOM element within the event bubbling phase.

event.data

An optional object of data passed to an event method when the current executing handler is bound.

event.delegateTarget

The element where the currently-called jQuery event handler was attached.

event.isDefaultPrevented()

Returns whether event.preventDefault() was ever called on this event object.

event.isImmediatePropagationStopped()

Returns whether event.stopImmediatePropagation() was ever called on this event object.

event.isPropagationStopped()

Returns whether event.stopPropagation() was ever called on this event object.

event.metaKey

Indicates whether the META key was pressed when the event fired.

event.namespace

The namespace specified when the event was triggered.

event.pageX

The mouse position relative to the left edge of the document.

event.pageY

The mouse position relative to the top edge of the document.

event.preventDefault()

If this method is called, the default action of the event will not be triggered.

event.relatedTarget

The other DOM element involved in the event, if any.

event.result

The last value returned by an event handler that was triggered by this event, unless the value was undefined.

event.stopImmediatePropagation()

Keeps the rest of the handlers from being executed and prevents the event from bubbling up the DOM tree.

event.stopPropagation()

Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

event.target

The DOM element that initiated the event.

event.timeStamp

The difference in milliseconds between the time the browser created the event and January 1, 1970.

event.type

Describes the nature of the event.

event.which

For key or mouse events, this property indicates the specific key or button that was pressed.

• 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 Methods

  jQuery is tailor-made to respond to events in an HTML page.

  What are Events?

  All the different visitors’ actions that a web page can respond to are called events.

  An event represents the precise moment when something happens.

  • moving a mouse over an element
  • selecting a radio button
  • clicking on an element

  The term «fires/fired» is often used with events. Example: «The keypress event is fired, the moment you press a key».

  Here are some common DOM events:

  Mouse Events	Keyboard Events	Form Events	Document/Window Events
  click	keypress	submit	load
  dblclick	keydown	change	resize
  mouseenter	keyup	focus	scroll
  mouseleave	blur	unload

  jQuery Syntax For Event Methods

  In jQuery, most DOM events have an equivalent jQuery method.

  To assign a click event to all paragraphs on a page, you can do this:

  The next step is to define what should happen when the event fires. You must pass a function to the event:

  Commonly Used jQuery Event Methods

  The $(document).ready() method allows us to execute a function when the document is fully loaded. This event is already explained in the jQuery Syntax chapter.

  The click() method attaches an event handler function to an HTML element.

  The function is executed when the user clicks on the HTML element.

  The following example says: When a click event fires on a

  element; hide the current

  element:

  Example

  The dblclick() method attaches an event handler function to an HTML element.

  The function is executed when the user double-clicks on the HTML element:

  Example

  The mouseenter() method attaches an event handler function to an HTML element.

  The function is executed when the mouse pointer enters the HTML element:

  Example

  The mouseleave() method attaches an event handler function to an HTML element.

  The function is executed when the mouse pointer leaves the HTML element:

  Example

  The mousedown() method attaches an event handler function to an HTML element.

  The function is executed, when the left, middle or right mouse button is pressed down, while the mouse is over the HTML element:

  Example

  The mouseup() method attaches an event handler function to an HTML element.

  The function is executed, when the left, middle or right mouse button is released, while the mouse is over the HTML element:

  Example

  The hover() method takes two functions and is a combination of the mouseenter() and mouseleave() methods.

  The first function is executed when the mouse enters the HTML element, and the second function is executed when the mouse leaves the HTML element:

  Example

  $(«#p1»).hover(function() <
  alert(«You entered p1!»);
  >,
  function() <
  alert(«Bye! You now leave p1!»);
  >);

  The focus() method attaches an event handler function to an HTML form field.

  The function is executed when the form field gets focus:

  Example

  The blur() method attaches an event handler function to an HTML form field.

  The function is executed when the form field loses focus:

  Example

  The on() Method

  The on() method attaches one or more event handlers for the selected elements.

  Attach a click event to a

  element:

  Example

  Attach multiple event handlers to a

  element:

  Example

  $(«p»).on( <
  mouseenter: function() <
  $(this).css(«background-color», «lightgray»);
  >,
  mouseleave: function() <
  $(this).css(«background-color», «lightblue»);
  >,
  click: function() <
  $(this).css(«background-color», «yellow»);
  >
  >);

  jQuery Exercises

  jQuery Event Methods

  For a full jQuery event reference, please go to our jQuery Events Reference.

  Источник