关于onBlur,onFocus,onChange,onpropertychange,Onselect事件

阅读更多

onBlur:当失去输入焦点后产生该事件
onFocus:当输入获得焦点后,产生该文件
Onchange:当文字值改变时,产生该事件

onpropertychange:当元素属性改变时,产生该事件 (限IE浏览器)

Onselect:当文字加亮后,产生该文件

 

1、可以这样说,onpropertychange要比onchange先触发事件,前者是有连带反映的。
举个例子,前者更适合做搜索提示,后者则不适合;后者更适合做计算器,而前者则不适合!

2、 用onpropertychange,oninput事件解决onchange事件的不足.

onchange在用于文本框输入框时,有一个明显的不足. 事件不会随着文字的输入而触发,而是等到文本框失去焦点(onblur)时才会触发. 也就是没有即时性!

在IE下,可以用onpropertychange来代替onchange事件,当文本框有任何变化时,能立即触发此事件.

这样一来问题就解决了.

那其他浏览器呢,onpropertychange可是IE的专利. 接下来就是oninput事件了.

但是oninput有个诡异,必须用addEventListener的方式来绑定事件.否则无效.

 

好了, 以下是演示例子, 主流浏览器都没问题:

 

 
 
 
 
on用onpropertychange,oninput事件解决onchange事件的不足 by koyoz.com 
 
 

 

使用onchange事件:

 
 

使用onpropertychange/oninput事件:

 
 

结果:

 
 


 
 
 
3、onchange和onpropertychange详细区别
当一个HTML元素的属性用javascript改变的时候,都能通过 onpropertychange来捕获。例如一个 对象的value属性被页面的脚本修改的时候,onchange无法捕获到,而onpropertychange却能够捕获。 
也就是说:onpropertychange 事件在用键盘每改变一下文本框的值或用js改变其值便会触发一下,而onchange只有在用键盘改变其值,然后在失去焦点(onblur)后才触发,用 js改变其值不能触发!onpropertychange和onchange都不管文本框中的实际值有没有变,只要有改的相应操作就可能触发。有时当上面 两时间都不能满足需求时,可以考虑只用onblur。
 
4、还有一点要注意到,当onblur和onchange事件一起用时,onblur会出问题。。。。
 
详见如下 

测试页面: 

 
通过js改变文本框中的值后触发的事件:onpropertychange事件 
 

 
测试onpropertychange事件和onchange事件一起用时:
 
测试结果:onpropertychange事件在用键盘每改变一下文本框的值或用js改变其值便会触发一下,而onchange只有在用键盘改变其值,然后在失去焦点后才触 

发,用js改变其值不触发
 

 
 
 

 

 

 

 
测试只有onblur和onchange事件时:
 
测试结果:onchange先触发,onblur后触发 

 
 
 

 
 

 

 

 


 
测试当onblur和onpropertychange事件一起用时:
 
测试结果:onblur好象出了问题,只要用键盘在文本框中随便输入一个值,便会触发它。可能是onpropertychange把它惹毛了。。。^-^ 

 
 
 

 
 

 

 

 


 
测试有onblur、onpropertychange事件和onchange事件一起用时:
 
测试结果:onblur在和onpropertychange一起用时的问题仍然存在 

 
 
 

 
 

 



脚本应用:
function textCounter(field,maxlimit) 

if(field.value.length > maxlimit) 

field.value = field.value.substring(0,maxlimit); 
}
}

你可能感兴趣的:(关于onBlur,onFocus,onChange,Onselect事件)