1.this和event.target的区别：

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

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

比如：event.target和$(event.target)的使用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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();这个是阻止事件冒泡的

jq中的evet.target的更多相关文章

  1. jq中数组应用的错误

    js中数组可以这样使用: <ul id="ul"> <li value="1">s</li> <li>f< ...

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

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

  3. JQ中mouseover和mouseenter的区别

    我最近也在学习JQuery,所以最近对JQ中的一些小问题进行总结,方便学习. 在对于刚开始学习JQ的初学者来说,mouseover事件和mouseenter事件总是傻傻分不清楚,毕竟刚开始学习的时候, ...

  4. JS模式：jq中简单的模式--》采摘自js设计（tomxu_version）

    <!DOCTYPE html> <html> <head> <title></title> </head> <body&g ...

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

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

  6. JQ中的clone()方法与DOM中的cloneNode()方法

    JQ中的clone()方法与DOM中的cloneNode()方法 cloneNode()定义和用法 cloneNode()方法创建节点的拷贝,并返回该副本. 语法: node.cloneNode(de ...

  7. jq中的ajax

    jq对ajax进行了封装,在jq中$.ajax()方法是最底层的方法,第二层是load() , get() , post()方法,第三层是$.getScript()和$.getJSON().基本第二种 ...

  8. 通过java程序调用ant build.xml配置文件中指定的target

    一.概述 通过ant实现项目的自动化部署,jar包生成,替换,tomcat关停.启动,查看项目日志: 通过java程序调用已编辑好的ant脚本build.xml配置文件中指定的target: 文中文件 ...

  9. jq中的$操作符与其他js框架冲突

    解决办法: jq中存在方法:noConflict() 可返回对 jQuery 的引用. 使用示例: var jq = $.noConflict(); jq(document).ready(functi ...

随机推荐

  1. laravel常用拓展库

    1.laravel-dompdf:pdf生成器 git地址:https://github.com/barryvdh/laravel-dompdf 2.

  2. Spring 框架理论基础

    一. IOC 控制反转 概念解释:当我需要一个资源时,容器已经帮我准备好,我只需要接受就可以. // 加载 IOC 容器 ApplicationContext ac = new ClassPathXm ...

  3. ios xcode中所有自带的字体如下(最好结合NSMutableAttributedString相结合使用)

    // 打印系统中所有字体的类型名字 NSArray *familyNames = [UIFont familyNames]; for(NSString *familyName in familyNam ...

  4. SVN的学习以及使用！

    什么是版本控制? 版本控制是记录一个或若干文件内容变化的系统.以便将来查阅特定版本修订情况. 版本控制,就像是一本历史书,记录了软件版本的迭代过程. 为什么需要"版本控制" 需要清 ...

  5. MyBatis和SpringMVC集成事务在Junit测试下有效但是在实际项目无效的问题

    一.问题说明 项目框架采用SSM,集成了事务回滚(方式见下),在单元测试的时候,测试事务是有效的,但是在实际项目上线的时候,却没有效果. 二.集成方式 application-mybatis.xml( ...

  6. YII2 运行概述(Overview)

    运行机制概述 每一次 Yii 应用开始处理 HTTP 请求时,它都会进行一个近似的流程. 用户提交指向 入口脚本 web/index.php 的请求. 入口脚本会加载 配置数组 并创建一个 应用 实例 ...

  7. Codeforces Round #354 (Div. 2)_Vasya and String(尺取法)

    题目连接:http://codeforces.com/contest/676/problem/C 题意:一串字符串,最多改变k次,求最大的相同子串 题解:很明显直接尺取法 #include<cs ...

  8. LeetCode OJ 292.Nim Gam148. Sort List

    Sort a linked list in O(n log n) time using constant space complexity. 排序问题是我们遇到的一个老问题,从大一开始我们就学习了各种 ...

  9. HDU2519:新生晚会

    Problem Description 开学了,杭电又迎来了好多新生.ACMer想为新生准备一个节目.来报名要表演节目的人很多,多达N个,但是只需要从这N个人中选M个就够了,一共有多少种选择方法?   ...

  10. Git 操作标签的一些命令

    如果标签打错了,也是可以删除: $ git tag -d v0.1Deleted tag 'v0.1' (was d96a49b) 如果要推送某个标签到远程,使用git push orign tagn ...