一个问题引发的思考
在我学习javascript的事件时，有一个小任务是使用JS来实现 li 列表项在鼠标悬浮时会有背景阴影的动态效果，很自然想到用for 来为每个列表项添加onmouseover 和 onmouseout事件来改变和恢复 li 的类名。
如下：
<script type="text/javascript">
var Lis = document.getElementsByTagName("li"); function addevent() {
for (var i = 0; i < Lis.length; i++) {
Lis[i].onmouseover = function() {
console.log(i);
Lis[i].className = "lihover";
}
Lis[i].onmouseout = function() {
Lis[i].className = "";
}
}
}
addevent();
// console.log(i);
</script>
看起来很有道理的代码会什么不能正常工作？
先看一下为什么
在第8行和11行，通过改变 li 元素的classname来实现鼠标悬浮的动态效果改变，根据我以前学习的语言（C和JAVA）这明显是不对的，怎么能在函数内使用外面的局部变量呢，可是浏览器为什么没有报错，我在7行加了一句console.log(i);看一下
浏览器输出了3 并报错：closure.html:44 Uncaught TypeError: Cannot set property 'className' of undefined
当这两个事件发生时，函数会执行，函数会访问Lis 和 i 这两个变量，但是注意循环和事件函数不是同时执行的，事件函数发生时i的 已经是3了， 而Lis里并没有Lis[3]这个元素。
可是这两个函数为什么能访问外面的局部变量呢，答案是 闭包 （closure）
闭包初识
闭包就是在创建函数时为其保存一份创建时的外部环境，所以这两个事件函数能够访问到i这个变量，虽然访问的是循环执行完后的i的值。这也已经很神奇了对吧，源自函数式编程的魔法。那么怎么让其访问的 i 是函数自身被创建时的 i 呢，我再创建一个函数专门用来返回这个事件函数，如下：
function makeevents(i) {
console.log(i);
return function() {
Lis[i].className = "lihover";
}
}
function addevent() {
for (var i = 0; i < Lis.length; i++) {
Lis[i].onmouseover = makeevents(i);
Lis[i].onmouseout = function() {
this.className = "";
}
}
}
addevent();
我只是在mouseover事件用了这个机制，在mouseout使用了this关键词这个等最后在讨论。
在浏览器里运行一下发现效果已经实现了，并且在页面加载完后控制台就打印出了0 1 2
makeevent函数的作用正是创建闭包，在每一次循环创建一个，这样Lis[i]引用的就是正确的 li 元素了，看起来好像很繁琐的样子，事实上我们因为可以对makeevent传入参数来改变返回的函数的一些特点。这好像面向对象的工厂模式对吧。事实上我们完全可以用闭包来实现面向对象的封装。
关于this
我在第二个事件函数里使用了this，它表示了响应这个事件的当前对象，也即表示当前的列表项。并且在必要时还可以往Lis[i]元素对象里加入其他东西，如下：
Lis[i].index = i;
Lis[i].hehe = "hehe";
Lis[i].onmouseout = function() {
console.log(this.hehe);
Lis[this.index].className = "";
}
这样写也是可以的。通过对象本身可以动态的添加属性这一个JavaScript的特点来完成的。
是的，JavaScript真是一门神奇的语言