表单事件（JavaScript）

常见的表单事件类型：1.input输入事件关注输入过程var textInput = document.getElementById("myInput")var radios = document.getElementsByName("sex")textInput.oninput = function(){console.log("input", this.value)}2.change更新事件

~历桑

3465人浏览 · 2022-02-25 16:33:40

~历桑 · 2022-02-25 16:33:40 发布

常见的表单事件类型：

1.input输入事件关注输入过程

var textInput = document.getElementById("myInput")
var radios = document.getElementsByName("sex")
textInput.oninput = function(){
            console.log("input", this.value)
        }

2.change更新事件关注输入结果

textInput.onchange = function(){
            console.log("change", this.value)
        }

3.focus 获取焦点事件

textInput.onfocus = function(){
            console.log("focus", this.value)
        }

4.blur 失去焦点事件

textInput.onblur= function(){
            console.log("blur", this.value)
        }

5.select 选择事件

textInput.onselect= function(e){
            console.log("select", e.select) // ? 
        }

6.reset重置事件事件目标是form

var form = document.querySelector("form")
form.onreset = function(e){
            // alert("即将重置")
            // var msg = prompt("请说明你要重置的原因?")
            var bool = confirm("确定要重置表单吗?")
            if(!bool){
                e.preventDefault()
            }
        }

7.submit事件表单提交事件事件目标是form

        form.onsubmit = function(e){
            // 阻止表单自动提交
            e.preventDefault()
        }

总结：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表单事件</title>
</head>
<body>
    <form action="">
        <!-- 回顾: input的type类型值有checkbox, text, radio, file, image, submit, button, number, password, email, reset, range, prgress, color, time, date等等-->
        <label for="myInput">账号:</label>
        <input type="text" id="myInput">
        <input type="radio" name="sex">
        <input type="radio" name="sex">
        <input type="reset">
        <input type="submit"> <button>提交</button>
        <input type="color" id="color">
    </form>

    <script>
        var textInput = document.getElementById("myInput")
        var radios = document.getElementsByName("sex")
        // 1, input输入事件 关注输入过程
        textInput.oninput = function(){
            console.log("input", this.value)
        }
        // 2, change更新事件  关注输入结果
        textInput.onchange = function(){
            console.log("change", this.value)
        }
        // 3, focus 获取焦点事件 
        textInput.onfocus = function(){
            console.log("focus", this.value)
        }
        // 4, blur 失去焦点事件 
        textInput.onblur= function(){
            console.log("blur", this.value)
        }
        // 5, select 选择事件
        textInput.onselect= function(e){
            console.log("select", e.select) // ? 
        }   
        var form = document.querySelector("form")
        // 6, reset 重置事件  事件目标是form
        form.onreset = function(e){
            // alert("即将重置")
            // var msg = prompt("请说明你要重置的原因?")
            var bool = confirm("确定要重置表单吗?")
            if(!bool){
                e.preventDefault()
            }
        }
        
        // 7, submit 表单提交事件  事件目标是form
        form.onsubmit = function(e){
            // 阻止表单自动提交
            e.preventDefault()
        }

        // 单选框, 可以绑定click, input, change事件, 建议使用change
        radios[0].onchange = function(){
            // radio的value值不管有没有选中, 都是on
            console.log(this.value, radios[1].value)
            // 单选或多选框通过checked属性获取选中状态
            console.log(this.checked, radios[1].checked)
        }

        // 总结: 常用的表单事件有
        // input, change, focus, blur, reset, submit, select


        color.onchange= function(){
            console.log(this.value)
        }
    
    </script>
</body>
</html>