javascript对象之this、currentTarget和target
来源:互联网 发布:出纳日记账软件 编辑:程序博客网 时间:2024/05/17 07:23
//说明:以下都是在DOM的事件模型下,因为currentTarget和target为DOM模型所特有,IE的事件模型下是srcElement。额,说错了,ie11貌似也支持。
原文链接:http://www.jb51.net/article/28122.htm
target在事件流的目标阶段;currentTarget在事件流的捕获,目标及冒泡阶段。只有当事件流处在目标阶段的时候,两个的指向才是一样的,而当处于捕获和冒泡阶段的时候,target指向被单击的对象而currentTarget指向当前事件活动的对象(一般为父级)。
------------------------------------------------------------------------------------------------------------------------------------------------------------------------
原文链接:http://www.jb51.net/article/32931.htm
即,event.currentTarget指向事件所绑定的元素,而event.target始终指向事件发生时的元素。
——-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
原文链接:http://www.jquerycn.cn/a_10422
在javascript中,尤其是在事件处理程序内部,对象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,在那里事件才得到了处理。
看下面代码,依次弹出[object HTMLInputElement]、[object HTMLInputElement]、[object HTMLInputElement]、[object HTMLBodyElement]、[object HTMLBodyElement]、[object HTMLInputElement]
<pre name="code" class="javascript"><pre name="code" class="javascript">var btn = document.getElementById("myBtn");var handler = function(event) { alert(this) ; alert(event.currentTarget); alert(event.target);};document.body.onclick = handler;btn.onclick = handler;
在需要通过一个函数处理多个事件时,可以使用type属性。
例如:
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;
- javascript对象之this、currentTarget和target
- JavaScript之target和currentTarget
- JavaScript target 和 currentTarget 区别
- JavaScript中event对象中currentTarget和target的区别
- javascript event.target 和 event.currentTarget
- target、this、currentTarget的区别
- event.target event.currentTarget this
- target,currentTarget和this三者的区别
- 事件对象中target对象和currentTarget对象的区别
- js target和currentTarget
- event对象中的target和currentTarget的区别
- event对象中 target和currentTarget 属性的区别
- target 和currentTarget的区别
- target和currentTarget的区别
- 三言两语之js事件、事件流以及target、currentTarget、this那些事
- javascript currentTarget与target的区别
- FLEX:target和currentTarget属性的区别
- FLEX:target和currentTarget属性的区别
- Mac上配置adb环境变量
- 杜升初
- 多线程数据共享
- Linux上安装weblogic
- Vincent's SQL Server Cookbook: Script the Collation
- javascript对象之this、currentTarget和target
- 指针前钱解析
- OO的思考
- QQ分组效果(ExpandableListView)的使用
- 关于“点击两次退出程序”功能的实现
- 解决phpcms 后台更新提交更新目录出现PHP has encountered a Stack overflow错误
- 搭建OpenACS 服务器
- android应用层相关设置及命令
- xcode7真机调试出现App installation failed的问题解决