您好，我想知道代码中this的指向为什么是box?

Question

 <script>

      var box=document.querySelector('.box');

      box.addEventListener('mousemove',function(e){

        var x=e.pageX - this.offsetLeft;

        var y=e.pageY - this.offsetTop;

        this.innerHTML='X坐标是'+x+'Y坐标是'+y;

      });

    </script>

Answer 1

dom.addEventListener或者dom.onxxxx绑定的事件函数中默认this为绑定事件时的dom对象，除非用bind更改过内部this对象 

<div class="box">.box</div>
<div id="box">#box</div>
<script>

    var box = document.querySelector('.box');
    box.addEventListener('mousemove', function (e) {
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        this.innerHTML = 'X坐标是' + x + 'Y坐标是' + y;
    });
    box.addEventListener('mousemove', function (e) {
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        this.innerHTML = 'X坐标是' + x + 'Y坐标是' + y;
    }.bind(document.querySelector('#box')));
</script>