学习交流，欢迎转载。转载请注明文章来源：http://www.cnblogs.com/lgjspace/archive/2011/08/16/2139621.html
js 中 this 的用法很多，其中一个用法是：在事件的响应函数中可以用 this 来表示发生事件的元素对象，但这有一个很重要的限定条件，就是要求 this 必须使用在事件响应函数中才有这样的功效，在事件响应函数所调用的函数中使用 this 就没有了这种指代效果，如果此时使用了 this，则 this 的值为 undefined。在这个限定条件中，有两个概念可能会让刚接触的人觉得很难辨别，就是“事件响应函数”和“事件响应函数所调用的函数”，下面通过代码来说明两者的区别：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title></title>
5 <script type="text/javascript">
6 function btnClick1() {
7 alert(this.value); //在事件响应函数调用的函数里就不能通过 this 来获得事件对象了
8 }
9 function btnClick2(src) {
10 alert(src.value); //在事件响应函数中将 this 的对象作为参数传过来就可以使用。
11 }
12 function btnClick4() {
13 alert(this.value);
14 }
15 </script>
16 </head>
17 <body>
18 <!--在按钮的事件响应函数中调用 btnClick1() 函数，而不是“按钮的事件响应函数是 btnClick1()”，因此在函数 btnClick1() 不能直接使用 this 来指代触发事件的对象。-->
19 <input type="button" id="btn1" value="按钮1" onclick="btnClick1()"/>
20
21 <!--和上一行一样，也是在事件响应函数中调用一个函数 btnClick2()，但这里直接把事件响应函数中可以使用的 this 作为参数来传给函数 btnClick2()，因此在 btnClick2() 中可以使用 this 所指代的对象。-->
22 <input type="button" id="btn2" value="按钮2" onclick="btnClick2(this)"/>
23
24 <!-- 直接在自身的事件响应函数中通过引用 this 来打印出引发事件的按钮的文本值 -->
25 <input type="button" id="btn3" value="按钮3" onclick="alert(this.value)"/>
26
27
28 <!--下面用 javascript 来为该按钮绑定事件响应函数 btnClick4()，因此在 btnClick4() 的函数体中可以使用 this 来指代该控件。-->
29 <input type="button" id="btn4" value="按钮4"/>
30
31 <!--为了不打乱加载顺序的同时，也方便观察对比，把一部分 js 代码写到 body 中。-->
32 <script type="text/javascript">
33 //为 id 为 btn4 的按钮绑定事件响应函数为 btnClick4()。
34 var btn4 = document.getElementById("btn4");
35 btn4.onclick = btnClick4;
36 //只有在响应函数里才能拿到this，在被事件响应函数调用的函数是拿不到的。
37 </script>
38
39 <!--onclick="btnClick4()"相当于“btn5.onclick = function() { btnClick4(); };”，也就是onclick的响应函数是一个匿名的函数，匿名函数的实现代码就是调用 btnClick4()。-->
40 <input type="button" id="btn5" value="按钮5" onclick="btnClick4()"/>
41
42
43 </body>
44 </html>
这段代码很简单，仅仅是在 html 页面上添加了几个 button，并用各种不同的方法来为这些 button 添加一些简单事件，以用来说明 this 分别用在“事件响应函数”和“事件响应函数所调用的函数”时的区别。
在 id 为 btn1（为了简便，后面直接用 id 名来指代对应的按钮）的按钮元素中，为 onclick 事件赋值为“btnClick1()”，相当于“btn1.onclick = function() {btnClick1();}”，意思是元素 btn1 的事件响应函数是一个匿名的函数，而在匿名函数中调用声明好的 btnClick1() 函数，而不是“按钮的事件响应函数是 btnClick1()”，因此在函数 btnClick1() 中不能直接使用 this 来指代引发事件的对象，程序运行到函数 btnClick1() 时会弹出对话框，显示 this.value 的值为“undefined”，即 this 未被赋值，说明了 this 在函数 btnClick1() 中获取不到引发事件的源对象。
元素 btn2 的代码看起来和 btn1 中的很类似，但同样的效果在元素 btn2 中却可以实现。因为虽然 btn2 也是在匿名的事件响应函数中直接调用函数 btnClick2()，让函数 btnClick2() 内部实现打印 btn2 的文本内容值的代码，但是 btn2 在事件响应函数中调用函数 btnClick2() 的时候把在事件响应函数中才可以使用的 this 作为参数传给了所调用的函数 btnClick2()，即“btnClick2(this)”，因此在函数 btnClick2() 中也可以使用 this 所指代的发生事件的源对象了。
元素 btn3 则是直接在自身的事件响应函数中通过引用 this 来获取引发事件的源对象，并打印出元素的文本值。该元素直接在元素标签的 onclick 事件中写上 js 实现代码，而不是像其它几个按钮元素那样在 onclick 事件中调用页面中已经声明好的 js 函数，onclick 中的代码功能就是打印出当前按钮的文本内容。这里的“onclick = "alert(this.value)"”其实就相当于“btn3.onclick = function(src) {alert(src.value);}”，即给 btn3 的 onclick 事件创建一个事件响应函数，这个事件响应函数是一个没有函数名的匿名函数，而匿名函数的实现代码就是执行打印输出源对象的文本值，即：“alert(src.value)”。
元素 btn4 没有把 onclick 事件的响应函数写在元素标签中，而是通过 js 在页面加载的时候用代码的方式来为自身关联事件响应函数 btnClick4()，注意，由于这里是为元素绑定一个事件响应函数，因此在事件响应函数内部可以直接使用 this 来指代引发事件的源对象，这里即为元素 btn4。
类似地，在元素 btn5 中的 onclick 事件中也调用了 btnClick4()，但和 btn1 的情况一样，这里的 btnClick4() 并不是 btn4 的事件响应函数，只是 btn4 的匿名的事件响应函数中所调用的函数，因此在函数 btnClick4() 中所引用的 this 的值也只可能是“undefined”，不会得到预想的引发事件的源对象。
从这个小实例中，相信大家应该能对比得出“事件响应函数”和“事件响应函数所调用的函数”的区别了。在 js 中如果想要用 this 来指代发生（引发）事件的源对象，则 this 必须在事件响应函数中使用，否则是获取不到它所指代的源对象的。