为什么即使在javascript中在本地范围内为其赋值之后，全局变量仍未定义

Question

My understanding of the closure property is that every variable inside in a function scope has access to all the variables in the parent scope(s) the function is in,

So considering this definition I don't understand the behavior of my code below:

var mouseX, mouseY;

window.onload = function() {

    this.addEventListener('mousemove', function() {
        mouseX = event.clientX;
        mouseY = event.clientY
    }); // mouseX and mouseY are defined

    petObj = new Pets();


   }

function Pets(){
document.getElementById('imageList').addEventListener('mouseenter',function()
                                       {
                                       console.log(mouseX)} //undefined mouse X!!!
                                       }

I accept the assignation of mouseX inside the anonymous function for mousemove event listener to reference the global variable declared outside the function. But as you can see it stays undefined outside the scope of the anonymous function

Answer 1

You're logging the value of "mouseX" inside the "load" handler that sets up the event handler. No events have happened yet, so the variable is still undefined .

The variables are available, and if you put a console.log() call inside the event handler, or somewhere else such that the code will run after some "mousemove" events have happened, you'll see the values being updated.

Answer 2

我将变量的名称从mouseX更改为mouseXX并且它可以工作，不确定它为什么工作，也许jquery命名空间搞乱变量名称