event.target【转载】
[轉(zhuǎn)載]
1.this和event.target的區(qū)別：
js中事件是會(huì)冒泡的，所以this是可以變化的，但event.target不會(huì)變化，它永遠(yuǎn)是直接接受事件的目標(biāo)DOM元素；
2.this和event.target都是dom對(duì)象，如果要使用jquey中的方法可以將他們轉(zhuǎn)換為jquery對(duì)象：$(this)和$(event.target);
比如：event.target和$(event.target)的使用：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>event.target</title> 6 <script type="text/javascript" src="js/jquery.js"></script> 7 <script type="text/javascript"> 8 $(function(){ 9 $("li").live("click",function(event){ 10 $("#temp").html("clicked: " + event.target.nodeName); 11 $(event.target).css("color","#FF3300"); 12 }) 13 }); 14 </script> 15 </head> 16 17 <body> 18 <div id="temp"></div> 19 <ul class="JQ-content-box" style="padding:20px; background:#FFFFFF"> 20 <li>第一行 21 <ul> 22 <li>這是公告標(biāo)題1</li> 23 <li>這是公告標(biāo)題2</li> 24 <li>這是公告標(biāo)題3</li> 25 <li>這是公告標(biāo)題4</li> 26 </ul> 27 </li> 28 </ul> 29 </body> 30 </html>上面的例子如果改成使用this：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>event.target</title> 6 <script type="text/javascript" src="js/jquery.js"></script> 7 <script type="text/javascript"> 8 $(function(){ 9 $("li").live("click",function(event){ 10 $("#temp").html("clicked: " + event.target.nodeName); 11 $(this).css("color","#FF3300"); 12 event.stopPropagation(); 13 }) 14 }); 15 </script> 16 </head> 17 18 <body> 19 <div id="temp"></div> 20 <ul class="JQ-content-box" style="padding:20px; background:#FFFFFF"> 21 <li>第一行 22 <ul> 23 <li>這是公告標(biāo)題1</li> 24 <li>這是公告標(biāo)題2</li> 25 <li>這是公告標(biāo)題3</li> 26 <li>這是公告標(biāo)題4</li> 27 </ul> 28 </li> 29 </ul> 30 </body> 31 </html>注意這里的event.stopPropagation();這個(gè)是阻止事件冒泡的！
若不加event.stopPropagation 將會(huì)出現(xiàn)下列效果
?
ie下不兼容??? event.target || event.srcElement
案例：
<!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>無(wú)標(biāo)題文檔</title> <link href="css/admin.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/jquery.js"></script> <style type="text/css"> body {background:#EBF4F9 url(images/sellcard1_03.jpg) repeat-x; } .now>a{ color:#000;} //ie6不支持子選擇符 </style> </head> <body> <div class="sidesection"><h2 class="sideh2"><a href="#"><img src="images/sellcard1_06.jpg" alt="返回我的工作臺(tái)" /></a></h2> </div> <div class="sidesection"><h2 class="sideh2"><img src="images/sellcard1_09.jpg" alt="功能權(quán)限" /></h2><ul class="sideul"><li class="titleli"><a target="main" href="訂單服務(wù).html">訂單服務(wù)</a><ul><li class="titleli"><a target="main" href="處理中訂單.html">處理中訂單</a></li><li class="titleli"><a target="main" href="已完結(jié)訂單.html">已完結(jié)訂單</a></li></ul></li></ul> </div> <script type="text/javascript"> $(function(){$('.titleli').click(function(event){event.stopPropagation();$('.sideul').find('li.now').removeClass('now');$(this).addClass('now');}) }) </script> </body> </html> View Code//ie6不支持子選擇符
冒泡：點(diǎn)擊 ?“已完結(jié)訂單” ?上面的 “訂單服務(wù)” ?也會(huì)選中，并且變黑
$(this)在冒泡的情況下會(huì)發(fā)生變化，使用$(event.target)代替$(this) ? 此時(shí)單擊已完結(jié)訂單項(xiàng)的時(shí)候event.target指向的是a。而不是li
?
?
本文轉(zhuǎn)自《jquery中使用event.target的幾點(diǎn)》
轉(zhuǎn)載于:https://www.cnblogs.com/positive/p/3445577.html
總結(jié)
以上是生活随笔為你收集整理的event.target【转载】的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Sql Server临时表中插入标示列
- 下一篇： java装箱和拆箱_java自动装箱和拆