javascript对象之this、currentTarget和target

//说明：以下都是在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的区别想大家在使用的时候不是很在意，本文以测试代码来讲解它门之间的不同

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 identifies the element on which the event occurred.
即，event.currentTarget指向事件所绑定的元素，而event.target始终指向事件发生时的元素。

——-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

原文链接：http://www.jquerycn.cn/a_10422

本文介绍下，javascript中对象this、currentTarget和target的用法，有需要的朋友参考下吧。

在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 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;