onkeydown、onkeyup、onclick、onchange、oninput、onpropertychange 的用法和区别
onkeydown、onkeyup、onclick
onkeydown 是按键按下时触发;
onkeyup 是按键弹起时触发;
onclick 是按键按下并弹起时触发。
有一种情况,就是按住按键不放,此时会不断地触发 onkeydown,但 onkeyup、onclick 只是在抬起按键的时候触发一次。
要实时检测正在输字的文本框中输入了多少文字,怎么办?
用 onkeyup 不可取!
如果按住按键不放,文字会一直输进去,可是 onkeyup 只触发一次。况且如果不是按键,是鼠标右键粘贴怎么办?
用 onkeydown 不可取!
onkeydown 虽然会不断地触发,但是在它触发的时候,文字还没有输入进去。
oninput, onpropertychange, onchange 的用法
onchange 触发事件必须满足两个条件:
a)当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本触发无效)
b)当前对象失去焦点(onblur);
onpropertychange 的话,只要当前对象属性发生改变,都会触发事件
oninput 是 onpropertychange 的非 IE 浏览器版本,支持 firefox 和 opera 等浏览器,但有一点不同,它绑定于对象时,并非该对象所有属性改变都能触发事件,它只在对象 value 值发生改变时奏效。
oninput、onpropertychange 是为了弥补 onchange 的缺陷产生的
oninput 是 Chrome 支持的,onpropertychange 是 IE 支持的。
使用 keydown keypress keyup change 等事件,都不能实时监听input输入框的变化,尤其是在手机上使用中文输入法的时候,所以这时候需要用到 2 个事件 - “onchange ,onpropertychange ”。
jQuery
$('body').on('input propertychange', '#id_q', function () {
// do something
});
原生 javascript 方法
function $(id) {
return document.getElementById(id);
}
$('id_q').addEventListener('input', function () {
// do something
});
$('id_q').addEventListener('propertychange', function () {
// do something
});