JS中e.target和this的区别

最新推荐文章于 2023-11-17 20:11:58 发布

申申あ

最新推荐文章于 2023-11-17 20:11:58 发布

阅读量384

点赞数

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

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

版权

Javascript 专栏收录该内容

36 篇文章 3 订阅

订阅专栏

本文通过代码示例解析了JavaScript中事件处理的差异，对比了`this`和`event.target`的区别。在DOM事件中，`this`指的是绑定事件的元素，而`event.target`则返回触发事件的实际元素。即使子元素（如li）未直接绑定事件，由于事件冒泡，点击子元素时也会触发父元素（如ul）的事件监听器，此时`event.target`能捕获到被点击的子元素。

摘要由CSDN通过智能技术生成

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

<!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。