JS中e.target和this的区别

最新推荐文章于 2024-05-21 14:15:14 发布

申申あ

最新推荐文章于 2024-05-21 14:15:14 发布

阅读量356

点赞数

分类专栏： Javascript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_43781887/article/details/124458401

版权

Javascript 专栏收录该内容

36 篇文章 3 订阅

订阅专栏

我们先来看一个代码案例：

<!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>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        var lis = document.querySelectorAll('li');
        ul.addEventListener('click', function(e) {
            console.log(this);
        })
    </script>
</body>

</html>

随便点击一个li元素的话打印的是ul。但是看下面这个代码：

<!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>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        var lis = document.querySelectorAll('li');
        ul.addEventListener('click', function(e) {
            console.log(e.target); //返回的是li
        })
    </script>
</body>

</html>

这个随便点击一个li元素返回的是点击的那个li元素。

简洁地概括就是this返回的是绑定事件的元素，e.target返回的是触发事件的对象，但是为什么li没有绑定事件反而还打印出来了呢？原因是因为li虽然没注册，但ul注册事件了，因为冒泡li没执行但执行ul的事件，ul里的执行函数有e.target，指向的就是li。

申申あ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS中e.target和this的区别

我们先来看一个代码案例：<!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">
复制链接

扫一扫