Home > Developer > JavaScript
Event.tar get
Description: DOM element that triggers the event.
Thisvs event.tar get
In JS, thisks can be changed, but event.tar get will not change. It will always be the target DOM element for directly accepting events;
Similarities between thisand event.tar get
Thisand event.tar get are both dom objects. If you want to use the methods in jquey, you can convert them to jquery objects: sums (this(and counts (event.tar get );
This reminds me of an example previously written:
Copy codeThe Code is 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 this log? ', Function (){
$. Post ("myRun/managerlog_del.php", {id: id}, function (tips ){
If (tips = 'OK '){
Art. dialog. tips ('deleted successfully ');
$ (_ TmpQuery. parents ('tr: first ')). hide (); // if the first sentence is not added, $ (this) is used here ). parents ('tr: first ')). hide (); will not hide
// Because this is not the current class = "del" DOM object. It is the AJAX configuration object ajaxSettings of jQuery. Test: alert (this. url );
} Else {
Art. dialog. tips (tips, 5 );
}
});
Return true;
});
});
Now, we can hide the encoding code by using the encoding (event.tar get) method instead of using $ (_ tmpQuery. parents ('tr: first '). hide ();). The specific code is as follows:
Copy codeThe Code is as follows:
$ (". Del"). bind ("click", function (event ){
// Var _ tmpQuery = $ (this); this line of code can be deleted
Var id = $ ("input [name = 'id']", $ (this). parents ("form: first"). attr ("value ");
Art. dialog. confirm ('Are you sure you want to delete this log? ', Function (){
$. Post ("myRun/managerlog_del.php", {id: id}, function (tips ){
If (tips = 'OK '){
Art. dialog. tips ('deleted successfully ');
Parameters (event.tar get). parents ('tr: first '). hide ();
} Else {
Art. dialog. tips (tips, 5 );
}
});
Return true;
});
});
Use of event.targetand events (event.tar get)
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<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" cmd.html ("clicked:" + event.tar get. nodeName );
((Event.target).css ("color", "# FF3300 ");
})
});
</Script>
</Head>
<Body>
<Div id = "temp"> </div>
<Ul class = "JQ-content-box" style = "padding: 20px; background: # FFFFFF">
<Li> first line
<Ul>
<Li> This is announcement Title 1 </li>
<Li> This is announcement Title 2 </li>
<Li> This is announcement Title 3 </li>
<Li> This is announcement Title 4 </li>
</Ul>
</Li>
</Ul>
</Body>
</Html>
In the preceding example
Copy codeThe Code is as follows:
<Script type = "text/javascript">
$ (Function (){
$ ("Li"). live ("click", function (event ){
$ ("# Temp" cmd.html ("clicked:" + event.tar get. nodeName );
((This).css ("color", "# FF3300 ");
Event. stopPropagation ();
})
});
</Script>
Let's look at an example.
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Script language = "JavaScript" type = "text/JavaScript" src = "http://www.w3school.com.cn/jquery/jquery.js"> </script>
<Script>
$ (Document). ready (function (){
Function handler (event ){
Var $ target = condition (event.tar get );
If ($ target. is ("li ")){
$ Target. children (). toggle ();
}
}
$ ("Ul"). click (handler). find ("ul"). hide (); // from here, we can also see that find only traverses in future generations, excluding itself.
});
</Script>
</Head>
<Body>
<Ul>
<Li> item 1
<Ul>
<Li> sub item 1-a </li>
<Li> sub item 1-b </li>
</Ul>
</Li>
<Li> item 2
<Ul>
<Li> sub item 2-a </li>
<Li> sub item 2-b </li>
</Ul>
</Li>
</Ul>
</Body>
</Html>
Toggle () does not contain parameters:
Toggle has two functions:
Toggle ()
Switches the visible state of an element.
If the element is visible, switch to hidden. If the element is hidden, switch to visible.
Toggle (fn, fn)
Switch the function to be called each time you click.
If a matching element is clicked, the specified first function is triggered. When the same element is clicked again, the specified second function is triggered. The subsequent clicks repeatedly call the two functions.
You can use unbind ("click") to delete it.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
