Why doesn't the mouseover event work when use closure in Javascript? -

i have following code

<ul>   <li>one</li>   <li>two</li>           <li>three</li>   <li>four</li> </ul>  var lists = document.getelementsbytagname("li");  for(var i=0, len = lists.length; i< len; i++){     lists[i].onmouseover = function(){         console.log(i);     }(i); } 

expected result: when mouse on each li, got 0 or 1 or 2 or 3 in console, got number when refresh page not in mouseover, knows why?

the "calling parenthesis" (i) after function expression execute function , assign return value event handler (which undefined). here example function declaration, makes easier see (hopefully):

function foo(i) {     console.log(i); }  // in loop lists[i].onmouseover = foo(i); 

see how foo called , return value assigned lists[i].onmouseover?

you have return function invoked function expression:

lists[i].onmouseover = (function(i){     return function() {         console.log(i);     }; }(i)); 

or function declaration:

function createhandler(i) {     return function() {         console.log(i);     }; }  // in loop lists[i].onmouseover = createhandler(i); 

more info: javascript closure inside loops – simple practical example