Detailed examples of properties of jQuery event objects
This article mainly introduces the properties and methods of the jQuery event object in detail. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.
The properties and methods of jQuery event objects are for your reference. The specific contents are as follows
There are many properties and methods of event objects, but there are only a few that we often use. Here I will mainly talk about the functions and differences
event.type: Get the type of event
The event type of the triggering element
$("a").click(function(event) { alert(event.type); // "click"事件 });
event.pageX and event.pageY: Get the mouse current Coordinates relative to the page
Through these two attributes, you can determine the coordinate value of the element on the current page, and the distance between the position of the mouse relative to the left edge of the document (left) and (top). In simple terms It starts from the upper left corner of the page, that is, it uses the page as a reference point and does not change with the movement of the slider
event.preventDefault() method: prevent the default behavior
This is used a lot, in After executing this method, if you click a link (a tag), the browser will not jump to the new URL. We can use event.isDefaultPrevented() to determine whether this method has been called (on that event object)
event.stopPropagation() method: prevent events from bubbling
Events can be Bubbling, to prevent events from bubbling up the DOM tree, that is, not triggering the event processing function on any predecessor element
event.which: Gets the mouse click when the mouse is clicked. which key
event.which normalizes event.keyCode and event.charCode. event.which also normalizes button presses (mousedown and mouseupevents), with the left button reporting 1, the middle button reporting 2, and the right button reporting 3
event.currentTarget: The current DOM element during event bubbling.
The DOM object that currently triggers the event before bubbling is equivalent to this.
The difference between this and event.target:
Events in js will bubble. So this can change, but event.target will not change. It will always be the target DOM element that directly accepts the event;
.this and event.target are both DOM objects
If you want They can be converted into jquery objects using methods in jquey. For example, the use of this and $(this), the use of event.target and $(event.target);
Reference code:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <style> .left p, .right p { width: 500px; height: 100px; padding: 5px; margin: 5px; float: left; border: 1px solid #ccc; } .left p { background: #bbffaa; } .right p { background: yellow; } </style> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body> <h3>事件对象的属性与方法</h3> <p class="left"> <p id="content"> 外层p元素 <br /> <span style="background: silver;">内层span元素</span> <br /> 外层p元素 </p> <br /> <p id="msg"></p> </p> <script type="text/javascript"> //为 <span> 元素绑定 click 事件 $("span").click(function() { $("#msg").html($("#msg").html() + "<p>内层span元素被单击</p>"); }); //为 Id 为 content 的 <p> 元素绑定 click 事件 $("#content").click(function(event) { $("#msg").html($("#msg").html() + "<p>外层p元素被单击</p>"); event.stopPropagation(); //阻止事件冒泡 }); //为 <body> 元素绑定 click 事件 $("body").click(function() { $("#msg").html($("#msg").html() + "<p>body元素被单击</p>"); }); </script> </body> </html>
Click the span to bubble up to the click event of the content, and then enter the click function of the content to execute the blocking bubbling statement, which will not bubble up to the body, so the body element will not be clicked when you click the span.
$('#msg').html($('#msg').html()+ "
The inner span element was clicked
"); // Append$('#msg').html("
The inner span element was clicked
"); //Replace the original contentRelated recommendations:
Js operates non-IE event object properties, detailed introduction of methods
JavaScript dom event object and IE event object instance Detailed explanation
JavaScript event object implementation_javascript skills
The above is the detailed content of Detailed examples of properties of jQuery event objects. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics











How to use PUT request method in jQuery? In jQuery, the method of sending a PUT request is similar to sending other types of requests, but you need to pay attention to some details and parameter settings. PUT requests are typically used to update resources, such as updating data in a database or updating files on the server. The following is a specific code example using the PUT request method in jQuery. First, make sure you include the jQuery library file, then you can send a PUT request via: $.ajax({u

Here's how to convert a MySQL query result array into an object: Create an empty object array. Loop through the resulting array and create a new object for each row. Use a foreach loop to assign the key-value pairs of each row to the corresponding properties of the new object. Adds a new object to the object array. Close the database connection.

Title: jQuery Tips: Quickly modify the text of all a tags on the page In web development, we often need to modify and operate elements on the page. When using jQuery, sometimes you need to modify the text content of all a tags in the page at once, which can save time and energy. The following will introduce how to use jQuery to quickly modify the text of all a tags on the page, and give specific code examples. First, we need to introduce the jQuery library file and ensure that the following code is introduced into the page: <

Title: Use jQuery to modify the text content of all a tags. jQuery is a popular JavaScript library that is widely used to handle DOM operations. In web development, we often encounter the need to modify the text content of the link tag (a tag) on the page. This article will explain how to use jQuery to achieve this goal, and provide specific code examples. First, we need to introduce the jQuery library into the page. Add the following code in the HTML file:

PHP functions can encapsulate data into a custom structure by returning an object using a return statement followed by an object instance. Syntax: functionget_object():object{}. This allows creating objects with custom properties and methods and processing data in the form of objects.

In C++, there are three points to note when a function returns an object: The life cycle of the object is managed by the caller to prevent memory leaks. Avoid dangling pointers and ensure the object remains valid after the function returns by dynamically allocating memory or returning the object itself. The compiler may optimize copy generation of the returned object to improve performance, but if the object is passed by value semantics, no copy generation is required.

jQuery is a popular JavaScript library that is widely used to handle DOM manipulation and event handling in web pages. In jQuery, the eq() method is used to select elements at a specified index position. The specific usage and application scenarios are as follows. In jQuery, the eq() method selects the element at a specified index position. Index positions start counting from 0, i.e. the index of the first element is 0, the index of the second element is 1, and so on. The syntax of the eq() method is as follows: $("s

In PHP, an array is an ordered sequence, and elements are accessed by index; an object is an entity with properties and methods, created through the new keyword. Array access is via index, object access is via properties/methods. Array values are passed and object references are passed.
