this是非常强大的一个关键字，但是如果你不了解它，可能很难正确的使用它。
下面我解释一下如果在事件处理中使用this。
首先我们讨论一下下面这个函数中的this关联到什么。
function doSomething() {
this.style.color = '#cc0000';
}
所有权(Owner)
在javascript中，this总是关联到执行函数的对象或者包含这个函数的对象。当我们在页面上定义了一个函数doSomething(), 它的owner是页面，也就是window对象。
对于一个onclick属性，它的owner是onclick所在的html元素。
这种"所有权"的关系是由javascript的面向对象方法决定的。
------------ window --------------------------------------
| / \ |
| | |
| this |
| ---------------- | |
| | HTML element | <-- this ----------------- |
| ---------------- | | doSomething() | |
| | | ----------------- |
| -------------------- |
| | onclick property | |
| -------------------- |
| |
---------------------------------------------------------- 如果我们直接执行doSomeThing()函数，这个this关联到window， window没有stype对象，所以会报错。 拷贝 我们在使用this时一定要小心它所关联的html元素，我们需要拷贝函数到我们的onclick属性。 element.onclick = doSomething(); 这个函数现在被拷贝到onclick属性(这个属性现在变成了一个方法).现在如果onclick事件被执行，this关联到这个html元素，它的color会被改变。
------------ window --------------------------------------
| |
| |
| |
| ---------------- |
| | HTML element | <-- this ----------------- |
| ---------------- | | doSomething() | |
| | | ----------------- |
| ----------------------- | |
| |copy of doSomething()| <-- copy function |
| ----------------------- |
| |
---------------------------------------------------------- 我们可以拷贝函数到很多个事件属性，每个this都能正确的关联到正确的html元素
------------ window --------------------------------------
| |
| |
| |
| ---------------- |
| | HTML element | <-- this ----------------- |
| ---------------- | | doSomething() | |
| | | ----------------- |
| ----------------------- | |
| |copy of doSomething()| <-- copy function |
| ----------------------- | |
| | |
| ----------------------- | |
| | another HTML element| <-- this | |
| ----------------------- | | |
| | | | |
| ----------------------- | |
| |copy of doSomething()| <-- copy function |
| ----------------------- |
| |
---------------------------------------------------------- 每一个html元素拥有doSomething()函数的拷贝。 然而，如果你使用内链的事件注册
<element onclick="doSomething()">
这样不会拷贝函数，onclick属性没有包含真正的函数，而只是引用一个函数doSomeThing();
此时如果调用函数，this关联的仍然是window对象
------------ window --------------------------------------
| / \ |
| | |
| this |
| ---------------- | |
| | HTML element | <-- this ----------------- |
| ---------------- | | doSomething() | |
| | | ----------------- |
| ----------------------- / \ |
| | go to doSomething() | | |
| | and execute it | ---- reference to |
| ----------------------- function |
| |
---------------------------------------------------------- 如果你想让this关联到html元素，你必需确保this真的写进了onclick属性。如果你执行下面的代码
element.onclick = doSomething;
alert(element.onclick)
你会得到结果：
function doSomething()
{
this.style.color = '#cc0000';
}
正如你看到的，this出现在onclick方法里面，所以它属于html元素
但是如果你这样写
<element onclick="doSomething()">
alert(element.onclick)
你会得到结果：
function onclick()
{
doSomething()
}
这里仅仅引用到doSomeThing()函数，this没有出现在onclick方法中，它不属于这个html元素
例子
下面的写法会保证this写进了onclick方法
element.onclick = doSomething
element.addEventListener('click',doSomething,false)
element.onclick = function () {this.style.color = '#cc0000';}
<element onclick="this.style.color = '#cc0000';">
下面的写法this没有被写进onclick方法
element.onclick = function () {doSomething()}
element.attachEvent('onclick',doSomething)
<element onclick="doSomething()">
注意attachEvent没有拷贝，只是引用
当你使用内链的事件注册的时候，你也可以发送this到函数
<element onclick="doSomething(this)">
function doSomething(obj) {
// this is present in the event handler and is sent to the function
// obj now refers to the HTML element, so we can do
obj.style.color = '#cc0000';
}
翻译自：http://www.quirksmode.org/js/this.html