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

WEB前端 waitig 414℃ 百度已收录 0评论
<!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>

这里写图片描述


本文由【waitig】发表在等英博客
本文固定链接:javascript addEventListener中的e.target和this的区别
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)