表单常用事件

发表于 2016-09-08

onchange

onchange 事件，当文本域的内容发生改变时，就会触发。
支持该事件的元素有：input(type=”text”)、select、textarea
具体触发条件是：当文本域的内容（value）改变，并且离开焦点之后，就会触发事件。
（因此，通过 js 来赋予内容，是不会触发该事件的）

onpropertychange

onpropertychange 事件，当元素的某个属性值（属性值包括样式的属性、自定义属性等）被修改，就会触发该事件。
单击 input 会触发，是因为单击聚焦时，修改了元素的 _change_attached 这个属性值。当同时有多个属性值被改变时，则会触发相应次数的 onpropertychange 事件。
在 onpropertychange 事件的回调函数中，我们可以对其传一个对象，通过对象我们可以获取当前修改的属性值名称，如：

document.getElementById("xxx").attachEvent('onpropertychange', function(obj) {
    console.log( obj.propertyName );
    // 通过这个属性名，可以进行不同操作
    if ( obj.propertyName === "value" ) {
        alert( "value change" );
    } else {
        console.log( "others" );
    }
});

然而，onpropertychange 事件只能用于 IE，火狐等非 IE 浏览器应用 oninput 代替。
但是 oninput 事件只在 input 的 value 值发生改变时触发，必须是键盘输入才有效（包括剪切粘贴）。
另外，当使用 jq 的 data() 方法修改变量值时不会触发事件
（没有试验）P.S. onpropertychange的bug
在代码实现时，发现在响应用户onclick了textarea时，如果使用obj.className=”XX”;来改变textarea输入框中字体的样式，会导致在ie下会有在输入第一个字符的时候onpropertychange不会触发的bug，因此需要这样设置：obj.style.color=”#000”;

粘贴事件 onpaste

Opera是不支持onpaste事件的。IE6-8，Safari，firefox 3都支持

复制事件 oncopy

剪切事件 oncut

IE6-8，Safari，firefox 3都支持