表单事件网道(WangDoc.com),互联网文档计划
表单事件的种类 #input 事件 #input事件当、
input事件的一个特点,就是会连续触发,比如用户每按下一次按键,就会触发一次input事件。
input事件对象继承了InputEvent接口。
该事件跟change事件很像,不同之处在于input事件在元素的值发生变化后立即发生,而change在元素失去焦点时发生,而内容此时可能已经变化多次。也就是说,如果有连续变化,input事件会触发多次,而change事件只在失去焦点时触发一次。
下面是
/* HTML 代码如下
*/
function inputHandler(e) {
console.log(e.target.value)
}
var mySelect = document.querySelector('#mySelect');
mySelect.addEventListener('input', inputHandler);
上面代码中,改变下拉框选项时,会触发input事件,从而执行回调函数inputHandler。
select 事件 #select事件当在、
// HTML 代码如下
//
var elem = document.getElementById('test');
elem.addEventListener('select', function (e) {
console.log(e.type); // "select"
}, false);
选中的文本可以通过event.target元素的selectionDirection、selectionEnd、selectionStart和value属性拿到。
change 事件 #change事件当、
激活单选框(radio)或复选框(checkbox)时触发。用户提交时触发。比如,从下列列表(select)完成选择,在日期或文件输入框完成选择。当文本框或
// HTML 代码如下
//
//
//
//
//
function changeEventHandler(event) {
console.log(event.target.value);
}
如果比较一下上面input事件的例子,你会发现对于
invalid 事件 #用户提交表单时,如果表单元素的值不满足校验条件,就会触发invalid事件。
上面代码中,输入框是必填的。如果不填,用户点击按钮提交时,就会触发输入框的invalid事件,导致提交被取消。
reset 事件,submit 事件 #这两个事件发生在表单对象