【前端入门】常用表单事件及接口细讲~

258 阅读2分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第22天,点击查看活动详情

常见的input 事件 & select 事件

input事件当<input><select><textarea>的值发生变化时触发

select事件当在<input><textarea>里面选中文本时触发

input事件的一个特点,就是会连续触发,比如用户每按下一次按键,就会触发一次input事件;对于复选框(<input type=checkbox>)或单选框(<input type=radio>),用户改变选项时,也会触发这个事件

change 事件

change事件当<input><select><textarea>的值发生变化时触发

具体触发场景大约为:

  • 激活单选框(radio)或复选框(checkbox)时触发
  • 用户提交时触发。比如,从下列列表(select)完成选择,在日期或文件输入框完成选择
  • 当文本框或<textarea>元素的值发生改变,并且丧失焦点时触发

例如:

function changeEventHandler(event) {
  console.log(event.target.value);
}

reset 事件,submit 事件

reset事件当表单重置(所有表单成员变回默认值)时触发

submit事件当表单数据向服务器提交时触发 (注意:submit事件的发生对象是<form>元素,而不是<button>元素。因为提交的是表单,而不是按钮)

input事件的实例

InputEvent接口主要用来描述input事件的实例

InputEvent构造函数的两个参数:

  • 第一个参数是字符串,表示事件名称,该参数是必需的
  • 第二个参数是一个配置对象,用来设置事件实例的属性,该参数是可选的
    • inputType:字符串,表示发生变更的类型
    • data:字符串,表示插入的字符串。如果没有插入的字符串(比如删除操作),则返回null或空字符串
    • dataTransfer:返回一个 DataTransfer 对象实例,该属性通常只在输入框接受富文本输入时有效

InputEvent.data属性:返回一个字符串,表示变动的内容 InputEvent.inputType属性:返回一个字符串,表示字符串发生变更的类型

写在最后

以上习题&笔记从大佬们的论坛学习而来,特感谢大佬们的知识分享~ (学习技术知识,果然要看大佬们的技术博客,大家有好的推荐也欢迎指引我这个小白哈,感恩!)

附上学习链接,感谢这些大佬出题和解答:wangdoc.com/javascript/…