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

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8" />

<title>js性能优化</title>

</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>

js中的target与currentTarget的区别<转>的更多相关文章

  1. 关于js中event的target和currentTarget的区别

    今天又遇到这个问题了,总是搞不清楚target和currentTarget的区别,百度搜索的时候看到一遍文章解释得很清楚,特意记录下录,以备不时之需: target与currentTarget的区别? ...

  2. 事件冒泡和事件捕获以及解释target和currenttarget的区别

    冒泡和捕获的区别是冒泡事件是先触发子元素事件,再触发父元素事件,这个是冒泡.捕获是先触发父元素事件,再触发子元素事件.简单的来说,冒泡的顺序是由内到外,捕获的顺序是由外到内 举例:<!DOCTY ...

  3. 【前端】js中new和Object.create()的区别

    js中new和Object.create()的区别 var Parent = function (id) { this.id = id this.classname = 'Parent' } Pare ...

  4. JS中的== 、===的用法和区别。

    JS中的== .===的用法和区别.[转] == 和 != 比较若类型不同,先偿试转换类型,再作值比较,最后返回值比较结果 . 而  === 和 !== 只有在相同类型下,才会比较其值 ======= ...

  5. JS中三目运算符和if else的区别分析与示例

    本文是通过示例详细分析了JS中三目运算符和if else的区别,是篇非常不错的文章,这里推荐给大家.   今天写了一个图片轮播的小demo,用到了判断 先试了一下if else,代码如下: 复制代码代 ...

  6. js中callback.call()和callback()的区别

    js中callback.call()和callback()的区别在js中callback.call()和callback() 有什么区别,举个例子:function a(){alert('hello! ...

  7. 网站开发进阶(二十)JS中window.alert()与alert()的区别

    JS中window.alert()与alert()的区别 前言 alert与window.alert没什么区别,如果有人觉得有区别,那就来解释一下:所有以window.开始的语句,都可以直接把wind ...

  8. JS中==、===和Object.is()的区别

    JS中==.===和Object.is()的区别 首先,先粗略了解一下这三个玩意儿: ==:等同,比较运算符,两边值类型不同的时候,先进行类型转换,再比较: ===:恒等,严格比较运算符,不做类型转换 ...

  9. js中event的target和currentTarget的区别

    js中的event对象包含很多有用的信息 target:触发事件的元素. currentTarget:事件绑定的元素. 两者在没有冒泡的情况下,是一样的值,但在用了事件委托的情况下,就不一样了,例如: ...

随机推荐

  1. [Grunt] Concatenating Your Javascript with grunt-contrib-concat

    Combine serval javascript files together. For angular project, make sure you add angular.min.js firs ...

  2. JQuery 控制div滚动条保持最下

    $("#session_show").animate({ scrollTop: $("#session_show").scrollHeight },1000); ...

  3. hdu 4287Intelligent IME(简单hash)

    Intelligent IME Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  4. Android高手进阶篇4-实现侧滑菜单框架，一分钟集成到项目中

    先来看下面的这张效果图: 上面这张效果图是百度影音的,现在在Android上很流行,最初是由facebook自己实现的,而后各大应用有跟风之势,那么这种侧滑效果是如何实现的呢? 网上现在这种侧滑菜单的 ...

  5. sqlserver并发用户数

    http://zhidao.baidu.com/question/291231462.html http://dev.mysql.com/downloads/mysql/

  6. Android日常开发总结

    全部Activity可继承自BaseActivity,便于统一风格与处理公共事件,构建对话框统一构建器的建立,万一需要整体变动,一处修改到处有效. 数据库表段字段常量和SQL逻辑分离,更清晰,建议使用 ...

  7. javascript:void(0)和onclick=fn(this)

    今天在写代码中遇到一个这样的问题.关于点击在html中添加点击事件,顺便把this对象通过参数传过去. <a href='#' \>查看详情</a> <a href='j ...

  8. Android SDK镜像的介绍使用【转发】

    由于一些原因,Google相关很多服务都无法访问,所以在很多时候我们SDK也无法升级,当然通过技术手段肯定可以解决,但是比较麻烦,而且下载速度也不怎么样. 这里笔者介绍一个国内的Android镜像站, ...

  9. Hystrix入门执行过程

    netflix-hystrix团队开发了hystrix-javanica,使用流行的java注解以及函数式编程,来替代hystrix枯燥的编程方法. 其主要是HystrixCommand注解的使用. ...

  10. c3p0数据库连接池管理

    之前已经讲过dbcp可以用于数据库连接池进行管理.另一种技术c3p0也可以用于数据库连接池管理,其中Spring等框架都是基于c3p0技术进行数据库连接池管理的. 使用之前需要引入 c3p0-0.9. ...