直接上代码:

body里:

   <div id="father">
father
<div id="son">
son
</div>
</div>

js:

<script type="text/javascript">
let fa = document.getElementById('father');
let son = document.getElementById('son');
fa.addEventListener('click', e => {
console.log(e.target)
console.log(e.currentTarget)
})
</script>

运行结果:

点击fa元素:

点击son元素:

结论:

target: 触发事件的对象,谁触发谁命中。

currentTarget: 绑定事件的对象,恒等于this,等于addEventListener前面的元素

 

e.target和e.currentTarget区别的更多相关文章

  1. 【小程序】获取到的e.target与e.currentTarget区别

    [小程序]获取到的e.target与e.currentTarget区别:https://blog.csdn.net/qq_33744228/article/details/80310294 使用e.t ...

  2. event.target和event.currentTarget区别

    首先本质区别是: event.target返回触发事件的元素 event.currentTarget返回绑定事件的元素

  3. 小程序--e.target和e.currentTarget区别

    事件捕获与事件冒泡 事件捕获是从外到内,事件冒泡是从内到外. 注意:不管是不是冒泡事件,都不会改变事件传递的参数值,都还是在dataset中获取(******) target:指事件源组件对象    ...

  4. 【前端】event.target 和 event.currentTarget 的区别

    event.target 和 event.currentTarget 的区别 举例说明: <!DOCTYPE html> <html> <head> <tit ...

  5. event.target 和 event.currentTarget 的区别

    event.target This property of event objects is the object the event was dispatched on. It is differe ...

  6. Event对象中的target属性和currentTarget属性的区别

    先上结论: Event.target:触发事件的元素: Event.currentTarget:事件绑定的元素: 通过下面的例子来理解这两个属性的区别: 使用Event.target属性的例子:(我在 ...

  7. JavaScript target与currentTarget区别

    1.DOM事件绑定到父元素 <!DOCTYPE html> <html lang="zh"> <head> <meta charset=& ...

  8. e.target与e.currentTarget的区别

    在DOM事件对象中有两个属性总是时不时的困扰我,就是target和currentTarget,有时候很迷惑分不清两者的区别,因此有必要把这两个属性好好梳理一下,加深理解,以便日后的查询. MDN中对t ...

  9. e.target与e.currentTarget的区别,事件冒泡与事件捕获 ,事件委托

    e.target与e.currentTarget的区别:https://www.jianshu.com/p/1dd668ccc97a 事件冒泡与事件捕获 :https://www.jianshu.co ...

随机推荐

  1. LayoutInflater的动态增加控件

    在实际开发中LayoutInflater这个类是非常有用的,它的作用类似于 findViewById(),不同点是LayoutInflater是用来找layout下xml布局文件. 而findView ...

  2. 常用WebSite Address

    百度 魅族深度学习应用大赛 byr论坛 帖子 https://bbs.byr.cn/#!article/ML_DM/24852?p=1 百度 魅族深度学习应用大赛 官网 http://meizu.ba ...

  3. 谷歌浏览器Chrome错误提示Flash过期怎么办(转)

    在使用谷歌浏览器Chrome时,会碰到谷歌浏览器Chrome的错误提示:“Adobe Flash Player因过期而遭到阻止”,点击“更新插件”是不行的,国内的网络根本就打不开,点击“运行一次”是可 ...

  4. css3 利用dispaly:flex

    直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  5. Flask之wtforms源码分析

    一.wtforms源码流程 1.实例化流程分析 # 源码流程 1. 执行type的 __call__ 方法,读取字段到静态字段 cls._unbound_fields 中: meta类读取到cls._ ...

  6. Delphi APP 開發入門(九)拍照與分享

    Delphi APP 開發入門(九)拍照與分享 分享: Share on facebookShare on twitterShare on google_plusone_share   閲讀次數:30 ...

  7. 核心动画(CAKeyframeAnimation,CABasicAnimation)

    一,核心动画常用的三种例子 view的核心动画其体现就是把view按照指定好的路径进行运动,针对的是view的整体. [view.layer addAnimation:动画路径 forKey:@“绑定 ...

  8. 函数对象[条款18]---《C++必知必会》

    有时需要一些行为类似于函数指针的东西,但函数指针显得笨拙.危险而且过时(让我们承认这一点).通常最佳方式是使用函数对象(function object)取代函数指针. 与智能指针一样,函数对象也是一个 ...

  9. PHPCMS 修改后台路径简便方法

    之前在网上找了很多关于修改phpcms后台路径的修改方法,但是都太繁琐(个人感觉),终于找到了一个相对简单的修改方法,在这里和大家分享一下,希望互相学习. 第一步:在网站根目录创建一个文件夹,以后就要 ...

  10. css3有哪些新特性

    转载:http://blog.csdn.net/lxcao/article/details/52797914