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

最新推荐文章于 2021-11-01 23:29:14 发布

iteye_4568

最新推荐文章于 2021-11-01 23:29:14 发布

阅读量703

点赞数

分类专栏： JS 文章标签：关于onBlur onFocus onChange onpropertychange Onselect事件

本文链接：https://blog.csdn.net/iteye_4568/article/details/82165136

版权

JS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

onpropertychange:当元素属性改变时，产生该事件（限IE浏览器）

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

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

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

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

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

这样一来问题就解决了.

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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>on用onpropertychange,oninput事件解决onchange事件的不足 by koyoz.com</title>
<style type="text/css">
*{font-size:14px;font-family:'Comic Sans MS', Verdana}
body {margin-left:20px}
</style>
</head>

<body>
<p>使用onchange事件: </p>
<input type="text" id="txt1" />
<p>使用onpropertychange/oninput事件: </p>
<input type="text" id="txt2" />
<p>结果:</p>
<input type="text" id="txt" />

<script type="text/javascript">
var $ = function(o) {
return document.getElementById(o)
};

$('txt1').onchange = function() {
$('txt').value = this.value;
}

$('txt2').onpropertychange = function() {
$('txt').value = this.value;
}

if (window.addEventListener) {
$('txt2').addEventListener('input', function() {$('txt').value = this.value}, false);
}
</script>
</body>
</html>

3、onchange和onpropertychange详细区别

当一个HTML元素的属性用javascript改变的时候，都能通过 onpropertychange来捕获。例如一个 <input name="text1" id="text1" />对象的value属性被页面的脚本修改的时候，onchange无法捕获到，而onpropertychange却能够捕获。
也就是说：onpropertychange 事件在用键盘每改变一下文本框的值或用js改变其值便会触发一下，而onchange只有在用键盘改变其值，然后在失去焦点(onblur)后才触发，用 js改变其值不能触发!onpropertychange和onchange都不管文本框中的实际值有没有变，只要有改的相应操作就可能触发。有时当上面两时间都不能满足需求时，可以考虑只用onblur。

4、还有一点要注意到，当onblur和onchange事件一起用时，onblur会出问题。。。。

详见如下

测试页面：

<html>
<head><title>通过js改变文本框中的值后触发的事件：onpropertychange事件</title></head>
<body>

<div id="test1">
<b>测试onpropertychange事件和onchange事件一起用时：</b><br>
<font color="red">测试结果：onpropertychange事件在用键盘每改变一下文本框的值或用js改变其值便会触发一下，而onchange只有在用键盘改变其值，然后在失去焦点后才触

发，用js改变其值不触发</font>
<br>
<input name="haha1" type="text" onpropertychange="alert('触发了onpropertychange事件！')" οnchange="alert('触发了onchange事件！')" size="30" >
<input name="testbutton1" value="通过js改变文本框中的值" type="button" οnclick="document.getElementById('haha1').value='js改变文本框后的值'">
<br>
<br>
<br>

<div id="test2">
<b>测试只有onblur和onchange事件时：</b><br>
<font color="red">测试结果：onchange先触发，onblur后触发</font>
<br>
<input name="haha2" type="text" οnblur="alert('触发了onblur事件！')" οnchange="alert('触发了onchange事件！')" size="30" >
<input name="testbutton2" value="通过js改变文本框中的值" type="button" οnclick="document.getElementById('haha2').value='js改变文本框后的值'">
<br>
<div>
<br>
<br>
<br>

<div id="test3">
<b>测试当onblur和onpropertychange事件一起用时：</b><br>
<font color="red">测试结果：onblur好象出了问题，只要用键盘在文本框中随便输入一个值，便会触发它。可能是onpropertychange把它惹毛了。。。^-^</font>
<br>
<input name="haha3" type="text" οnblur="alert('触发了onblur事件！')" onpropertychange="alert('触发了onpropertychange事件！')" size="30" >
<input name="testbutton3" value="通过js改变文本框中的值" type="button" οnclick="document.getElementById('haha3').value='js改变文本框后的值'">
<br>
<div>
<br>
<br>
<br>

<div id="test4">
<b>测试有onblur、onpropertychange事件和onchange事件一起用时：</b><br>
<font color="red">测试结果：onblur在和onpropertychange一起用时的问题仍然存在</font>
<br>
<input name="haha4" type="text" οnblur="alert('触发了onblur事件！')" onpropertychange="alert('触发了onpropertychange事件！')" οnchange="alert('触发了

onchange事件！')" size="30" >
<input name="testbutton4" value="通过js改变文本框中的值" type="button" οnclick="document.getElementById('haha4').value='js改变文本框后的值'">
<br>
<div>

</body>
</html>

脚本应用：
function textCounter(field,maxlimit)
{
if(field.value.length > maxlimit)
{
field.value = field.value.substring(0,maxlimit);
}
}

iteye_4568

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
关于onBlur,onFocus,onChange,onpropertychange,Onselect事件

onBlur:当失去输入焦点后产生该事件onFocus:当输入获得焦点后，产生该文件Onchange:当文字值改变时，产生该事件onpropertychange:当元素属性改变时，产生该事件（限IE浏览器）Onselect:当文字加亮后，产生该文件 1、可以这样说，onpropertychange要比onchange先触发事件，前者是有连带反映的。举个例子，前者更适合做搜索...
复制链接

扫一扫