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. 基于CSOCKET的Client简单实例（转）

    原文转自 http://blog.csdn.net/badagougou/article/details/78410382 第一步:创建一个基类为CSOCKET类的新类,Cclient,并在主对话框类 ...

  2. 如何在natTable表格上添加双击事件

    在项目当中,有时候需要双击表格中的某一行触发一个事件或者一次数据请求,这时候,我们就需要在表格中绑定相关事件,思路实际上很简单,添加一个绑定事件就ok了,那么怎么添加呢?简单实现如下: 1.创建绑定双 ...

  3. Educational Codeforces Round 33 (Rated for Div. 2) A. Chess For Three【模拟/逻辑推理】

    A. Chess For Three time limit per test 1 second memory limit per test 256 megabytes input standard i ...

  4. hadoop之深入浅出

    分布式文件系统与HDFS lHDFS体系结构与基本概念*** l数据量越来越多,在一个操作系统管辖的范围存不下了,那么就分配到更多的操作系统管理的磁盘中,但是不方便管理和维护,因此迫切需要一种系统来管 ...

  5. 树链剖分【p4315】月下"毛景树"

    Description 毛毛虫经过及时的变形,最终逃过的一劫,离开了菜妈的菜园. 毛毛虫经过千山万水,历尽千辛万苦,最后来到了小小的绍兴一中的校园里. 爬啊爬~爬啊爬毛毛虫爬到了一颗小小的" ...

  6. Xamarin XAML语言教程使用方法设置进度条进度

    Xamarin XAML语言教程使用方法设置进度条进度 在ProgressBar中定义了一个ProgressTo方法,此方法也可以用来对进度条当前的进行进行设置,ProgressTo与Progress ...

  7. OpenJ_Bailian - 1037 A decorative fence

    Discription Richard just finished building his new house. Now the only thing the house misses is a c ...

  8. [洛谷3796]【模板】AC自动机（加强版）

    题目大意: 给定$n(n\leq150)$个模式串$p_i(|p_i|\le70)$和一个$t(|t|\le10^6)$,求$t$中被匹配次数最多的$p_i$. 思路: AC自动机.匹配时记录一下匹配 ...

  9. JNuit

    s1:@Test s2:根据提示导包 s3:选中方法名,右击run as -->JUnit Test package songyan.jdbc.learn1; import org.junit. ...

  10. SQL常用函数之五 str（）

    原文:SQL常用函数之五 str() 使用str函数   :STR 函数由数字数据转换来的字符数据.   语法      STR    (    float_expression    [    ,  ...