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事件！')" onchange="alert('触发了onchange事件！')" size="30" >
<input name="testbutton1" value="通过js改变文本框中的值" type="button" onclick="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" onblur="alert('触发了onblur事件！')" onchange="alert('触发了onchange事件！')" size="30" >
<input name="testbutton2" value="通过js改变文本框中的值" type="button" onclick="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" onblur="alert('触发了onblur事件！')" onpropertychange="alert('触发了onpropertychange事件！')" size="30" >
<input name="testbutton3" value="通过js改变文本框中的值" type="button" onclick="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" onblur="alert('触发了onblur事件！')" onpropertychange="alert('触发了onpropertychange事件！')" onchange="alert('触发了
onchange事件！')" size="30" >
<input name="testbutton4" value="通过js改变文本框中的值" type="button" onclick="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);
}
}
分享到：
相关推荐
6. `onpropertychange`: 类似于`onChange`，但在属性值改变时即时触发，不需等待失去焦点。 7. `onClick`: 用户单击元素时触发，常用于链接或按钮。 8. `onDblclick`: 用户双击元素时触发，可以用于实现双击操作，如...
- `onPropertyChange`: 如果文本框的任何属性发生变化时都会触发，非常敏感，包括粘贴、按键事件或`onChange`。 接下来，我们看看jQuery如何处理这些事件。jQuery提供了简洁的API来绑定事件，如`focus()`和`blur()`...
- **`onChange`**：当表单元素的内容发生变化时触发，例如选择不同的选项或更改文本框中的值。 - **`onFocus`**：当表单元素获得焦点时触发，可用于高亮显示或提供输入建议。 - **`onReset`**：当重置表单时触发...
JavaScript事件是编程中用于响应用户或浏览器行为的机制。这些事件可以是用户交互（如点击、滚动或键盘输入），也可以是页面加载或状态更改。以下是JavaScript事件的详细概述： 1. 用户交互事件： - `onclick`：当...
- **`onchange`**：表单元素中的值发生变化时触发。 - **`onselect`**：文本被选中时触发。 - **`onsubmit`**：提交表单时触发。 - **`onreset`**：重置表单时触发。 ##### 6. 拖放事件 - **`ondrag`**：拖动元素...
### 鼠标事件大全与跨浏览器兼容性详解 在Web开发中，了解并掌握鼠标事件及其在不同浏览器中的支持情况对于创建响应式和交互性强的网页至关重要。本文将全面解析一系列鼠标事件，并探讨它们在Internet Explorer（IE...
### JS中的事件分类详解 JavaScript（简称JS）作为前端开发的核心技术之一，广泛应用于网页交互设计与动态效果实现。为了更好地理解和应用JS事件，本文将详细介绍JS中的各种事件及其应用场景。 #### 1. 鼠标事件 ...
### JavaScript事件汇总与触发时机详解 #### 一、概述 JavaScript事件是Web开发中的核心概念之一，它们使得网页能够响应用户的交互行为以及其他类型的活动。本文档详细总结了各种JavaScript事件及其触发时机，帮助...
### JavaScript Document 事件详解 #### 1. `onabort` - **定义**：该事件触发于用户中断图像加载或文档加载操作时。 - **应用场景**：通常用于在图像加载失败时进行错误处理或提示用户。 #### 2. `onactivate` - ...
9. `focus()`: 使元素获得焦点，触发`onfocus`事件。 10. `getBoundingClientRect()`: 返回元素的大小及其相对于视口的位置。 11. `insertBefore()`: 在指定的子节点前插入一个新的子节点。 12. `removeAttribute()`...