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. [Objective-C]__bridge,__bridge_retained和__bridge_transfer的意思，区别与使用

    使用ARC能帮我们减轻不少内存管理方面的负担,尤其是对用惯了Java的程序员来说.但是像我这种Java基础本身就不牢固,做了两年的iOS已经习惯手动管理内存的半吊子,使用ARC还是经常碰壁. 对于CF ...

  2. word2007

      word2007   word2007图标   word2007边框和底纹   word2007扫描图片   word2007剪贴画   word2007图片   word2007页面视图   w ...

  3. 【leetcode❤python】191. Number of 1 Bits

    #-*- coding: UTF-8 -*- class Solution(object):    def hammingWeight(self, n):        if n<=0:retu ...

  4. getbyclass

    其实以前我偷偷学习正则表达式的时候,写过一个getbyclass的方法,最近翻了翻到处都是错,或者好多重复的,没有用的 代码,于是显得没事我就把这个精简了一下,其实这个方法现在我觉得也是有问题的,问题 ...

  5. 【原文】前端程序员必须知道的高性能Javascript知识

    原文:前端程序员必须知道的高性能Javascript知识 想必大家都知道,JavaScrip是全栈开发语言,浏览器,手机,服务器端都可以看到JS的身影. 本文会分享一些高效的JavaScript的最佳 ...

  6. JavaWeb（一）

    Web应用程序开发是目前软件开发领域的三大方向之一. 静态网页与动态网页 静态网页 表现形式:网页的内容是固定的,不会更新: 使用的技术:HTML,CSS 动态网页 表现形式:网页中的内容通过程序动态 ...

  7. JAVA开发--U盘EXE恢复工具

    原理比较简单,在学校机房U盘总被感染,写一个工具来方便用 package com.udiskrecover; import java.awt.Container; import java.awt.Fl ...

  8. 屏幕序列Screen Sequences

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

  9. ironpython 2.75 在c#中的使用

    ironpython的介绍请自行搜索. 一句话,python是一个类似lua js的动态预言.ironpython是在net环境执行python的类库. 效果:在网站中调用一个python文件test ...

  10. java乱码问题（转）

    参考: http://blog.csdn.net/beijiguangyong/article/details/7414247 http://www.zhihu.com/question/202126 ...