关于作用域、元素标签属性的一些个人理解

今天在学习《锋利的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上能清楚看到:

posted @ 2016-09-25 14:30  波兰火箭名宿  阅读(390)  评论(0)    收藏  举报