Shows which DOM element triggered the event:
| The code is as follows |
Copy Code |
$ ("p, button, H1, H2"). Click (Function (event) {
$ ("div"). html ("triggered by a" + Event.target.nodeName + "element.");
}); |
Definitions and usage
The target property stipulates which DOM element triggers the event.
Grammar
Event.target parameter Description
Event required. Specify the events that need to be checked. This event parameter comes from the event-binding function.
This reminds me of an example that I wrote before:
| code is as follows |
copy code |
| //del Event
$ (". Del "). Bind (" click ", Function (event) {
var _tmpquery=$ ( this); Why do I have to 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 (' successful deletion ');
$ (_tmpquery.parents (' Tr:first ')). Hide ()//If not the first sentence, here use $ ($ (this). Parents (' Tr:first '). Hide (), then do not 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:
| The code is as follows |
Copy Code |
$ (". 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)
| 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 ">
<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"). 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
| The code is as follows |
Copy Code |
<script type= "Text/javascript" >
$ (function () {
$ ("Li"). Live ("Click", Function (event) {
$ ("#temp"). HTML ("clicked:" + Event.target.nodeName);
$ (this). CSS ("Color", "#FF3300");
Event.stoppropagation ();
})
});
</script> |
Looking at an example
| The code is as follows |
Copy Code |
<! DOCTYPE html>
<script language= "JavaScript" type= "Text/javascript" src= "/jquery.js" ></script>
<script>
$ (document). Ready (function () {
function Handler (event) {
var $target = $ (event.target);
if ($target. is ("Li")) {
$target. Children (). Toggle ();
}
}
$ ("ul"). Click (Handler). FIND ("ul"). Hide ()//You can see from here that find is traversed only in the descendants, excluding itself.
});
</script>
<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>
|
For example, click Search to automatically hide
| code is as follows |
copy code |
| $ (document) . Ready (function () {
$ ("*"). Click (Function (event) {
if (event.target.id!= ' _search_input ') {
var News=document.getelementbyid ("Remindwordtable");
news.style.display= "None";
}
});
});
Event.target.id
Event.target.nodeName If ($ (event.target). Hasclass (' DD ')) |
