event.target这是注册事件时的对象，或者它的子元素。通常用于比较 event.target 和 this 来确定事件是不是由于冒泡而触发的。经常用于事件冒泡时处理事件委托。

1.this和event.target的区别：

js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素；

 <!DOCTYPE html>

   <html>

   <head>

     <style>  span, strong, p {     padding: 8px; display: block; border: 1px solid #999;  }      </style>

     <script src="http://code.jquery.com/jquery-latest.min.js"></script>

   </head>

  <body>

       <div id="log"></div>

   <div>

     <p>

      <strong><span>click</span></strong>

     </p>

   </div>

   <script>$("body").click(function(event) {

     $("#log").html("clicked: " + event.target.nodeName);  });

   </script>

     </body>

   </html>
 <!DOCTYPE html>

   <html>

   <head>

     <script src="http://code.jquery.com/jquery-latest.min.js"></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>

   <script>

     function handler(event) {

       var $target = $(event.target);

       if( $target.is("li") ) {

         $target.children().toggle();

       }

       console.log($target);

     }

     $("ul").click(handler).find("ul").hide();

   </script>

     </body>

   </html>

2.this和event.target都是dom对象，如果要使用jquey中的方法可以将他们转换为jquery对象：$(this)和$(event.target);

 <!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>

 <script type="text/javascript" src="http://www.css88.com/tool/css3Preview/jquery-1.4.2.min.js"></script>

 <script type="text/javascript">

 $(function(){

 $("li").live("click",function(event){

 $("#temp").html("clicked: " + event.target.nodeName);

 $(this).css("color","#FF3300");

 event.stopPropagation();

 })

 });

 </script>

 </head>

 <body>

 <div id="temp"></div>

 <ul class="JQ-content-box" style="padding:20px; background:#FFFFFF">

 <li>第一行

 <ul>

 <li>这是公告标题1</li>

 <li>这是公告标题2</li>

 <li>这是公告标题3</li>

 <li>这是公告标题4</li>

 </ul>

 </li>

 </ul>

 </body>

 </html>

event.stopPropagation()阻止冒泡

js中event.target,this的更多相关文章

  1. js中event.target和event.srcElement的区别

    看了很多资料绝对结果就是 firefox 下的 event.target = IE 下的 event.srcElement jquery中的event.target属性的作用是获取到出发事件的元素.j ...

  2. js中event.target

    event.srcElement从字面上可以看出来有以下关键字:事件,源     他的意思就是:当前事件的源, 我们可以调用他的各种属性 就像:document.getElementById(&quo ...

  3. JS中event.keyCode用法及keyCode对…

    js中event.keyCode用法及keyCode对照表 标签: javascriptJavaScriptJavascriptjavaScript 2012-12-11 15:11 HTML Jav ...

  4. js中event的target和currentTarget

    js 中的event是个很有用的对象,不同的浏览器,处理方式可能不一样. 我们现在只考虑标准的浏览器的情况 event是表示时间触发的产生的对象,以click事件为例. 由于冒泡的存在,event对象 ...

  5. js中event的target和currentTarget的区别

    js中的event对象包含很多有用的信息 target:触发事件的元素. currentTarget:事件绑定的元素. 两者在没有冒泡的情况下,是一样的值,但在用了事件委托的情况下,就不一样了,例如: ...

  6. js中的target与currentTarget的区别<转>

    关于js中target与currentTarget的区别的关键在于他们所处在的事件流的阶段是不一样的,target处于事件流的目标阶段,currentTarget处理事件流的捕获.处于目标阶段和冒泡阶 ...

  7. js事件 event.target

    我们购物车里,会时不时增加和删除产品时,就会绑定事件和解绑的动作. <ul> <li></li> <li></li> </ul> ...

  8. 关于js中event的target和currentTarget的区别

    今天又遇到这个问题了,总是搞不清楚target和currentTarget的区别,百度搜索的时候看到一遍文章解释得很清楚,特意记录下录,以备不时之需: target与currentTarget的区别? ...

  9. js中event.keyCode用法及keyCode对照表

    HTML 用户名:<input type="text" id="UserAccount" onKeyPress="JumpByEnter(Use ...

随机推荐

  1. LTMP手动编译安装以及全自动化部署实践（附详细代码）

    大家使用LNMP架构,一般可以理解为Linux Shell为CentOS/RadHat/Fedora/Debian/Ubuntu/等平台安装LNMP(Nginx/MySQL /PHP),LNMPA(N ...

  2. R语言画图基础参数设置

    Graphical Parameters You can customize many features of your graphs (fonts, colors, axes, titles) th ...

  3. [51NOD1405] 树的距离之和（树DP）

    题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1405 (1)我们给树规定一个根.假设所有节点编号是0-(n-1 ...

  4. 利用MDK4中的逻辑分析仪分析IO口的PWM波

    1.先设置软件仿真 ,可参看STM32不完全手册的2.4的软件仿真这一章 (原文件名:1.jpg) Example functionality:                             ...

  5. Redis事务的分析及改进

    Redis事务的分析及改进 Redis的事务特性 数据ACID特性满足了几条? 为了保持简单,redis事务保证了其中的一致性和隔离性: 不满足原子性和持久性: 原子性 redis事务在执行的中途遇到 ...

  6. Deep Learning Workbench Installation Notes

    1. ROS Indigo (30 min) Just flow ROSWiki: http://wiki.ros.org/indigo/Installation/Ubuntu NOW simply ...

  7. 打开Domion 提示： 管理员ID过期

    今天打开Domion 提示 管理员ID过期,什么操作都做不了,如是在网上趴了下,发现以下方法好用: 管理员ID文件被设置为允许超期,同时又没有其他ID文件可以用于访问服务器.如果尝试用已经超期的管理员 ...

  8. 键盘ctrl+shift不能切换输入法

    1.首先检查输入法是否被卸载,如没被卸载: 2.使用下面如图方法进行设置

  9. Redis脚本插件之————执行Lua脚本示例

    Redis在2.6推出了脚本功能,允许开发者使用Lua语言编写脚本传到Redis中执行.使用脚本的好处如下: 1.减少网络开销:本来5次网络请求的操作,可以用一个请求完成,原先5次请求的逻辑放在red ...

  10. Redis基础知识之—— 缓存应用场景

    转载原文:http://www.cnblogs.com/jinshengzhi/articles/5225718.html 一.MySql+Memcached架构的问题 Memcached采用客户端- ...