js中event.target,this
event.target这是注册事件时的对象,或者它的子元素。通常用于比较 event.target 和 this 来确定事件是不是由于冒泡而触发的。经常用于事件冒泡时处理事件委托。
1.this和event.target的区别:
js中事件是会冒泡的,所以this是可以变化的,但event.target不会变化,它永远是直接接受事件的目标DOM元素;
<!DOCTYPE html>
<html>
<head>
<style> span, strong, p { padding: 8px; display: block; border: 1px solid #999; } </style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div id="log"></div>
<div>
<p>
<strong><span>click</span></strong>
</p>
</div>
<script>$("body").click(function(event) {
$("#log").html("clicked: " + event.target.nodeName); });
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<ul>
<li>item 1
<ul>
<li>sub item 1-a</li>
<li>sub item 1-b</li>
</ul>
</li>
<li>item 2
<ul>
<li>sub item 2-a</li>
<li>sub item 2-b</li>
</ul>
</li>
</ul>
<script>
function handler(event) {
var $target = $(event.target);
if( $target.is("li") ) {
$target.children().toggle();
}
console.log($target);
}
$("ul").click(handler).find("ul").hide();
</script>
</body>
</html>
2.this和event.target都是dom对象,如果要使用jquey中的方法可以将他们转换为jquery对象:$(this)和$(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);
$(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()阻止冒泡
js中event.target,this的更多相关文章
- js中event.target和event.srcElement的区别
看了很多资料绝对结果就是 firefox 下的 event.target = IE 下的 event.srcElement jquery中的event.target属性的作用是获取到出发事件的元素.j ...
- js中event.target
event.srcElement从字面上可以看出来有以下关键字:事件,源 他的意思就是:当前事件的源, 我们可以调用他的各种属性 就像:document.getElementById(&quo ...
- JS中event.keyCode用法及keyCode对…
js中event.keyCode用法及keyCode对照表 标签: javascriptJavaScriptJavascriptjavaScript 2012-12-11 15:11 HTML Jav ...
- js中event的target和currentTarget
js 中的event是个很有用的对象,不同的浏览器,处理方式可能不一样. 我们现在只考虑标准的浏览器的情况 event是表示时间触发的产生的对象,以click事件为例. 由于冒泡的存在,event对象 ...
- js中event的target和currentTarget的区别
js中的event对象包含很多有用的信息 target:触发事件的元素. currentTarget:事件绑定的元素. 两者在没有冒泡的情况下,是一样的值,但在用了事件委托的情况下,就不一样了,例如: ...
- js中的target与currentTarget的区别<转>
关于js中target与currentTarget的区别的关键在于他们所处在的事件流的阶段是不一样的,target处于事件流的目标阶段,currentTarget处理事件流的捕获.处于目标阶段和冒泡阶 ...
- js事件 event.target
我们购物车里,会时不时增加和删除产品时,就会绑定事件和解绑的动作. <ul> <li></li> <li></li> </ul> ...
- 关于js中event的target和currentTarget的区别
今天又遇到这个问题了,总是搞不清楚target和currentTarget的区别,百度搜索的时候看到一遍文章解释得很清楚,特意记录下录,以备不时之需: target与currentTarget的区别? ...
- js中event.keyCode用法及keyCode对照表
HTML 用户名:<input type="text" id="UserAccount" onKeyPress="JumpByEnter(Use ...
随机推荐
- SqlSever基础 order by之后再orderby,双重排序,对排序好的数据中再次进行排序
镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...
- L0/L1/L2范数的联系与区别
L0/L1/L2范数的联系与区别 标签(空格分隔): 机器学习 最近快被各大公司的笔试题淹没了,其中有一道题是从贝叶斯先验,优化等各个方面比较L0.L1.L2范数的联系与区别. L0范数 L0范数表示 ...
- Django1.9 Python3.4出现Error loading MySQLdb
linux Errorloading MySQLdb module: No module named MySQLdb 这是因为目前 MySQLdb 还不支持 python3.x ,开源无人维护哈 之前 ...
- [CF733D]Kostya the Sculptor(贪心)
题目链接:http://codeforces.com/contest/733/problem/D 题意:给n个长方体,允许最多两个拼在一起,拼接的面必须长宽相等.问想获得最大的内切圆的长方体序号是多少 ...
- Java——FIle:
1.读取文件夹中的文件 /** * 读取图片文件 * @param imgPath 文件所在的文件夹绝对路径 * @return * @throws FileNotFoundException */ ...
- npm 打包 electron app 报错问题
在进行desktop打包过程中,遇到如下报错: 0 info it worked if it ends with ok 1 verbose cli [ 'C:\\Program Files\\node ...
- java 解析汉字拼音
pinyin4j的使用很方便,一般转换只需要使用PinyinHelper类的静态工具方法即可: String[] pinyin = PinyinHelper.toHanyuPinyinStrin ...
- SAP接口编程 之 JCo3.0系列(04) : 会话管理
在SAP接口编程之 NCo3.0系列(06) : 会话管理 这篇文章中,对会话管理的相关知识点已经说得很详细了,请参考.现在用JCo3.0来实现. 1. JCoContext 如果SAP中多个函数需要 ...
- eclipse 安装git
1.安装Git 首先安装Git.这里只讲Windows环境下安装Git方法. 从Git下载git的Windows安装文件,一路Next到选择安装组件这一步: 选上Git Bash Here这一项,这样 ...
- mysql 选择性高
选择性高是指能够过滤掉更多不需要的记录.举例来说,在一个公司里,使用性别只能过滤掉一半的人,而使用姓名一般可以过滤掉99%以上的人,因为会有重名情况,而使用员工号,选出一个,其他的全部过滤掉.也就是说 ...