js target&currentTarget

最新推荐文章于 2023-10-26 14:38:21 发布

原创最新推荐文章于 2023-10-26 14:38:21 发布 · 309 阅读

0 ·

CC 4.0 BY-SA版权

本文详细解释了JavaScript中事件流的概念，特别是target与currentTarget的区别。通过一个简单的示例演示了这两种属性在不同事件流阶段的行为差异。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>js性能优化</title>
<script class="jquery library" src="/js/sandbox/jquery/jquery-1.8.2.min.js" type="text/javascript"></script>
</head>
<body> 
    <div id="outer">
        outer
        <p>
            inner
        </p>
    </div>
</body>
<script type="text/javascript">
(function(){
    var a=document.getElementById('outer');
        a.addEventListener('click',function(e){
        alert(e.target.innerHTML);
        alert(e.currentTarget.innerHTML);
        alert(e.currentTarget === e.target);
    },false);
})();
</script>
</html>

线测试可查看效果，http://runjs.cn/

结论：关于js中target与currentTarget的区别的关键在于他们所处在的事件流的阶段是不一样的，target处于事件流的目标阶段，currentTarget处理事件流的捕获、处于目标阶段和冒泡阶段。只有当他们同事处于目标阶段的时候他们的指向才是一样的。

转自：http://www.cnblogs.com/super-d2/archive/2012/06/11/2545180.html