转自： 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. js学习--DOM操作详解大全二（window对象）

    一.window - 计时器 1､setTimeout()可以用来在指定的时间之后单次调用函数.setTimeount(f,1000);//一秒后调用函数fclearTimeout();取消函数的执行 ...

  2. 从Image Caption Generation理解深度学习

    0. 前面的话 建丁让我写一篇深度学习相关小文章,目标读者是国内的开发者.刚接到这个任务时我是颇为忐忑的,写文章要讲究厚积薄发,如果“水之积也不厚”,“则其负大舟也无力”.因为我自知水平很有限,又不是 ...

  3. Discuz论坛下载与安装

    Part1 Discuz下载 百度“discuz下载” 2. 找到下图这里 3. 选择你需要的版本,这里我选了X3.1版 4. 选择UTF-8简体下载 这是我下载好的文件 Part2 Discuz安装 ...

  4. Apache 多站点（虚拟主机）

    普遍 apache多站点(灰色(连接一起的红色)字体 为命令) 编辑文件:httpd.conf 找到以下内容: # Virtual hosts # Include /private/etc/apach ...

  5. Android Binder机制简单了解

    Binder -- 一种进程间通信(IPC)机制, 基于OpenBinder来实现 毫无疑问, 老罗的文章是不得不看的 Android进程间通信(IPC)机制Binder简要介绍和学习计划 浅谈Ser ...

  6. 【pyhton】import math与import cmath

    import math与import cmath分别代表导入math模块和复数math模块 还有一种导入方式是 from math import sqrt 从math中单独导入sqrt 直接可以用sq ...

  7. Python学习 - 编写自己的ORM(2)

    上一篇文章简单的实现了ORM(对象关系模型),这一篇文章主要实现简单的MySQL数据库操作. 想要操作数据库,首先要建立一个数据库连接.下面定义一个创建数据库连接的函数,得到一个连接叫做engine. ...

  8. 实用lsof常用命令行

    1, 使用 lsof 命令行列出所有打开的文件 # lsof 这可是一个很长的列表,包括打开的文件和网络 上述屏幕截图中包含很多列,例如 PID.user.FD 和 TYPE 等等. FD - Fil ...

  9. c++给数组赋值

    c++的基础不牢啊.甚至是c语言也忘记了..所以以后遇到感觉怪异的语法都保存下来,没事翻翻看看 例一 void getSize(int n[]) //把数组名传给函数的形参时候 一维数组[]不用指定大 ...

  10. MySQL在创建存储过程的时候,语法正确却提示You have an error in your SQL syntax

    我在使用MySQL工具编写MySQL存储过程的时候,明明语法正确,但是却一直提示You have an error in your SQL syntax. 比如下面一段代码 CREATE PROCED ...