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. Tar命令用法详解

    tar -c: 建立压缩档案-x:解压-t:查看内容-r:向压缩归档文件末尾追加文件-u:更新原压缩包中的文件 这五个是独立的命令,压缩解压都要用到其中一个,可以和别的命令连用但只能用其中一个.下面的 ...

  2. BZOJ 1266 上学路线route（最小割）

    题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=1266 题意:给出一个无向图,每条边有长度和代价.求出1到n的最短路.之后删掉一些边使得1 ...

  3. Java-集合框架整理

    一.List 接口集合: 1.优势以及特点:有序,允许重复元素 . 2.实现类: * AarrayList 类:不同步,可变长度数组,倍增率为 1/n ; * LinkedList 类:不同步,链表结 ...

  4. iOS日常工作之常用宏定义大全

    前言: 在工作中, 很多小伙伴都会在PCH文件定义一些常用的宏,但是又怕写这些简单的宏浪费时间,又有时候忘记怎么定义了怎么办?本人在工作中也是如此.所以在这里给大家分享一些常用的宏定义,喜欢的小伙伴可 ...

  5. java基础 （java工程师入门应该了解的）

    1)建立Java开发环境 2)理解Java特性(features) 3)理解Java虚拟机软件的功能 4)描述垃圾回收概念 5)枚举实现Java代码安全方式 6)编码 编译  运行 JAav 应用程序 ...

  6. 【转载】COM多线程原理与应用

    原文:COM多线程原理与应用 目录: COM多线程原理与应用 目录: 前言: 套间: 套间的定义: 套间的分类: 套间的进入和退出: 对象的同步: 组件对象的同步: COM对象线程模型: 进程内对象线 ...

  7. Mysql错误问题记录

    ① Incorrect string value: '\xE6\x94\xBE\xE5\xA4\xA7...' for column 'name' at row 1 Query…… 原因:编码不匹配. ...

  8. python_way day13 paramiko

    paramiko 一.安装 pip3 install paramiko 二.使用 1.SSHClient 用于连接远程服务器并执行基本命令 import paramiko # 创建SSH对象 ssh ...

  9. .NET在后置代码中输入JS提示语句（背景不会变白）

    来源:http://niunan.iteye.com/blog/248256 Page.ClientScript.RegisterStartupScript(Page.GetType(), " ...

  10. C#正则表达式编程（三）：Match类和Group类用法

    前面两篇讲述了正则表达式的基础和一些简单的例子,这篇将稍微深入一点探讨一下正则表达式分组,在.NET中正则表达式分组是用Match类来代表的.首先先看一段代码: /// <summary> ...