[转]jquery中使用event.target的几点
转自： 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的几点的更多相关文章
- jquery中使用event.target的几点
jquery中使用event.target的几点 1.this和event.target的区别: js中事件是会冒泡的,所以this是可以变化的,但event.target不会变化,它永远是直接接受事 ...
- 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:事件源,就是发生事件的 ...
随机推荐
- 【POJ1811】【miller_rabin + pollard rho + 快速乘】Prime Test
Description Given a big integer number, you are required to find out whether it's a prime number. In ...
- CentOS 6.4 64位 安装 mysql 5.6.24
下载安装包 由于官网访问及版本选择下载不太方便,使用 suho 的源进行下载 http://mirrors.sohu.com/mysql/MySQL-5.6/ 下载如下三个安装包: MySQL-ser ...
- java 整体字体样式设置
两种方式: 1.UIManager.put("Button.font", new Font("MS UI Gothic", Font.PLAIN, 24)) ...
- LVS原理详解及部署之二：LVS原理详解（3种工作方式8种调度算法）
一.集群简介 什么是集群 计算机集群简称集群是一种计算机系统,它通过一组松散集成的计算机软件和/或硬件连接起来高度紧密地协作完成计算工作.在某种意义上,他们可以被看作是一 台计算机.集群系统中的单个计 ...
- Python 关于正负无穷float(‘inf’)的一些用法
Python中可以用如下方式表示正负无穷: float("inf"), float("-inf") 利用 inf 做简单加.乘算术运算仍会得到 inf > ...
- 【转】mysqldump
原文地址:http://blog.chinaunix.net/uid-16844903-id-3411118.html 导出 导出全库备份到本地的目录 mysqldump -u$USER -p$PAS ...
- 什么是redis数据库?
新公司的第一个项目让用redis.之前没接触过,所以从网上找些文章,学习理解一下 原链接:http://baike.so.com/doc/5063975-5291322.html 什么是redis ...
- 金山网络2014春季Android实习生招聘-成都站-笔试第二题
一个文件名为input.txt的文件当中,每一行都有一个单词,要求统计单词出现的频率,并且按照从小到大出现次数打印,次数相同的按照首字母顺序排序. package jinshanwangluo.exa ...
- jQuery遍历对象、数组、集合实例
1.jquery 遍历对象 复制代码代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" ...
- 如何为企业选择最理想的Linux服务器系统？
[2013年10月12日 51CTO外电头条]什么样的Linux服务器最合适您的企业?简言之,它需要为员工带来工作所需的理想支持效果. 相对于成百上千种Linux桌面系统,Linux服务器系统的数量其 ...