JS入门

对象this、currentTarget和target

字号+ 作者: 来源: 2014-11-16 22:15 我要评论( )

在事件处理程序内部,对象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;

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 使用javascript生成的植物显示过程特效

    使用javascript生成的植物显示过程特效

    2015-06-06 16:26

  • javascript 杂谈之哪种写法你更喜欢?

    javascript 杂谈之哪种写法你更喜欢?

    2014-11-16 22:15

  • 面向对象的JavaScript

    面向对象的JavaScript

    2014-11-16 22:15

  • Javascript模板引擎性能对比及几点优化

    Javascript模板引擎性能对比及几点优化

    2014-11-16 22:15

网友点评