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. 4-JS对象

    js中哪些是对象 除了字符串.数字.false.true.null和undefined之外,JavaScript中的值都是对象 原型(prototype) 每一个JavaScript对象(null除外 ...

  2. ios沙盒路径

    http://www.cnblogs.com/ios-wmm/p/3299695.html iOS沙盒路径的查看和使用 NSString *path = NSHomeDirectory();//主目录 ...

  3. KDTree

    学习链接:http://www.cnblogs.com/eyeszjwang/articles/2429382.html 下面实现的kdtree支持以下操作:(1) 插入一个节点(2) 插入n个节点( ...

  4. JaveScript变量作用域说明

    JaveScript变量作用域说明     一:将var类型的变量视为变量,不带var类型的变量视为常量(但是注意php的常量不可以重新定义,而javascript中不带var类型的变量可以重新定义) ...

  5. FJNU 1153 Fat Brother And XOR（胖哥与异或）

    FJNU 1153 Fat Brother And XOR(胖哥与异或) Time Limit: 1000MS   Memory Limit: 257792K [Description] [题目描述] ...

  6. codevs 1294 全排列 next_permuntation

    #include<bits/stdc++.h> using namespace std; #define ll long long #define pi (4*atan(1.0)) #de ...

  7. CSS笔记（三）背景

    CSS 允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果. 参考:http://www.w3school.com.cn/css/css_background.asp 背景色 p {backg ...

  8. SynchronizationContext的研究之一（非WPF及Forms）

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  9. 杭电1466------简单的dp

    题目: http://acm.hdu.edu.cn/showproblem.php?pid=1466 #include<iostream> #include<cstdio> # ...

  10. FLASH CC 2015 CANVAS （五）loading的制作

    注意 此贴 为个人边“开荒”边写,所以不保证就是最佳做法,也难免有错误! 正式教程会在后续开始更新 AS3的loading一般我们都写在时间轴第一帧,但是FLASH CC CANVAS的导出项目的lo ...