event.target【转载】
生活随笔
收集整理的這篇文章主要介紹了
event.target【转载】
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
[轉載]
1.this和event.target的區別：
js中事件是會冒泡的，所以this是可以變化的，但event.target不會變化，它永遠是直接接受事件的目標DOM元素；
2.this和event.target都是dom對象，如果要使用jquey中的方法可以將他們轉換為jquery對象：$(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>這是公告標題1</li> 23 <li>這是公告標題2</li> 24 <li>這是公告標題3</li> 25 <li>這是公告標題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>這是公告標題1</li> 24 <li>這是公告標題2</li> 25 <li>這是公告標題3</li> 26 <li>這是公告標題4</li> 27 </ul> 28 </li> 29 </ul> 30 </body> 31 </html>注意這里的event.stopPropagation();這個是阻止事件冒泡的！
若不加event.stopPropagation 將會出現下列效果
?
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>無標題文檔</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="返回我的工作臺" /></a></h2> </div> <div class="sidesection"><h2 class="sideh2"><img src="images/sellcard1_09.jpg" alt="功能權限" /></h2><ul class="sideul"><li class="titleli"><a target="main" href="訂單服務.html">訂單服務</a><ul><li class="titleli"><a target="main" href="處理中訂單.html">處理中訂單</a></li><li class="titleli"><a target="main" href="已完結訂單.html">已完結訂單</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不支持子選擇符
冒泡：點擊 ?“已完結訂單” ?上面的 “訂單服務” ?也會選中，并且變黑
$(this)在冒泡的情況下會發生變化，使用$(event.target)代替$(this) ? 此時單擊已完結訂單項的時候event.target指向的是a。而不是li
?
?
本文轉自《jquery中使用event.target的幾點》
轉載于:https://www.cnblogs.com/positive/p/3445577.html
總結
以上是生活随笔為你收集整理的event.target【转载】的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Sql Server临时表中插入标示列
- 下一篇： java装箱和拆箱_java自动装箱和拆