js基础---event.target/ event.currentTarget/this的区别

结论:

event.target : 事件的触发者

event.currentTarget: 事件的监听者

this: this指向真正触发事件的元素

<style>
        .box {
            height: 400px;
            width: 400px;
            background-color: orange;
        }

        .small {
            height: 200px;
            width: 200px;
            background-color: skyblue;
        }

    </style>
</head>
<body>
<div class="box">box
    <div class="small">small</div>
</div>
<script>
    var box = document.querySelector('.box');
    var small = document.querySelector('.small');
    box.onclick = function () {
        console.log(event.target);
        console.log(event.type);
        console.log(event.currentTarget);
        console.log(this);    
    }
    </script>
</body>

打印:

猜你喜欢

转载自www.cnblogs.com/xiaqin/p/13180735.html