1、DOM事件绑定到父元素

<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="UTF-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <meta http-equiv="X-UA-Compatible" content="ie=edge" />

        <title>target 与 currentTarget</title>

    </head>

    <body>

        <ul id="ul">

            <li>1</li>

            <li>2</li>

            <li>3</li>

        </ul>

        <script type="text/javascript">

            var ul = document.getElementById('ul');

            ul.onclick = function(e) {

                console.log(this); //ul DOM节点

                console.log(this === e.target); // click 事件真正的目标 false

                console.log(this === e.currentTarget); //在事件处理程序内部，对象 this 始终等于 currentTarget 的值 返回ture

            }

        </script>

    </body>

</html>

2、DOM事件绑定到本身DOM上

<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="UTF-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <meta http-equiv="X-UA-Compatible" content="ie=edge" />

        <title>target 与 currentTarget</title>

    </head>

    <body>

        <ul id="ul">

            <li id="li">1</li>

            <li>2</li>

            <li>3</li>

        </ul>

        <script type="text/javascript">

            var li = document.getElementById('li');

            li.onclick = function(e) {

                console.log(this); //li DOM节点

                console.log(this === e.target); // click 事件真正的目标 true

                console.log(this === e.currentTarget); //在事件处理程序内部，对象 this 始终等于 currentTarget 的值 返回ture

            }

        </script>

    </body>

</html>

总结：

（1）事件内部的this就是绑定事件的那个DOM

（2）事件处理程序内部，对象 this 始终等于 currentTarget 的值。

（3）事件处理程序内部，target 的值是实际触发事件的真正DOM（如父节点绑定事件，其实子节点触发的事件）

更新2019.1.3

上面说的真晦涩！

示例代码：

<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="UTF-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <meta http-equiv="X-UA-Compatible" content="ie=edge" />

        <title>target 和 currentTarget 区别</title>

    </head>

    <body>

        <div id="app1">

            <div id="app2">

                <div id="app3">

                    test

                </div>

            </div>

        </div>

        <script type="text/javascript">

            let app1 = document.getElementById('app1'),

                app2 = document.getElementById('app2'),

                app3 = document.getElementById('app3');

            app1.addEventListener('click', e => {

                console.log(e.target, 'e.target')

                console.log(e.currentTarget, 'e.currentTarget')

            })

        </script>

    </body>

</html>

效果：

看明白了没？

这个的使用场景是：事件代理。

真正触发事件的dom是target

可以将事件代理到currentTarget上。

JavaScript target与currentTarget区别的更多相关文章

  1. 微信小程序中的target和currentTarget区别

    最近在学习微信小程序相关知识,其中提到了两个属性target和currentTarget,其中target是指向触发事件的元素(常见于事件委托中),而currentTarget是指向捕获事件的元素(即 ...

  2. target与currentTarget区别 ( html是弹窗居中的例子)

    <!DOCTYPE html> <html> <head> <title></title> <style type="tex ...

  3. jS事件：target与currentTarget区别

    target在事件流的目标阶段:currentTarget在事件流的捕获,目标及冒泡阶段.只有当事件流处在目标阶段的时候,两个的指向才是一样的, 而当处于捕获和冒泡阶段的时候,target指向被单击的 ...

  4. 事件：target与currentTarget区别

    target在事件流的目标阶段:currentTarget在事件流的捕获,目标及冒泡阶段.只有当事件流处在目标阶段的时候,两个的指向才是一样的, 而当处于捕获和冒泡阶段的时候,target指向被单击的 ...

  5. target与currentTarget区别

    target在事件流的目标阶段:currentTarget在事件流的捕获,目标及冒泡阶段.只有当事件流处在目标阶段的时候,两个的指向才是一样的, 而当处于捕获和冒泡阶段的时候,target指向被单击的 ...

  6. JavaScript tips —— target与currentTarget的区别

    定义 以下是红宝书的描述 属性/方法 类型 读/写 说明 currentTarget Element 只读 其事件处理程序当前正在处理事件的那个元素 target Element 只读 事件的目标 M ...

  7. js中的target与currentTarget的区别<转>

    关于js中target与currentTarget的区别的关键在于他们所处在的事件流的阶段是不一样的,target处于事件流的目标阶段,currentTarget处理事件流的捕获.处于目标阶段和冒泡阶 ...

  8. target和currentTarget的区别

    target在事件流的目标阶段:currentTarget在事件流的捕获,目标及冒泡阶段.只有当事件流处在目标阶段的时候,两个的指向才是一样的, 而当处于捕获和冒泡阶段的时候,target指向被单击的 ...

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

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

随机推荐

  1. WebApi初探之路由配置

    本文介绍了ASP.NET Web API路由HTTP请求控制器. 如果你熟悉ASP.NET MVC,Web API路由是和MVC路由非常相似的.主要差别是Web API使用HTTP方法而不是URI路径 ...

  2. less与sass的区别点

    less与sass: 相同点: 1,两者都作为css扩展技术,也都,基于css的高级预处理语言之上. 2,都有的优点:简化代码,降低维护成本. 3,都必须要避免中文环境,所涉及到的所有目录,标题以及内 ...

  3. Fiddler抓包1-抓firefox上https请求【转载】

    本篇转自博客:上海-悠悠 原文地址:http://www.cnblogs.com/yoyoketang/p/6538021.html 前言 fiddler是一个很好的抓包工具,默认是抓http请求的, ...

  4. hdu 1598(最小生成树)

    find the most comfortable road Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K ...

  5. cloudflare 301 重定向设置

    https://support.cloudflare.com/hc/en-us/articles/218411427#redirects 将 https://dfg.com/* 设置301重定向到 h ...

  6. PHP获取不带后缀的文件名方法

    $filename = "test.txt"; $houzhui = substr(strrchr($filename, '.'), 1); $result = basename( ...

  7. 同步mysql数据到ElasticSearch的最佳实践

    Elasticsearch是一个实时的分布式搜索和分析引擎.它可以帮助你用前所未有的速度去处理大规模数据.ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全 ...

  8. 51nod 1202 不同子序列个数 [计数DP]

    1202 子序列个数 题目来源: 福州大学 OJ 基准时间限制:1 秒 空间限制:131072 KB 分值: 40 难度:4级算法题 收藏 关注 子序列的定义:对于一个序列a=a[1],a[2],.. ...

  9. maven的知识图谱

    maven 1.maven的好处 java项目管理工具 依赖管理 对jar包统一管理 项目名称 公司/组织 版本信息 本地仓库 由于索引的存在,找jar包很快 项目构建 依赖管理 传统项目 很大 包含 ...

  10. spoj 913 Query on a tree II (倍增lca)

    Query on a tree II You are given a tree (an undirected acyclic connected graph) with N nodes, and ed ...