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. Shell脚本编程初体验

    原文:http://linoxide.com/linux-shell-script/guide-start-learning-shell-scripting-scratch/ 作者: Petras L ...

  2. Java程序员必备的6款最佳开发工具

    工欲善其事,必先利其器.每一个Java程序员都有其惯用的工具组件.对于Java程序员,各种有用的软件和工具泛滥成灾.初级开发人员要么找不到合适的工具,要么在寻找过程中浪费了大量的时间.下面,我将为大家 ...

  3. C#String详解

    字符串:stringLength - 字符串的长度. TrimStart() 压缩空格即消除字符串开始空格TrimEnd() 消除结尾空格Trim() 同时消除开头和结尾空格.注:中间空格不消除,因为 ...

  4. BZOJ 1835 基站选址（线段树优化DP）

    题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=1835 题意:有N个村庄坐落在一条直线上,第 i(i>1)个村庄距离第1个村庄的距离 ...

  5. C#处理控制台关闭事件

    应用场景 我们开发的控制台应用,在运行阶段很有可能被用户Ctrl+C终止或是被用户直接关闭.如果我们不希望用户通过Ctrl+C终止我们的程序,就需要对Ctrl+C或关闭事件作处理. 处理方法 在.ne ...

  6. DISPLAY_ITEM built-in in Oracle D2k Forms

    DISPLAY_ITEM built-in in Oracle D2k Forms DescriptionMaintained for backward compatibility only. For ...

  7. Smart Forms&ScriptFrom

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  8. 分区格式化mkfs

    mkfs —  build a Linux filesystem 用法举例: mkfs.ext3  /dev/sdb1 #把sdb1格式化为ext3文件系统 也可以写成 mkfs -t ext3 /d ...

  9. zoj 1010 （线段相交判断+多边形求面积）

    链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=10 Area Time Limit: 2 Seconds      Mem ...

  10. SQL——存储过程实例 调用带参数的过程（成绩输出）

    create or replace procedure test_score(input in number,output out char) is begin then begin output : ...