This document describes how to use event.tar get in jqueryevent and some examples. If you need to know more about it, refer.
Show which DOM element triggers the event:
| The Code is as follows: |
Copy code |
$ ("P, button, h1, h2"). click (function (event ){
$ ("Div" ).html ("Triggered by a" + event.tar get. nodeName + "element .");
}); |
Definition and usage
The target attribute specifies which DOM element triggers the event.
Syntax
Event.tar get parameter description
Event is required. Specifies the event to be checked. This event parameter comes from the event binding function.
This reminds me of an example previously written:
| The Code is as follows: |
Copy code |
// 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:
| The Code is as follows: |
Copy code |
$ (". 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)
| The Code is as follows: |
Copy code |
<! 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 = "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
| The Code is as follows: |
Copy code |
<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.
| The Code is as follows: |
Copy code |
<! DOCTYPE html>
<Html>
<Head> <Script language = "JavaScript" type = "text/JavaScript" src = "/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> |
For example, click search to hide automatically
| The Code is as follows: |
Copy code |
$ (Document). ready (function (){
$ ("*"). Click (function (event ){
If(event.tar get. id! = '_ Search_input '){
Var newS = document. getElementById ("remindWordTable ");
NewS. style. display = "none ";
}
});
});
Event.tar get. id
Event.tar get. nodeName If(objects (event.tar get). hasClass ('dd ')) |
