在JavaScript中，this是非常复杂的。这一节我们只针对this在事件操作中的使用情况进行介绍，而对于this在其他场合（如面向对象开发等）的使用，我们在JavaScript进阶部分再详细讲解。
在事件操作中，可以这样理解：哪个DOM对象（元素节点）调用了this所在的函数，那么this指向的就是哪个DOM对象。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oDiv = document.getElementsByTagName("div")[0];
oDiv.onclick = function ()
{
this.style.color = "hotpink";
}
}
</script>
</head>
<body>
<div>绿叶，给你初恋般的感觉~</div>
</body>
</html>
浏览器预览效果如图所示。
分析：
this所在的函数是一个匿名函数，然后这个匿名函数被oDiv调用了，因此this指向的就是oDiv。
这里，this.style.color = "hotpink";等价于oDiv.style.color = "hotpink";，我们可以自行测试一下。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oDiv = document.getElementsByTagName("div")[0];
oDiv.onclick = changeColor;
function changeColor()
{
this.style.color = "hotpink";
}
}
</script>
</head>
<body>
<div>绿叶，给你初恋般的感觉~</div>
</body>
</html>
浏览器预览效果如图所示。
分析：
this所在的函数是changeColor，然后changeColor函数被oDiv调用了，因此this指向的就是oDiv。事实上，上面两个例子是等价的。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oDiv = document.getElementsByTagName("div")[0];
var oP = document.getElementsByTagName("p")[0];
oDiv.onclick = changeColor;
oP.onclick = changeColor;
function changeColor()
{
this.style.color = "hotpink";
}
}
</script>
</head>
<body>
<div>绿叶，给你初恋般的感觉~</div>
<p>绿叶，给你初恋般的感觉~</p>
</body>
</html>
浏览器预览效果如图所示。
分析：
这里changeColor()函数被两个元素节点调用，那它究竟指向的是哪一个呢？其实this只有在被调用的时候才确定下来的。当我们点击div元素时，此时this所在的函数changeColor被div元素调用，因此this指向的是div元素。当我们点击p元素时，此时this所在的函数changeColor被p元素调用，因此this指向的是p元素。
总而言之一句话：哪个DOM对象（元素节点）调用了this所在的函数，那么this指向的就是哪个DOM对象。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oUl = document.getElementById("list");
var oLi = oUl.getElementsByTagName("li");
for (var i = 0; i < oLi.length; i++)
{
oLi[i].onclick = function ()
{
oLi[i].style.color = "hotpink";
}
}
}
</script>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>
浏览器预览效果如图所示。
分析：
一开始想要实现的效果是：点击哪一个li元素，就改变这个li元素的颜色。很多人自然而然就写下了上面这种代码。然后测试的时候，会发现完全没有效果。这是怎么回事呢？我们试着把oLi[i].style.color = "hotpink";这一句换成this.style.color = "hotpink";就有效果了。
那么为什么用oLi[i]就不正确，而必须要用this呢？其实这就是典型的闭包问题。对于闭包，我们在JavaScript进阶中再详细介绍。
在事件函数中，想要使用当前元素节点，我们尽量使用this来代替oBtn、oLi[i]等等这种DOM对象的写法。
