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

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

  1. [转]jquery中使用event.target的几点

    转自: http://www.cnblogs.com/12go/archive/2011/12/28/2304502.html 1.this和event.target的区别: js中事件是会冒泡的,所 ...

  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. dubbo框架----探索-大型系统架构设计（图解）

    对于高并发系统的架构要求: 1. 负载均衡 2.高并发 3.高可用 4.面向服务架构 (Dubbo框架使用) 5.分布式缓存 (redis分布式缓存) 6.分布式全文检索 (solr分分布式全文检索) ...

  2. web开发前端学习

    bootstrap:  http://www.bootcss.com/ bootstrap:   http://bootsnipp.com/snippets/featured/single-colum ...

  3. 关于外部引用JS，中文乱码的问题

    asp.net 页面默认编码为UTF-8, 如果js嵌套写在asp.net中,不会导致中文乱码,因为他们具有相同的编码 外部引用js由于编码格式与asp.net的编码不同,javascript编码默认 ...

  4. Android快速开发系列 10个常用工具类

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38965311,本文出自[张鸿洋的博客] 打开大家手上的项目,基本都会有一大批的辅 ...

  5. iOS开发——UI进阶篇（十一）应用沙盒，归档，解档，偏好设置，plist存储，NSData，自定义对象归档解档

    1.iOS应用数据存储的常用方式XML属性列表(plist)归档Preference(偏好设置)NSKeyedArchiver归档(NSCoding)SQLite3 Core Data 2.应用沙盒每 ...

  6. 服务器如何处理http请求

    1.需求 了解服务端如何处理http请求,了解基本的处理流程 2.实战 处理http请求分为7个步骤 2.1 Tcp连接 建立一条tcp链接,(若之前不存在持久链接keep-alive),把客户端的i ...

  7. 当webshell不可执行cmshell时 （菜刀的安全模式!）可用此脚本突破执行cmd命令

    <?php /* ============== */ error_reporting(0); ini_set('max_execution_time',0); // -------------- ...

  8. 51Nod 1380 夹克老爷的逢三抽一

    Description 一开始有一个环,可以选择删除一个元素获得他的权值,同时删除与它相邻的两个元素,其他元素重新形成环,问能获得的最大价值. Sol 堆+贪心. 一开始从堆中加入所有元素,然后取出一 ...

  9. 【Other】最近正在看的

    待看: https://my.oschina.net/yunfound/blog/141222 https://www.zhihu.com/question/22925358 http://study ...

  10. 第三方登录（QQ登录）开发流程详解

    原文:http://www.cnblogs.com/it-cen/p/4338202.html 近排由于工作的繁忙,已经一个星期没写博文做分享了,接下来我对网站接入第三方登录----QQ登录的实现逻辑 ...