黑马程序员技术交流社区

标题: onchange与onpropertychange的区别 [打印本页]

作者: 熊丽 时间: 2013-8-3 22:11
标题: onchange与onpropertychange的区别
本帖最后由熊丽于 2013-8-4 10:00 编辑

当一个HTML元素属性改变时，都可以通过onchange与onpropertychange触发事件改变，可是他们有什么区别呢？

作者: 许庭洲 时间: 2013-8-4 06:05
1. onpropertychange：当在对象上进行属性改变时候触发;
2. onchange：当对象内容或者选择内容改变时候触发。

作者: 彭家贰小姐 时间: 2013-8-4 09:22
本帖最后由彭家贰小姐于 2013-8-4 09:25 编辑

onchange触发事件必须满足两个条件：
a）当前对象属性改变，并且是由键盘或鼠标事件激发的（脚本触发无效）
b）当前对象失去焦点(onblur)；
onpropertychange：
只要当前对象属性发生改变，都会触发事件，但是它是IE专属的；
oninput：
是onpropertychange的非IE浏览器版本，支持firefox和opera等浏览器，但有一点不同，它绑定于对象时，并非该对象所有属性改变都能触发事件，它只在对象value值发生改变时奏效。
onpropertychange与oninput控制textarea的文本提示:

<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
      function checkLength() {
         var textareaValue = $("#textarea_Info")[0].value;
         var txtAlreadyValue = $("#txtAlready")[0].value;
         var txtSurplusValue = $("#txtSurplus")[0].value;
         if (textareaValue.length > 200) {
            textareaValue = textareaValue.slice(0, 200);
            $("#txtAlready").attr("value", 200);
            $("#txtSurplus").attr("value", 0);
         }
         else {
            $("#txtAlready").attr("value", textareaValue.length);
            $("#txtSurplus").attr("value", 200 - eval(txtAlreadyValue));
         }
      }
</script>
</head>
<body>
<form id="form1" runat="server">
      <div>
         <textarea id="textarea_Info" name="textarea_Info" runat="server" rows="4" cols="50"></textarea>
         <br />
         <br />
         已有字数：<input type="text" id="txtAlready" value="0" disabled="disabled" />
         剩余字数：<input type="text" id="txtSurplus" value="200" disabled="disabled" />
      </div>
</form>
</body>

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2