js基本问题

Question

如下js代码：
A:
  <script>
     window.onload=function(){
          document.getElementById("a").onchange=function(){
               alert(this==window);
          }
     }
  </script>
  <input type="text" id="a"/>B:
  <script>
     function aa(){
          alert(this==window);
     }  
 </script>
  <input type="text" id="a" onchange="aa()"/>
想请教各位，这两段代码都是为一个html元素绑定了一个事件，但是我发现，A方式绑定后，方法中的this指的是html元素自身，而B方式中的this指向的却是window对象，不知道这两种绑定事件的方式有什么不同，他们的机制又是怎样的呢？

Answer 1

是不是可以这样说，在html元素中绑定的的事件，都是被window调用了，但是如果在绑定的时候传一个this，例如<input type="input" id="a" onchange="aa(this)"/>,这里的this却又指向的是html元素自身，有点糊涂了，哪位高人给指点一下

Answer 2

<input type="text" id="a" onchange="alert(this==window);"/>你试一下这个。

Answer 3

你可以这样认为：当在HTML代码中，有这样的代码的时候
onchange="//一些代码"
效果等同于
document.getElementById("a").onchange=function(){
    //那些代码
}所以 onchange="aa()" 等同于
document.getElementById("a").onchange=function(){
    aa();
}而此时 aa的运行者已经不是document.getElementById("a")了所以，
document.getElementById("a").onchange=function(){
    //this==window 这里为false
    aa(); //但在aa中运行 this==window 的时候，为true
}

Answer 4

function aa(){
alert(this==window);
}
在函数中，this只的是该函数的调用者。函数如果没有被赋给html元素，它的调用者就是window;否则就是元素本身。

Answer 5

如4楼所言，那当我这样写时，<input onchang="aa(this)"/>,此时的this又是如何传到函数中并指向了html元素的呢？

Answer 6

document.getElementById("a").onchange=function(){}这里匿名函数,它里面的this就是document.getElementById("a")对象咯,
第二个, function aa(){} 这里用的this就是window咯,

Answer 7

在诸位的启发下，在下彻底搞清楚了这两者的不同。当在页面上写<input id="a" type="text" onchange="aa()"/>时，用alert(document.getElementById("a").onchange)查看时，浏览器已经将代码包装为a.onchange=function(){aa()},这里面有一个闭包，所以在aa()里写this时，此this就不是a对象了，而是window对象了，所以如果我们写成<input id="a" type="text" onchange="aa(this)"/>，就相当于a.onchange=function(){aa(this)},这里的this是将外部的a所代表的this给传了进来，所以在aa的代码中就可以访问a对象的属性了。这应该算是js语法的一个小陷阱。

Answer 8

很简单，就理解一句话：
js中的this是指向包含此this对象的function运行的那个对象