最近学习vue的表单事件时，学习到相关的表单事件，这一块比较薄弱，没什么了解，所以写一篇博客记录一下

什么是表单

表单实际上就是form包裹input、select、textarea等标签，一般来说我们会使用一个button标签，当点击button时，就会触发form提交事件。button的完整写法为

<button type="submit"></buttton>

表单提交往往会有个默认刷新行为，一般我们都会使用e.preventDefault取消。

input事件

当input、select、texttarea的值发生变化时，就会触发input事件。它的特点是，操作一次就会触发一次。

<input id="ipt" type="text">

ipt.addEventListener('input',()=>{
  console.log('触发了input事件')
})

上面的代码，每一次对text进行修改，就会触发input事件，执行回调函数。

<select name="" id="ipt">
  <option value="1">选项一</option>
  <option value="2">选项二</option>
</select>

ipt.addEventListener('input',()=>{
  console.log('触发了input事件')
})

上面的select标签同理,每次选择不同的选项，也会触发input事件，可以说input是范围比较大的表单事件，包含的内容很多，而且特点是变化后立即发生。

select是选中文本事件,当我们在input内选中文本时，会触发这个事件，可以通过e.target中的value属性拿到选中的文本

<input id="ipt" type="text">

ipt.addEventListener('select',(e)=>{
  console.dir(e.target.value)
})

上面的代码直接打出了选中的文本。

上面的input事件的特点我们已经知道了，虽然input事件非常好，但是有时候过于频繁的触发机制不太符合需求，所以我们需要用到change事件，它的特点就是值修改完成后才会触发。

对于select标签来说，change事件基本跟input是一样的，但是input有明显的特别之处，例如

<input id="ipt" type="text">

ipt.addEventListener('change',()=>{
  console.log('触发了change事件')
})

只有值完成改变并且失去焦点的时候才会触发这个事件

当表单提交时，如果表单的值不满足条件，那么就会触发invalid事件。

<form>
  <input type="text" required oninvalid="console.log('invalid input')" />
  <button type="submit">提交</button>
</form>

上面的代码中，由于表单是必填的，当用户未填写完成但是点击提交时，就会触发invalid事件

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

submit事件当表单数据向服务器提交时触发。注意，submit事件的发生对象是

元素，而不是元素，因为提交的是表单，而不是按钮。

这个接口返回的是变动的内容。

<input type="text" id="ipt">

ipt.addEventListener('input',(e)=>{
  console.log(e.data)
})

上面的代码会返回变动的文本内容，例如，在文本框中输入1，就会打印1，再输入2，就会打印2，如果此时删除，那么会返回null

这个接口用于输入的类型，包括以下内容：

可以获取到输入的内容文本