教程集 www.jiaochengji.com
教程集 >  脚本编程  >  javascript  >  正文 javascript对象之this、currentTarget和target

javascript对象之this、currentTarget和target

发布时间:2015-02-07   编辑:jiaochengji.com
本文介绍下,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,在那里事件才得到了处理。
在需要通过一个函数处理多个事件时,可以使用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;

您可能感兴趣的文章:
target与currentTarget的区别(jqueryui方式获取z-Index)
javascript对象之this、currentTarget和target
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
JavaScript MVC 学习笔记(五)事件操作的拓展
jquery 事件对象属性小结
jquery中event对象属性与方法小结
jquery绑定原理 简单解析与实现代码分享
解密jQuery事件核心 – 委托设计(二)
再谈Javascript原型继承
javascipt面向对象扩展的例子

关键词: js this的用法   
[关闭]
~ ~