转自： 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. 关于sqlserver2012重启后ID自增1000的问题解决方案

    1. Open "SQL Server Configuration Manager" 2. Click "SQL Server Services" on the ...

  2. 问题：Maven: missing net.sf.json-lib

    问题:Maven: missing net.sf.json-lib 解决: pom.xml里加入json-lib依赖,注意要添加classifier一行,如下: 这里maven地址:http://re ...

  3. 中文版Chrome浏览器不支持12px以下字体的解决方案

    中文版Chrome浏览器不支持12px以下字体的解决方案 Chrome 27之前的中文版桌面浏览器会默认设定页面的最小字号是12px,英文版则没有限制,主要是因为chrome认为汉字小于12px就会增 ...

  4. DEDECMS 猜你喜欢

      dede升级了5.7后,有个地方要求调用相关文章,于是写下  dede:likeart  标签却无法实现关联,显示的则是所有文章. 发现原来从5.5版开始已经替换了该标签,把模板中 likeart ...

  5. PHP代码分离

    所谓的代码分离 其实只是一种思路,既然是一种思路 那就意味着他是有需求的 没有需求就没有解决方案 没有方案就不存在思路. 在这之前,我们制作 PHP 程序页面的时候.都是 HTML 和 PHP 混合写 ...

  6. CANoe 入门 Step by step系列（一）基础应用【转】

    CANoe是Vector公司的针对汽车电子行业的总线分析工具,现在我用CANoe7.6版本进行介绍,其他版本功能基本差不多. 硬件我使用的是CAN case XL. 1,CANoe软件的安装很简单,先 ...

  7. python【第十四篇】HTML与CSS初遇

    概述 HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以让浏览器 ...

  8. C语言实现五子棋简单功能

    /******************************************************************** C-4.29-1: 实现五子棋游戏 操作说明:用方向键或者& ...

  9. Javascript AMD模块化规范－备用

    AMD是"Asynchronous Module Definition"的缩写,意思是"异步模块定义". 模块定义define(id?, dependencie ...

  10. C++11的新特性lambda的小试牛刀RAII

    C/C++的资源是手动管理的 这导致程序员在申请资源时,最后用完了偶尔会忘记回收 C++语言的发明者倡导RAII,资源获取即初始化 使用对象来管理资源的生命周期,在超出作用域时,析构函数自动释放资源 ...