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. win7 无法启动此程序,因为计算机中丢失glut32.dll

    http://zhidao.baidu.com/link?url=9NZxqCvR7hvmKuVR1dUSdQB-TTv_re-g7lp-xZj5FKII04FnMvIKjFhKv299t6wv5Ht ...

  2. BeeFramework 笔记 四（UISignal 总结）

    http://yang152412.blog.163.com/blog/static/175861582201332321351862/ 一.UISignal的工作模式 1.发送Signal,比如从V ...

  3. Windows下VS2013创建与使用动态链接库（.dll）

    一.创建动态链接库文件 ** 1.打开VS2013,选择文件,新建工程  2.选择新建W32控制台应用程序,这里将工程名改为makeDLL  3.在应用程序类型中选择DLL,点击完成  4.完成以上步 ...

  4. Appium+python自动化9-SDK Manager【转载】

    前言 SDK Manager到有哪些东西是必须安装的呢? 一.SDK Manager 1.双击打开SDK Manager界面

  5. CI中SESSION的用法及其注意

    销毁 Session要清除当前 session: $this->session->sess_destroy(); 注意: 此函数应该是最后被调用的.即使闪出变量已不再有效.如果你只想让某几 ...

  6. django rest framework如何实现nest field显示，如何保存有外键的字段更新

    一步一步深入了. 相关设置技巧如下: 直接nest field显示: class VersionPoolSerializer(serializers.ModelSerializer): site_na ...

  7. BZOJ 2243 [SDOI2011]染色 (树链剖分)（线段树区间修改）

    [SDOI2011]染色 Time Limit: 20 Sec  Memory Limit: 512 MBSubmit: 6870  Solved: 2546[Submit][Status][Disc ...

  8. POJ 2914 Minimum Cut （全局最小割）

    [题目链接] http://poj.org/problem?id=2914 [题目大意] 求出一个最小边割集,使得图不连通 [题解] 利用stoerwagner算法直接求出全局最小割,即答案. [代码 ...

  9. NOI2014 部分题解

    感觉NOI2014的一些题目也是比较好做的... 但是笔者往往有思路却没有想清楚就开始搞了...这样还是不太好.. Day1 T1 起床困难综合征  (我感觉这题应该叫综合征不是综合症...)   a ...

  10. 【spring data jpa】【mybatis】通过反射实现 更新/保存 实体的任意字段的操作

    代码如下: //代码示例:例如保存时,传入下面两个字段 String filed;String content; //User代表要更新的实体,user即本对象 //filed代表要更改的字段,例如u ...