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. Spring中报"Could not resolve placeholder"的解决方案(引入多个properties文件)

    除去properites文件路径错误.拼写错误外,出现"Could not resolve placeholder"很有可能是使用了多个PropertyPlaceholderCon ...

  2. UVALIVE 2927 "Shortest" pair of paths

    裸的费用流.一开始因为这句话还觉得要拆点 样例行不通不知道这句话干啥用的.Further, the company cannot place the two chemicals in same dep ...

  3. Linux内存管理图解【转】

    转自:http://www.360doc.com/content/13/0505/15/12218157_283128759.shtml Linux内存管理图解 2013-05-05  果儿的百科   ...

  4. Object和Thread自带的原生方法

    Object类: 1) clone():创建并返回此对象的一个副本. 2) equals(obj):指示其对象是否与此对象“相等”. 3) finalize():当垃圾回收器确定不存在对该对象的更多引 ...

  5. BigDecimal 使用 静态方法总结

    转自:http://myrecord.top/?post=18 -------------千位加, public static String getQs(String old){ boolean re ...

  6. Appium+python自动化12-appium元素定位【转载】

    前言 appium定位app上的元素,可以通过id,name.class这些属性定位到 一.id定位 1.appium的id属性也就是通过UI Automator工具查看的resource-id属性

  7. validate插件实现表单效验（二）

    一款优秀的表单验证插件——validation插件 特点: l  内置验证规则:拥有必填.数字.email.url和信用卡号码等19类内置验证规则 l  自定义验证规则:可以很方便的自定义验证规则 l ...

  8. 网盘+SVN

    1.安装网盘 选择一个国内有名的网盘存储,例如金山网盘.360云盘等,注册账户会默认赠送几G的使用空间,然后下载其对应的网盘客户端管理软件(也可以使用浏览器方式),使用账号登录,就可以上传.管理文件等 ...

  9. Python的网络编程[0] -> socket[1] -> socket 模块

    socket 1. 常量 / Constants AF_* 和 SOCK_* 分别属于 AddressFamily 和 SocketType 1.1 AF_*类常量 socket.AF_UNIX:  ...

  10. 洛谷——1164 小A点菜（背包方案数）

    大水题!! 题目背景 uim神犇拿到了uoi的ra(镭牌)后,立刻拉着基友小A到了一家……餐馆,很低端的那种. uim指着墙上的价目表(太低级了没有菜单),说:“随便点”. 题目描述 不过uim由于买 ...