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. [LeetCode] Search for a Range 二分搜索

    Given a sorted array of integers, find the starting and ending position of a given target value. You ...

  2. 割点与桥，强连通分量，点双，边双[poj_1236]学校网络

    割点与桥 题目描述 给定一张无向图G(V,E),你需要找出所有的割点与桥. 输入 第一行给出两个正整数V,E. 接下来E行每行两个正整数x,y,表示有一条连接x,y的边. 输出 输出共2行,第一行输出 ...

  3. 《Linux命令行与shell脚本编程大全 第3版》创建实用的脚本---11

    以下为阅读<Linux命令行与shell脚本编程大全 第3版>的读书笔记,为了方便记录,特地与书的内容保持同步,特意做成一节一次随笔,特记录如下:

  4. gitlab 搭建与迁移

    #下载gitlabhttps://mirrors.tuna.tsinghua.edu.cn/gitlab-ce/yum/el6/gitlab-ce-10.1.3-ce.0.el6.x86_64.rpm ...

  5. CodeSmith Professional 5与VS2010有冲突

    最近VS2010莫名其妙无法正常使用了,新建工程和打开工程就提示“Microsoft Visual Studio发生问题需要关闭”的错误提示,然后就是重新启动VS2010,最后经过分析和查证,确定是某 ...

  6. (9)oracle 表的基本查询

    转到进阶查询 查看表的结构 desc  表名; desc student; 查看整张表的数据 select * from 表名; //查整张表很耗时间 select* from student; 查看 ...

  7. CF978C Letters【前缀和+二分查找/几房几号】

    [链接]:CF978C [分析]:在前缀和数组种二分找到>=询问数的位置,根据位置就好操作了 [代码]: #include<bits/stdc++.h> using namespac ...

  8. Mysql 通用二进制包安装

    通用二进制包安装 注意:这里有严格的平台问题: 使用时:centos5.5版本   (类似Windows下的绿色包) 下载(mirrors.sohu.com/mysql)   直接使用tar 解压到指 ...

  9. Redis单机部署、添加开机自启、配置参数

    1.Redis简介 redis是使用C语言编写的开源的,支持网络,基于内存,可持久性的键值对存储数据库,2013年5月之前,Redis是最流行的键值对存储数据库,Redis采用内存数据集,支持多种数据 ...

  10. [JOISC2016]サンドイッチ

    题目大意: 一个$n\times m(n,m\leq400)$的网格图中,每个格子上放了两个三明治,摆放的方式分为'N'和'Z'两种.一个三明治可以被拿走当且仅当与该三明治的两条直角边相邻的三明治均被 ...