携手创作,共同成长!这是我参与「掘金日新计划 · 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/…