jquery about the use of Event.target introduction

jquery about the use of Event.target introduction _jquery

Last Update:2017-01-19 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Event.target
Description: The DOM element that raises the event.

The difference between this and event.target
JS in the event is bubbling, so this can be changed, but Event.target will not change, it is always directly accept the event of the target DOM element;

This and event.target the same point
This and Event.target are DOM objects, and if you want to use the methods in Jquey, you can convert them to jquery objects: $ (this) and $ (event.target);

This reminds me of an example that I wrote before:

Copy Code code as follows:

Del Event
$ (". Del"). Bind ("click", Function (event) {
var _tmpquery=$ (this); Why should I add this sentence?
var id=$ ("Input[name= ' id ')", $ (this). Parents ("Form:first")). attr ("value");
Art.dialog.confirm (' Are you sure you want to delete the log? ', function () {
$.post ("myrun/managerlog_del.php", {id:id},function (tips) {
if (tips== ' OK ') {
Art.dialog.tips (' successful deletion ');
$ (_tmpquery.parents (' Tr:first ')). Hide (); If you do not add the first sentence, here use $ ($ (this). Parents (' Tr:first '). Hide ();
Because this here, this is not the current class= "Del" this Dom object. Instead, jquery's Ajax Configuration Object ajaxsettings. Test: Alert (This.url);
}else{
Art.dialog.tips (tips,5);
}
});
return true;
});
});

So now I can implement the hidden TR by the above code through $ (event.target), instead of the $ (_tmpquery.parents (' Tr:first ')). Hide (); In this way, the specific code is as follows:

Copy Code code as follows:

$ (". Del"). Bind ("click", Function (event) {
var _tmpquery=$ (this), this line of code can delete
var id=$ ("Input[name= ' id ')", $ (this). Parents ("Form:first")). attr ("value");
Art.dialog.confirm (' Are you sure you want to delete the log? ', function () {
$.post ("myrun/managerlog_del.php", {id:id},function (tips) {
if (tips== ' OK ') {
Art.dialog.tips (' successful deletion ');
$ (event.target). Parents (' Tr:first '). Hide ();
}else{
Art.dialog.tips (tips,5);
}
});
return true;
});
});

use of Event.target and $ (event.target)

Copy Code code as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Untitled Document </title>
<script language= "JavaScript" type= "Text/javascript" src= "Http://www.w3school.com.cn/jquery/jquery.js" >< /script>
<script type= "Text/javascript" >
$ (function () {
$ ("Li"). Live ("Click", Function (event) {
$ ("#temp"). HTML ("clicked:" + Event.target.nodeName);
$ (event.target). CSS ("Color", "#FF3300");
})
});
</script>

<body>
<div id= "Temp" ></div>
<ul class= "Jq-content-box" style= "padding:20px; Background: #FFFFFF ">
<li> First Line
<ul>
<li> This is the bulletin title 1</li>
<li> This is the bulletin title 2</li>
<li> This is the bulletin title 3</li>
<li> This is the bulletin title 4</li>
</ul>
</li>
</ul>
</body>

The example above should be changed to use this

Copy Code code as follows:

looking at an example

Copy Code code as follows:

<! DOCTYPE html>

</body>

Toggle () does not take the role of parameters:

Toggle has two functions:
Toggle ()
Toggles the visible state of the element.
If the element is visible, switch to hidden, and if the element is hidden, toggle to visible.

Toggle (FN,FN)
Switch the function you want to call each time you click.
If a matching element is clicked, the first specified function is triggered, and when the same element is clicked again, the specified second function is triggered. Successive calls to the two functions are repeated on each subsequent click.
You can use Unbind ("click") to delete.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More