Focus获得焦点

焦点,顾名思义你目光集中的地方,例如我们在文字输入框中点击一下就会有闪烁的光标,接下来你输入的文字就在这个光标后出现,我们就说这个文字框有了焦点.例如我们建立一个表单,在状态栏中想用户介绍这个表单项目是做什么用的,我们就可以同过下面的段脚本来实现: 
＜body＞ 
＜form＞ 
＜p＞ 
姓: 
＜input type="text" onFocus="status_look('输入你的姓')"＞ 
＜p＞ 
名: 
＜input type="text" onFocus="status_look('输入你的名')"＞ 
＜/p＞ 
＜p＞ 
＜input type="submit" value="提交" onFocus="status_look('提交你的表单')"＞ 
＜input type="reset" value="重置" onFocus="status_look('重置你的表单')"＞ 
＜/p＞ 
＜/form＞ 
＜script language="javascript"＞ 
function status_look(field_message){ 
window.status=field_message 
} 
＜/script＞ 
＜/body＞ 
　　我们看到,当我们在表单项目上切换光标的时候,状态栏中就显示出相关的信息,我们就是通过onFocus来把这个表单项目已经获得焦点的消息捕捉到,并传递给函数status_look(),通过window.status这个属性改变状态栏的内容.由此而我们可以看出onFocus就是引发当对象获得焦点之后所发生的事件. 

　　Blur失去焦点 
　　当我们把光标移开,也是表示对象失去了焦点,这时候我们就可以用到Blur事件.通常我们可以用这Blur来检查用户是否输入正确,如果用户离开这个区域而输入错误的话,我们就可以弹出一条警告来告知用户书写错误,相信你也经历过一些当你进行了第一次提交表单之后才发现自己用了一些不合法的输入,而又要重新输入的问题吧~现在我们就来解决这个问题.看个例子: 
＜body＞ 
＜form＞ 
＜p＞ 
请输入你的姓名: 
＜input type="text" onBlur="xian_shi(this)"＞ 
＜/form＞ 
＜script language="javascript"＞ 
function xian_shi(text_field){ 
if(text_field.value==""){ 
alert("不能为空!") 
text_field.focus() 
} 
} 
＜/script＞ 
＜/body＞ 
　　当用户没有输入姓名而跳出输入框的时候,我们就弹出一个信息提示用户必须输入一个值,我们看看这个工作的流程,当我们使文字框失去焦点的时候,onBlur就会把这个消息传递给函数xian_shi(),在函数中我们用if()来判断this的返回值中value是不是为空,如果是的话就弹出一条消息警告用户,再通过focus()把焦点换给文字框.需要说明的是我们把text_field.focus()称之为模拟方法,确切的说我们就是把这个事件在这里假设成为对象的方法. 

　　说到这里我门必须讨论一下Blur和Focus事件带来的死循环,就向上面这个例子,如果我们在表单区中插入一条或者几条＜input type="text" onBlur="xian_shi(this)"＞马上我们就陷入了一个死循环,这是需要避免的死循环.很多的程序员都避免用Blur事件来检验表单的有效性,我觉得解决办法之一就是不强制的把焦点还给文字框，我们就把上面的例子改一下: 
＜body＞ 
＜form＞ 
＜p＞ 
请输入你的姓名: 

＜input type="text" onBlur="xian_shi(this)"＞ 
请输入你的生日: 
＜input type="text" onBlur="xian_shi(this)"＞ 
＜/form＞ 
＜script language="javascript"＞ 
function xian_shi(text_field){ 
if(text_field.value==""){ 
alert("不能为空!") 
} 
} 
＜/script＞ 
＜/body＞ 

　　我们把text_field.focus()去掉，就不会造成两个表单之间Blur和Focus事件的循环,虽然我们损失了使没输入正确信息的栏目重新获得焦点的权利，但避免了死循环，正所谓鱼翅熊掌不可兼得. 

　　Change处理被修改的表单数据 
　　从在某种程度上来说，Blur违反了编程规则中不要运行没有必要的代码。事实上就算是你输入的数据是合法的，Blur还是要运行一次，要避免这个重复我们可以先给域制定一个数据，当用户修改了这个数据以后才执行，这就是Change事件的工作了.例如我们要在用户改变了数据只后才检测有效性，我们可以同过下面的方法: 
＜form＞ 
＜p＞ 
请输入你的姓名: 
＜input type="text" value="You Name" onChange="xian_shi(this)"＞ 
请输入你的生日: 
＜input type="text" value="You Birthday" onChange="xian_shi(this)"＞ 
＜/form＞ 
＜script language="javascript"＞ 
function xian_shi(text_field){ 
if(text_field.value==""){ 
alert("不能为空!") 
} 
} 
＜/script＞ 
　　如果我们不去改变value=""的值，就不会调用函数xian_shi()。 

　　KeyDown,KeyUp,KeyPress处理键盘事件 
　　我们使用键盘的时候，也就发生三个过程，按下键，松开键，恢复原样。而KeyDown,KeyUp,KeyPress就是对这三个进行的控制.当我们按下键的时候就引发KeyDown事件,松开键的时候引发KeyUp事件，当我们完成按下键和松开键的全过程，使按键恢复原状的时候，就引发了KeyPress事件.相信不用做太过解释你就可以理解了~下面我就举个例子： 
＜form＞ 
看看你的 浏览器 的状态栏: 
＜input type="text" onKeyDown="window.status='你按下了一个键'" onKeyUp="window.status='你又松开了这个键'"＞ 
＜/form＞ 

　　今天的最后我们来看看部分关于 鼠标 事件的处理 

　　Click点击事件处理 
　　之前我们已经运用了很多次~相信你也不会陌生了吧,这里我就不在多说了，大家可以看看前面的例子. 

　　DbClick双击事件处理 
　　和单击一样，鼠标双击后引发的事件，在WEB上双击是个不怎么习惯的用法,所以我们也没有必要做过多的讨论，只是要注意，Click和Dbclick不可以同时作用在一个对象上，脚本回自动截取第一次点击调用Click事件。 

　　MouseDown和MouseUp事件处理 
　　和键盘事件比较一下我们就可以 联想 到这是鼠标键按下和松开引发的事件，我们可以把这两个时间到套到前面的例子中就一目了然了，因此在这里也就不在做过多解释.在 IE 中鼠标事件处理的先后次序是MouseDown,MouseUp,Click,MouseUp,DbClick. 

　　接下来我们就来看看在网络上比较常见的禁止右键菜单的方法吧。 
相信你也遇到过一些禁止右键弹出菜单的站点吧，其中我们运用到几个对象的属性，这里我就不做过多的解释了，在以后我们来慢慢了解. 

＜script language="javascript"＞ 
document.οnmοusedοwn=mouse_down 
function mouse_down(){ 
var right_mouse="欢迎光临H.S Workshop" 
if(event.button==2　　event.button==3){ 
alert(right_mouse) 
return false 
} 
} 
＜/script＞ 

　　这里我们主要是针对IE来说的，需要解释的一部分是event.button==2　　event.button==3,为什么是数字呢？因为在IE4之后，按钮代码存放在event对象的button属性中，以数字的形式出现.有七种可能值: 

0：什么键都没按； 
1：左键； 
2：右键； 
3：左键和右键； 
4：中间键； 
5：左键和中间键； 
6：右键和中间键； 
7：所有三个键。 

　　所以我们给出event.button==2　　event.button==3,让计算机来判断用户按下了哪个键。