关于JavaScript中的事件捕获到的e.target和e.currentTarget有什么区别?

原创 野人  2022-01-27 09:01  阅读 151 次

前端的知识点真多(还不是JavaScript基础不好惹的“祸”啊,?),不过没关系,不怕它多,来一个我记一个,你能拿我怎么办,呵呵。

最近这几天都在写一个类似微博哪种说说的页面,但是想在WordPress上实现,还是折腾了蛮久,只能安慰自己慢工出细活了,目前是基本完工了,到时候会写文章说下。

写的时候,就遇到了一关于JavaScript中的事件捕获到的e.targete.currentTarget的问题,不知道这两个有啥区别,平常用到的较多的是e.target也基本能满足功能,而e.currentTarget不能说不熟悉嘛,起码都有见过,不过是没咋用它,所以今天就拿例子说话,这样好理解(什么呀,搞的理论自己很懂似的,还不是通过看例子搞懂了)

<!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>e.target和e.currentTarget区别</title>
    </head>
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <script>
            document.querySelector('ul').addEventListener('click', e => {
                console.log(e.target); //当前点击啥元素就输出啥元素
                console.log(e.currentTarget); //绑定事件写的是啥元素就输出啥元素,这个例子就是ul
            });
        </script>
    </body>
</html>

感觉上完代码案例后(注释里头该说的都说了),就没啥好说的,不懂的话,就拿案例代码复制后跑下应该是可以懂了吧。

本文地址:https://www.yerenwz.com/5632.html
版权声明:本文为原创文章,版权归 野人 所有,欢迎分享本文,转载请保留出处!

发表评论