jquery中使用event.target的几点
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的几点的更多相关文章
- [转]jquery中使用event.target的几点
转自: http://www.cnblogs.com/12go/archive/2011/12/28/2304502.html 1.this和event.target的区别: js中事件是会冒泡的,所 ...
- Jquery 中的 event、event.target 和原生JS的 event、event.target 对比
先看下原生的 event,如图: 再看下 Jquery 中的 event,如图: 明显不一样,也符合常理,比较结果: 那么如何把 Jquery 中的 event 转成原生的呢? event.orig ...
- jquery this 和 event.target 区别
1.this和event.target的区别: js中事件是会冒泡的,所以this是可以变化的,但event.target不会变化,它永远是直接接受事件的目标DOM元素: 2.this和event.t ...
- jquery事件之event.target用法详解
1. 定义和用法: 显示哪个 DOM 元素触发了事件: $("p, button, h1, h2").click(function(event){ $("div" ...
- 在js自定义函数中使用$(event.target)代替$(this)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- 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 ...
- js中event.target和event.srcElement的区别
看了很多资料绝对结果就是 firefox 下的 event.target = IE 下的 event.srcElement jquery中的event.target属性的作用是获取到出发事件的元素.j ...
- JavaScript 中的window.event代表的是事件的状态,jquery事件对象属性,jquery中如何使用event.target
http://wenda.haosou.com/q/1373868839069215 http://kylines.iteye.com/blog/1660236 http://www.cnblogs. ...
- JS中的event 对象详解
JS中的event 对象详解 JS的event对象 Event属性和方法:1. type:事件的类型,如onlick中的click:2. srcElement/target:事件源,就是发生事件的 ...
随机推荐
- 前端性能利器——dynatrace ajax edition
因为最近的工作跟性能分析有关系,所以写个小总结. 顺带推荐两个我常用的小工具: 1.文件对比工具beyond compare,非常好用,对比.修改很简单.当然我只是用的试用版本.google一下官网下 ...
- WCF--验证码实现...
未开始待续... 未完待续...
- iOS中assign，copy，retain之间的区别以及weak和strong的区别(面试)
• copy: 用于希望保持一份传入值的拷贝,而不是值自身的情况,即把原来的对象完整的赋值到另外一地方,重新加载一内存区,一个地方变了不影响另一个地方的对象. • assign: 简单的直接赋值,相 ...
- cf319.B. Modulo Sum(dp && 鸽巢原理 && 同余模)
B. Modulo Sum time limit per test 2 seconds memory limit per test 256 megabytes input standard input ...
- 打开Excel的报错,提示:不能使用对象链接和嵌入
计算机这几天在打开Excel文档的时候,提示:不能使用对象链接和嵌入, 而且出现如下的提示:Microsoft Office Excel进程已停止工作, 每次打开Excel的时候都是同样的问题,害我跟 ...
- Android工程文件下assets文件夹与res文件夹的区别
1.assets:不会在R.java文件下生成相应的标记,assets文件夹可以自己创建文件夹,必须使用AssetsManager类进行访问,存放到这里的资源在运行打包的时候都会打入程序安装包中, 2 ...
- MongoDB的索引（三）
MongoDB的索引: 1. _id索引 该索引是大多数集合默认创建的索引,也就是说用户每插入一个数据,MongoDB会自动生成一条唯一的_id字段. 2. 单键索引 单键索引是最普通的索引,它不会自 ...
- HDU 5120 A Curious Matt(2014北京赛区现场赛A题 简单模拟）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5112 解题报告:扫一遍 #include<cstdio> #include<cstr ...
- iOS开发——UI进阶篇（五）通知、代理、kvo的应用和对比，购物车
一.通知 1.通知中心(NSNotificationCenter)每一个应用程序都有一个通知中心(NSNotificationCenter)实例,专门负责协助不同对象之间的消息通信任何一个对象都可以向 ...
- word20161128
1. accordion 英[əˈkɔ:diən] 美[əˈkɔ:rdiən] n.手风琴; adj.可折叠的; [例句]Where some people learned to play the a ...