Javascript中事件对象的target和this的区别


本文摘自PHP中文网,作者逆旅行人,侵删。

在学习事件对象的时候,总是认为targetthis是一样的,直到后来才发现两者的区别还是挺大的,今天就带大家一起来看看。

1.当触发对象与绑定对象一致时

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

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

    <title>Document</title>

</head>

<body>

    <ul class="list">

        <li class="itm">item1</li>

        <li class="itm">item2</li>

        <li class="itm">item3</li>

        <li class="itm">item4</li>

        <li class="itm">item5</li>

    </ul>

    <script>

        const li=document.querySelector("ul li:nth-of-type(4)");

        console.log(li);

 

        li.addEventListener("click",function(e){

            console.log(e.target);

            console.log(this);

        });

    </script>

</body>

 

</html>

点击item4这个li后,两者返回如下:

Snipaste_2021-04-09_10-09-08.png

阅读剩余部分

相关阅读 >>

reactdom.render的详细解析

浅谈javascript中数组array的添加/删除操作

怎样使用js获取函数参数名称

javascript中拷贝数组的14个小技巧

javascript怎么设置元素宽度

javascript知识点总结之 文档对象模型

javascript如何清除缓存

如何将 javascript 回调转换为 promise?方法介绍

javascript中的强制类型转换的方法介绍

javascript基于什么的语言

更多相关阅读请进入《javascript》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...

    暂无评论...