- 浏览: 3292037 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (567)
- Web前端-html/表单 (19)
- Web前端-CSS (24)
- Web前端-CSS框架 (4)
- Web前端-JS语言核心 (50)
- Web前端-JS客户端 (26)
- nodejs生态+grunt (10)
- seajs和requirejs (9)
- backbone等框架 (7)
- 模板基础 (7)
- Web前端-deps(不改动) (6)
- Web前端-component (10)
- Web前端-jquery-plugin (13)
- 浏览器兼容性 (6)
- Web前端-使用jQuery (25)
- Web前端-使用jqueryui (6)
- Web前端-性能优化 (3)
- Web协议-HTTP (6)
- ExtJS (13)
- PHP (22)
- PHP面向对象 (4)
- PHP扩展-SOAP (6)
- PHP扩展-curl (4)
- PHP与HTML(导出) (5)
- PHP扩展-综合 (7)
- mysql基础应用 (18)
- 技术心情 (18)
- 算法和面试题 (17)
- 工具(开发)使用 (36)
- memcached原理 (2)
- session和cookie (4)
- UML (2)
- Web前端_FusionCharts (5)
- Web前端_Flex (4)
- Web前端_JSP (3)
- JavaSE (10)
- JavaEE (4)
- tomcat (2)
- Servlet开发 (3)
- Spring开发 (1)
- REST相关 (2)
- 大访问量、高并发 (2)
- 网络编程 (1)
- YII (21)
- linux命令和内核 (12)
- yii与数据库 (10)
- yii与表单 (12)
- yii view层 (1)
- perl (7)
- yii扩展 (7)
- shell (4)
- photoshop (7)
- 视觉设计 (2)
- 我关注的名人在路上 (4)
- 1-自学能力 (1)
- 2-人际沟通能力 (3)
- 3-职业规划能力 (7)
- 4-项目管理能力 (2)
- python (3)
- django (4)
- Mysql高级应用 (6)
- prototype.js (4)
- Web系统安全 (1)
- Web前端-mobile (2)
- egret (6)
- jQuery源码分析 (5)
- fis (4)
最新评论
-
yzq21056563:
感谢作者分享~请教下,http://www.lisa33xia ...
CSS基础:text-overflow:ellipsis溢出文本 -
u012206458:
$.ajax的error,complete,success方法 -
DEMONU:
谢谢,虽然不能给你赞助,但是要给你顶
mysql中key 、primary key 、unique key 与index区别 -
njupt_tolmes:
阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿滕庆亚 ...
CSS基础:text-overflow:ellipsis溢出文本 -
zenmshuo:
用过SpreadJS,也包含数据可视化的图表
推荐几个web中常用js图表插件
作者:zccst
2014-6-25
今天看了jQuery手册,发现jQuery的事件对象模块也有一个currentTarget,始终指向this。
所以结论是:原生的currentTarget与jQuery的currentTarget完全不是一回事。要重点区别对待。
2014-6-17
target与currentTarget的区别?
通俗易懂的说法:
比如说现在有A和B,
A.addChild(B)
A监听鼠标点击事件
那么当点击B时,target是B,currentTarget是A
也就是说,currentTarget始终是监听事件者,而target是事件的真正发出者
总结:
target在事件流的目标阶段;currentTarget在事件流的捕获,目标及冒泡阶段。只有当事件流处在目标阶段的时候,两个的指向才是一样的, 而当处于捕获和冒泡阶段的时候,target指向被单击的对象而currentTarget指向当前事件活动的对象(一般为父级)。
结论:由于要兼容IE浏览器,所以一般都在冒泡阶段来处理事件,此时target和currentTarget有些情况下是不一样的。
第一个地方
IE7-8下使用$(target).zIndex();可以获取到
IE7-8下使用$(e.currentTarget).zIndex();获取不到,可能是IE下既没有target,也没有currentTarget
测试一把(当然在IE浏览器中)
第二个地方:
使用$(arguments[2].currentTarget).zIndex();也能获取到
预计结论:后者是使用jquery绑定事件的,jQuery内部让currentTarget表示当前元素。类似于FF/Chrome下的target,和IE下的srcElement。
网上的例子:
对象this、currentTarget和target
在事件处理程序内部,对象this始终等于currentTarget的值,而target则只包含事件的实际目标。如果直接将事件处理程序指定给了目标元素,则this、currentTarget和target包含相同的值。来看下面的例子:
这个例子检测了currentTarget和target与this的值。由于click事件的目标是按钮,一次这三个值是相等的。如果事件处理程序存在于按钮的父节点中,那么这些值是不相同的。再看下面的例子:
当单击这个例子中的按钮时,this和currentTarget都等于document.body,因为事件处理程序是注册到这个元素的。然而,target元素却等于按钮元素,以为它是click事件真正的目标。由于按钮上并没有注册事件处理程序,结果click事件就冒泡到了document.body,在那里事件才得到了处理。
在需要通过一个函数处理多个事件时,可以使用type属性。例如:
如果您觉得本文的内容对您的学习有所帮助,您可以微信:
2014-6-25
今天看了jQuery手册,发现jQuery的事件对象模块也有一个currentTarget,始终指向this。
所以结论是:原生的currentTarget与jQuery的currentTarget完全不是一回事。要重点区别对待。
2014-6-17
target与currentTarget的区别?
通俗易懂的说法:
比如说现在有A和B,
A.addChild(B)
A监听鼠标点击事件
那么当点击B时,target是B,currentTarget是A
也就是说,currentTarget始终是监听事件者,而target是事件的真正发出者
总结:
target在事件流的目标阶段;currentTarget在事件流的捕获,目标及冒泡阶段。只有当事件流处在目标阶段的时候,两个的指向才是一样的, 而当处于捕获和冒泡阶段的时候,target指向被单击的对象而currentTarget指向当前事件活动的对象(一般为父级)。
结论:由于要兼容IE浏览器,所以一般都在冒泡阶段来处理事件,此时target和currentTarget有些情况下是不一样的。
第一个地方
function(e){ var target = e.target || e.srcElement;//兼容ie7,8 if(target){ zIndex = $(target).zIndex(); } } //往上追查调用处 enterprise.on(img,'click',enterprise.help.showHelp);
IE7-8下使用$(target).zIndex();可以获取到
IE7-8下使用$(e.currentTarget).zIndex();获取不到,可能是IE下既没有target,也没有currentTarget
测试一把(当然在IE浏览器中)
<input type="button" id="btn1" value="我是按钮" /> <script type="text/javascript"> btn1.attachEvent("onclick",function(e){ alert(e.currentTarget);//undefined alert(e.target); //undefined alert(e.srcElement); //[object HTMLInputElement] }); </script>
第二个地方:
$(element).on('click',jQuery.proxy(this, 'countdownHandler', this.name, this.nameAlert)); function countdownHandler(name, nameAlert){ var _this = this, zIndex = 1999;//获取不到target时的默认值 if(arguments[2] && arguments[2].currentTarget && $(arguments[2].currentTarget)){ zIndex = $(arguments[2].currentTarget).zIndex(); if(zIndex){ zIndex += 1; }else{//获取不到z-index值 zIndex = 1999; } } }
使用$(arguments[2].currentTarget).zIndex();也能获取到
预计结论:后者是使用jquery绑定事件的,jQuery内部让currentTarget表示当前元素。类似于FF/Chrome下的target,和IE下的srcElement。
网上的例子:
<div id="outer" style="background:#099"> click outer <p id="inner" style="background:#9C0">click inner</p> <br> </div> <script type="text/javascript"> function G(id){ return document.getElementById(id); } function addEvent(obj, ev, handler){ if(window.attachEvent){ obj.attachEvent("on" + ev, handler); }else if(window.addEventListener){ obj.addEventListener(ev, handler, false); } } function test(e){ alert("e.target.tagName : " + e.target.tagName + "\n e.currentTarget.tagName : " + e.currentTarget.tagName); } var outer = G("outer"); var inner = G("inner"); //addEvent(inner, "click", test); // 两者都是P标签 addEvent(outer, "click", test); //结论:当在outer上点击时,e.target与e.currentTarget是一样的,都是div;当在inner上点击时,e.target是p,而e.currentTarget则是div。 </script>
对象this、currentTarget和target
在事件处理程序内部,对象this始终等于currentTarget的值,而target则只包含事件的实际目标。如果直接将事件处理程序指定给了目标元素,则this、currentTarget和target包含相同的值。来看下面的例子:
var btn = document.getElementById("myBtn"); btn.onclick = function (event) { alert(event.currentTarget === this); //ture alert(event.target === this); //ture };
这个例子检测了currentTarget和target与this的值。由于click事件的目标是按钮,一次这三个值是相等的。如果事件处理程序存在于按钮的父节点中,那么这些值是不相同的。再看下面的例子:
document.body.onclick = function (event) { alert(event.currentTarget === document.body); //ture alert(this === document.body); //ture alert(event.target === document.getElementById("myBtn")); //ture };
当单击这个例子中的按钮时,this和currentTarget都等于document.body,因为事件处理程序是注册到这个元素的。然而,target元素却等于按钮元素,以为它是click事件真正的目标。由于按钮上并没有注册事件处理程序,结果click事件就冒泡到了document.body,在那里事件才得到了处理。
在需要通过一个函数处理多个事件时,可以使用type属性。例如:
var btn = document.getElementById("myBtn"); var handler = function (event) { switch (event.type) { case "click": alert("Clicked"); break; case "mouseover": event.target.style.backgroundColor = "red"; bread; case "mouseout": event.target.style.backgroundColor = ""; break; } }; btn.onclick = handler; btn.onmouseover = handler; btn.onmouseout = handler;
如果您觉得本文的内容对您的学习有所帮助,您可以微信:
发表评论
-
js浏览器端判断当期是否在线
2015-04-17 20:50 2337作者:zccst 纯浏览器端解决办法就是轮询,img轮询和a ... -
scroll时判断向下滚动还是向上滚动
2015-03-30 16:53 38212作者:zccst 有时候需要用到,判断页面是向上还是向下滚动 ... -
[BOM]navigator知识点
2015-03-20 14:42 4816作者:zccst 历史 最早的时候有一个浏览器叫NCSA ... -
[html5]navigator.online属性检测用户是否在线
2015-03-20 14:11 5274作者:zccst navigator.online属性检测用 ... -
document.body、document.documentElement和window获取视窗大小的区别
2015-03-04 15:12 27548作者:zccst 参考网址:http://www.ido32 ... -
Document,Node,Element,HTMLDocument ,HTMLCollection,HTMLElement,NodeList
2015-01-05 15:38 7526作者:zccst 这个问题如 ... -
doctype和compatModel相关
2015-01-04 19:30 678作者:zccst 一、doctype 1,严格模式与混杂模 ... -
window.history
2014-12-23 10:37 9992作者:zccst 旧版: f ... -
js 页面刷新location.reload和location.replace的区别小结
2014-12-02 20:57 129477作者:zccst reload 方法,该方法强迫浏览器刷新当 ... -
又一次掉进encodeURIComponent的坑里了
2014-11-05 18:21 22401作者:zccst 原坑: get请求 ajax.get ( ... -
DOM元素在浏览器中的位置参数,如offset,ownerDocument
2014-10-08 17:07 4212作者:zccst 2014-10-21 区分clientX ... -
js跨域的多种解决办法
2014-09-20 09:41 897作者:zccst 2015-3-11 JavaScript ... -
[Event]事件(高程版)(二)事件处理程序
2014-06-17 18:00 730作者:zccst <input type=" ... -
[Event]事件(高程版)(一)事件类型
2014-06-17 17:59 668作者:zccst 一、UI事件 1,load 两种添加方式 ... -
JSONP原理及实现
2014-06-09 16:47 12286作者:zccst 2015-04-30 更新 跨域实现的 ... -
事件基础(高程版)
2014-06-09 16:37 980作者:zccst 2014-5-4 一、事件流 标准:DOM ... -
DOM0-节点关系,节点操作API
2014-06-09 15:29 913作者:zccst 2014-09-20 补 ... -
document操作iframe
2013-12-13 16:26 1220作者:zccst //在iframe内获取父页面节点 win ... -
js-location对象
2013-12-11 17:05 1460zccst总结 2015-04-14 获取location的 ... -
document.body.scrollTop和document.documentElement.scrollTop
2013-09-14 14:44 1330作者:zccst 网页可见区域宽: document.bo ...
相关推荐
NULL 博文链接:https://rainbow702.iteye.com/blog/1668953
target在事件流的目标阶段;...只有当事件流处在目标阶段的时候,两个的指向才是一样的,而当处于捕获和冒泡阶段的时候,target指向被单击的对象而currentTarget指向当前事件活动的对象(一般为父级)。
在小程序中,e.target与e.currentTarget是非常重要的,尤其是涉及到页面传值时 currentTarget和target都是组件的一些属性值集合,由“data-属性名”定义的一些属性值 currentTarget:事件触发的当前事件(当前事件,...
event.currentTarget identifies the current target for the event, as the event traverses the DOM. It always refers to the element the event handler has been attached to as opposed to event.target which...
今天小编就为大家分享一篇关于js中innerText/textContent和innerHTML与target和currentTarget的区别,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
在小程序的事件回调触发时,会接收一个事件对象,事件对象的参数中包含一个target和currentTarget属性,接下来说说这二者的区别。 首先上代码: wxml部分: <view id='tar-father' bindtap='click'> 父组件 ...
主要介绍了微信小程序 e.target与e.currentTarget的区别详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
深入了解as3事件流,阐明target和currentTarget属性的区别与应用
eq(index|-index) first() last() hasClass(class) filter(expr|obj|ele|fn) is(expr|obj|ele|fn) map(callback) has(expr|ele) not(expr|ele|fn) slice(start,[end]) 查找 children([expr]) closest(e...
在页面与js传值中我们经常用到data-id="1"的方式,然后通过e.target.dataset.id取id的值 今天在获取值时怎么也取不到 问题分析 后来发现e对象有currentTarget和target属性,而dataset就在currentTarget中,所以通过e...
input v-model="checknames" @change="changecheckbox(item,$event)" style="float: right" type="checkbox" :value="index" > changecheckbox(val,element) { console.log( element.currentTarget); if( ...
2.获取路径 触发这个事件的对象调用val()函数 3.文件名 触发事件后会有一个事件对象e.currentTarget.files[0].name 4.文件大小 e.currentTarget.files[0].size 字节 5.文件类型 e.currentTarget.files[0].type ...
此往篇文档非常清淅的讲解在flex中的事件机制,告诉你target与currenttarget的区别
微信小程序传值以及获取值方法,传值有两种方法,对应也有获取值得方法, 1、设置id的方法标识跳转后传递的参数值; 2、通过使用data - xxxx ...获取设置的id值,并通过设置全局对象的方式来传递数值, 获取全局对象 va
firefox 的 event.currentTarget 和 ie 的 document.activeElement 这两个完全含义不一致的对象却被捆绑在一起做成了浏览器兼容代码。 大家在google搜索的时候 都会发现 document.activeElement || event....
//flag : 弹跳效果开/关 , axis : 弹跳效果距离 , time : 弹跳时间 , target : target jQuery Object $(document).Swipe(function(e){ console.log(e.currentTarget.component.direction); //+1 向左滑动 -1 向右...