今天在学习《锋利的jQuery》第三章的案例代码时, 第5行和15行代码让我产生了一些困惑:
$(function(){
var x=10;
var y=20;
$("a.tooltip").mouseover(function(e){
this.myTitle=this.title; //为tooltip类的a标签创建一个属性
this.title="";
var tooltip="<div id='tooltip'>"+this.myTitle+"</div>"; //创建<div>元素
$("body").append(tooltip); //将其追加到文档中
$("#tooltip")
.css({
"top":(e.pageY+y)+"px",
"left":(e.pageX+x)+"px"
}).show("fast"); //设置x坐标和y坐标,并且显示
}).mouseout(function(){
this.title=this.myTitle; //创建好的属性即使在其他作用域也能访问
$("#tooltip").remove(); //移除
}).mousemove(function(e){ //使提示框随鼠标的移动而移动
$("#tooltip")
.css({
"top":(e.pageY+y)+"px",
"left":(e.pageY+y)+"px"
});
});
})
刚开始我把myTitle看成是一个局部变量,那么按照JavaScript中的变量访问机制来说,应该只有mouseover函数内部才能访问到这个变量,但是在mouseout函数却能调用这个变量。思考了一段时间后,我认为我刚开始的想法有误,myTitle并非局部变量,而是属于a标签的一个属性,那么只要与该标签绑定的事件都应该能访问到这个属性。于是我再次调试一下代码,调试结果也确实印证了我的想法,只要第一次触发a标签上的mouseover事件之后,myTitle就会作为a标签的一个属性一直保留下来,这在Firebug上能清楚看到: