JS-HTML事件/表单事件

HTML事件/表单事件

 

onsubmit/表单提交事件

触发:在提交表单时触发，onsubmit属性只在<from>标签中使用，提交表单前会触发

提交表单有三种方式:

1. <input type='submit'/> 提交按钮提交表单

2. <input type=‘image’src=‘’/> 图片提交表单

3. 利用js的 表单对象的 submit()方法来提交表单

//提交表单
    let fromObj = document.querySelector("form");
    //获得表单对象

    fromObj.onsubmit = function(){}
    //表单对象的onsubmit事件

    document.querySelector("button").onclick = function(){
        fromObj.submit();
        //通过表单对象的submit()方法提交表单
        //不触发表单对象的onsubmit事件
    }

 

onreset/重置事件

触发:当表单中的重置按钮被点击时触发,onreset 属性只在 <form> 标签中使用，点击重置按钮前会触发。

重置表单有两种方式:

1. <input type='reset'/> 重置按钮重置表单数据

2. 利用js重置表单,利用js调用表单对象的 reset( ) 重置表单

//重置表单
    let fromObj = document.querySelector("form");
    //获得表单对象

    fromObj.onreset = function(){}
    //表单对象的onreset事件

    document.querySelector("button").onclick = function(){
        fromObj.reset();
        //通过表单对象的reset()方法提交表单
        //不触发表单对象的onreset事件
    }

表单的 提交按钮和重置按钮 只有放到表单中才能起作用

 

onfocus/获得焦点时间

触发:当元素获得焦点时触发

//获得聚焦点事件
    let inputObj = document.querySelector("input");
    //获取input输入框对象

    inputObj.onfocus = function(){}
    //输入框获得焦点触发事件

 

 

onblur/失去焦点时间

触发:当元素失去焦点时触发

 //失去聚焦点事件
 let inputObj = document.querySelector("input");
 //获取input输入框对象
 ​
 inputObj.onblur = function(){}
 //失去焦点触发事件
 //多用于时时检测用户输入类容

 

onchange事件

触发:当元素的值发生改变时触发

支持元素:

1. <input type = "text">

2. <input type = "number">

3. <textarea>

   上述标签内容发生变化并且失去焦点时触发

4. <select>

   下拉菜单 选项卡(option)发生变化时触发