Javascript进阶

这里还要强调一下JavaScrpt的Event Handling里this的使用：

假设Html页面上有元素<div id="prompt"">Hello World!</div>，我们可以通过两种机制给div元素添加上下面的click事件：

// 在Html页面上定义click函数
function fn_click(){
　this.style.color = "#cc0000";　// 此时this指向的是函数的拥有者--页面，确切说是JavaScript的window对象
}

1, Copying

var divP = document.getElementById("prompt");
divP.onclick = fn_click;

顾名思义，Copying机制是通过把fn_click函数拷贝给div的onclick属性。因此事件执行后this指向的就是触发事件的div元素，故该函数在div点击后可以正常运行。

【注：这里给读者提个疑问--我们应该如何更改fn_click中的this指向，使其指向的是你需要的对象上而不是触发事件的div元素？这篇文章对此有精彩的论述：JavaScript's Slippery this Reference and Other Monsters in The Closet】

2, Referring

Referring机制则是找到引用的fn_click函数后再执行它。

<div id="prompt" onclick="javascript:fn_click();">Hello World!</div>

大家可以想想其结果是什么呢？

由于其采用的是Referring机制，故fn_click函数中的this指向的是全局对象window，那么显然onclick后会弹出错误--style不是window对象的属性。

为了解决这个问题，可以修改为：