事件（表单事件）

章鱼Cc_yoo

已于 2022-05-23 17:49:03 修改

阅读量604

点赞数 1

文章标签： html 前端 javascript

于 2022-05-23 17:17:03 首次发布

本文链接：https://blog.csdn.net/Cc200171/article/details/124930860

版权

这篇博客详细介绍了HTML表单中的几个关键事件，包括当元素获得焦点（focus）、失去焦点（blur）、表单提交（submit）、输入值改变（change和input）时的触发情况。特别提到了change事件与input事件的区别，change事件在元素值改变并失去焦点时触发，而input事件则是在值改变时即时触发。文中还给出了具体的锚点和城市选择案例作为示例。

摘要由CSDN通过智能技术生成

表单事件

1.focus 元素获得焦点时触发

2.blur 元素失去焦点时触发

3.submit（）提交表单

4.change 当input、textarea元素value值改变且失去焦点时，select元素选项改变时触发

5.input 当input、textarea元素value值改变同步触发事件，select元素选项改变时触发

change和input的区别
change：value发生改变，并失去焦点时触发
input: 只要value发生变化就触发


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单事件</title>
</head>
<body>
    <form action="http://www.csdn.net">
        <label for="">姓名</label>
        <input id="name" type="text" name="name">
    </form>
    <button>点我</button>
</body>
<script>
    var iptName = document.getElementById('name');

    // 获取焦点
    iptName.onfocus = function() {
        console.log("我被点了");
    }
    // 失去焦点
    iptName.onblur = function() {
        console.log("我好想出去呀！");
    }

    // submit()
    var form = document.querySelector("form");
    var btn = document.querySelector("button");
    btn.onclick = function() {
        form.submit();  // 相当于 <input type='submit' />
    }

    // change &&&& input
    iptName.onchange = function() {
        console.log('change');
    }
    iptName.oninput = function() {
        console.log('input');
    }

    // change和input的区别
    // change：value发生改变，并失去焦点时触发
    // input: 只要value发生变化就触发

锚点案例


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>锚点</title>
    <style>
        * {
            ma