javascript addEventListener中的e.target和this的区别

最新推荐文章于 2024-02-17 12:37:41 发布

UIEngineer

最新推荐文章于 2024-02-17 12:37:41 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript高级 es5/es6

本文链接：https://blog.youkuaiyun.com/zjsfdx/article/details/78375332

javascript高级 es5/es6 专栏收录该内容

43 篇文章

订阅专栏

本文介绍了一个使用HTML和JavaScript创建的简单网页示例，重点展示了如何通过JavaScript为页面元素注册click事件并获取触发事件的目标元素。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
<title>Title</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<style type="text/css">

</style>
</head>

<body>

    <div id="box">
        <ul>
            <li>我是第1个li</li>
            <li>我是第2个li</li>
            <li>我是第3个li</li>
            <li>我是第4个li</li>
            <li>我是第5个li</li>
            <li>我是第6个li</li>
        </ul>
    </div>

   <script>

    var oDiv = document.getElementById('box');      //返回box元素

    //注册click事件
    oDiv.addEventListener('click',function(e){
        //event.target表示发生点击事件的元素
        //this始终指向绑定事件的元素也就是div 和event.currentTarget相等

        console.log(this);
        console.log(e.currentTarget);
        console.log(e.target);

        var l = e.target;
        if(l){
            alert(l.innerHTML);
        }
    });

   </script>

</body>
</html>