对象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;