转自： http://www.cnblogs.com/12go/archive/2011/12/28/2304502.html

1.this和event.target的区别：

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

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

比如：event.target和$(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);

$(event.target).css("color","#FF3300");

})

});

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

上面的例子如果改成使用this：

< !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();这个是阻止事件冒泡的！

声明: 本文采用 BY-NC-SA 协议进行授权 | WEB前端开发
转载请注明转自《jquery中使用event.target的几点》

[转]jquery中使用event.target的几点的更多相关文章

  1. jquery中使用event.target的几点

    jquery中使用event.target的几点 1.this和event.target的区别: js中事件是会冒泡的,所以this是可以变化的,但event.target不会变化,它永远是直接接受事 ...

  2. Jquery 中的 event、event.target 和原生JS的 event、event.target 对比

    先看下原生的 event,如图: 再看下 Jquery 中的 event,如图: 明显不一样,也符合常理,比较结果: 那么如何把 Jquery 中的 event 转成原生的呢?  event.orig ...

  3. jquery this 和 event.target 区别

    1.this和event.target的区别: js中事件是会冒泡的,所以this是可以变化的,但event.target不会变化,它永远是直接接受事件的目标DOM元素: 2.this和event.t ...

  4. jquery事件之event.target用法详解

    1. 定义和用法: 显示哪个 DOM 元素触发了事件: $("p, button, h1, h2").click(function(event){ $("div" ...

  5. 在js自定义函数中使用$(event.target)代替$(this)

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  6. jquery , find the event handler,找到jquery中的event handler

    找到 dispatch: function (e) { e = b.event.fix(e); var n, r, i, s, o, u = [], a = d.call(arguments), f ...

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

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

  8. JavaScript 中的window.event代表的是事件的状态,jquery事件对象属性,jquery中如何使用event.target

    http://wenda.haosou.com/q/1373868839069215 http://kylines.iteye.com/blog/1660236 http://www.cnblogs. ...

  9. JS中的event 对象详解

    JS中的event 对象详解   JS的event对象 Event属性和方法:1. type:事件的类型,如onlick中的click:2. srcElement/target:事件源,就是发生事件的 ...

随机推荐

  1. 《VTL语法参考指南》中文版[转]

    转自:http://blog.csdn.net/javafound/archive/2007/05/14/1607935.aspx <VTL语法参考指南>中文版 源文见 http://ve ...

  2. [转]显示文件命令：cat、more、less、tail、touch详解

    cat命令cat命令连接文件并打印到标准输出设备上.cat经常用来显示文件的内容,类似于下的type命令. 一般格式:cat [选项] 文件说明:该命令有两项功能,其一是用来显示文件的内容,它依次读取 ...

  3. 简单安装python的pip工具模块

    下载最新pip安装包 https://pypi.python.org/pypi/pip#downloads 安装 .tar.gz cd pip-.tar.gz python setup.py inst ...

  4. hg vs git ：这个世界除了svn还有别的

    最近想用版本控制软件来保存汉化文件,但又觉得SVN太麻烦,于是想到了最近较为流行的分布式版本控制工具.而Git和Mercurial(意思为水银的,于是经常缩写为Hg)自然是其中最为流行的工具.大名鼎鼎 ...

  5. em（倍）与px的区别（转载）

    在国内网站中,包括三大门户,以及"引领"中国网站设计潮流的蓝色理想,ChinaUI等都是使用了px作为字体单位.只有百度好歹做了个可调的表率.而 在大洋彼岸,几乎所有的主流站点都使 ...

  6. PANGU---Planet and Asteroid Natural scene Generation Utility

    PANGU是由英国dundee邓迪大学开发的一款行星.小行星自然环境仿真软件 https://www.star-dundee.com/products/pangu-planet-and-asteroi ...

  7. HDU 3507 Print Article 斜率优化

    Print Article Time Limit: 9000/3000 MS (Java/Others)    Memory Limit: 131072/65536 K (Java/Others)To ...

  8. 解压Windows的install.wim文件

    转自无需软件,解压Win8/Win8.1的install.wim文件 一.检查镜像版本: 镜像中包含多个版本,需要确认自己需要的版本,我的镜像路径是"F:\win8.1\sources\in ...

  9. MTTR是什么？或者说为什么别给婴儿喝白兰地

    在团队纷纷谈起工作效率的时候,对运维工作者,他们通常喜欢用「故障的平均解决时间」来衡量团队的工作效率.然而这往往是不正确的.一个迅速解决大量突发事故的团队十分高效,而实际上这更有可能意味着该团队的基础 ...

  10. Google+ 技巧四则

    玩Google+也有一段时间了,尽管需要一些特殊的手段(比如修改hosts)才能访问,尽管存在不实名可能会被删除账户的风险,但不得不说,Google+ 的确“有点意思”.同时,看了很多关于Google ...