js event.target和this区别

最新推荐文章于 2024-09-07 23:19:44 发布

weixin_46032763

最新推荐文章于 2024-09-07 23:19:44 发布

阅读量190

点赞数

本文链接：https://blog.csdn.net/weixin_46032763/article/details/107856081

版权

 <style>
        ul {
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
        
        li {
            width: 10px;
            height: 10px;
            background-color: #fff;
        }
    </style>
</head>

<body>
    <ul>
        <li></li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        // 绑定事件是ul即点击ul任意处都可以触发function，而e.target是具体的点击处是触发事件，有可能点击的是ul里的li触发function，所以e.target有可能是ul或者li，而绑定事件（this）只能是ul（addEvenetListener的调用者）
        ul.addEventListener('click', function(e) {
            console.log(e.target);
            console.log(this);

        });
    </script>

在这里插入图片描述

 document.addEventListener('mousemove', function(e) {});

在document（绑定事件元素/文档）里mousemove（触发类型/鼠标移动）,一mousemove就触发function(e)（触发之后的变化）,e（触发事件元素/总共KeybordEvent、MouseEvent中的MouseEvent）是最新一次的MouseEvent,e.target是html即最新一次MouseEvent的最小移动区域。