关于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. 移动端的emoji表情符号插入MySQL数据库失败

    插入数据时候报了错:### Error updating database. Cause: Java.sql.SQLException: Incorrect string value: ‘\xF0\x ...

  2. hdu 1007 Quoit Design(分治法求最近点对)

    大致题意:给N个点,求最近点对的距离 d :输出:r = d/2. // Time 2093 ms; Memory 1812 K #include<iostream> #include&l ...

  3. easyui window refresh 刷新两次解决办法

    这样写刷新两次 $("#windowid").window('refresh','url01.php'); $("#windowid").window('ope ...

  4. 机器学习学习笔记之一:K最近邻算法(KNN)

    算法 假定数据有M个特征,则这些数据相当于在M维空间内的点 \[X = \begin{pmatrix} x_{11} & x_{12} & ... & x_{1M} \\ x_ ...

  5. 通过Intel XDK编写跨平台app(二)

    通过Intel XDK编写跨平台app(一) 通过Intel XDK编写跨平台app(二) 在这个系列的上一篇文章中,我们大致了解了Interl XDK的概况.在这一部分中,我们会详细地介绍如何通过这 ...

  6. iOS buttonWithType:101 苹果私有api

    无意中发现,有人创建UIButton这样写 UIButton *previousButton = [UIButtonbuttonWithType:101]; 一看原来是私有api UIButton * ...

  7. 【转】非教育网中IPv4网络访问IPv6资源

    1. 背景知识 随着个人电脑.移动终端.乃至物联网的不断发展,有很大的IP地址需求.由于IPv4协议设计时没有料到日后网络会如此发达,IPv4网络中的IP数量相对今天的需求来说,显得捉襟见肘.加上IP ...

  8. om.android.ide.common.process.ProcessException: org.gradle.process.internal.ExecException

    Error:Execution failed for task ':app:dexDebug'.> com.android.ide.common.process.ProcessException ...

  9. Bootstrap 3 Menu Generator

    Bootstrap 3 Menu Generator

  10. java反射详解及说明

    首先写一个Person类: package lltse.base.reflectdemo; public class Person { private String name ="张三&qu ...