A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 熊丽 中级黑马   /  2013-8-3 22:11  /  1508 人查看  /  4 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

本帖最后由 熊丽 于 2013-8-4 10:00 编辑

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

4 个回复

倒序浏览
1. onpropertychange:当在对象上进行属性改变时候触发;
2. onchange:当对象内容或者选择内容改变时候触发。
回复 使用道具 举报
本帖最后由 彭家贰小姐 于 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>

点评

嗯,受教啦  发表于 2013-8-4 09:59
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马