为按钮和表单绑定事件常用的两种方式

已于 2023-06-30 16:28:29 修改
阅读量2.1k 收藏 5
点赞数 2
分类专栏： 每日小Bug解析 前端小知识 文章标签： javascript 前端 java
于 2023-06-28 15:27:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45344586/article/details/131397785
版权

文章目录

前言

在编写代码时，我们难免需要为一些按钮和表单绑定事件，以实现一些相应的功能，那么常用的事件有哪些呢，它们常用的绑定方式又是怎样的呢？接下来我们就来一起学习一下事件。

一、常用事件

事件名说明
onclick鼠标点击事件
onblur元素失去焦点
onfocus元素获得焦点
onload某个页面或者图像完成加载
onsubmit当表单提交时触发该事件
onkeydown某个键盘的键被按下
onmouseover鼠标被移到某元素之上
onmouseout鼠标从某元素移开

二、常用事件绑定方式

2.1 常用事件绑定方式一

在此无论是第一种方式还是第二种方式，笔者均以onblur()失去焦点事件举例

绑定方式一：通过HTML标签中的事件属性进行绑定

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>事件绑定练习</title>
</head>
<body>
    <form id="form1" method="post" action="#" onsubmit="form_checking()">
        <table>
            <tr>
                <th><label>用户姓名：</label></th>
                <th>
                    <input id="usernameInput" type="text" name="username" onblur="username_checking()"/><br>
                    <span id="usernameErr" style="display: none"><font color="red">用户名错误！！！</font></span>
                </th>
            </tr>
            <tr>
                <th><label>用户密码：</label></th>
                <th>
                    <input id="passwordInput" type="password" name="password" onblur="password_checking()"/><br>
                    <span id="passwordErr" style="display: none"><font color="red">密码错误！！！</font></span>
                </th>
            </tr>
            <tr>
                <th><input  type="submit" name="submit" value="登录"/></th>
                <th><input  type="reset" name="reset" value="重置"/></th>
            </tr>
        </table>
    </form>

    <script>
        function username_checking(){
            //设置返回值，以供onsubmit()提交表单使用
            var flag=false;
            //通过id获取用户名输入框元素对象
            var usernameInputEle = document.getElementById("usernameInput");
            //通过id获取用户名错误判定元素对象
            var usernameErrEle = document.getElementById("usernameErr");
            //获取用户名输入框元素对象的输入值
            var username = usernameInputEle.value;
            if(username!=null&&username!=""){
                //如果用户名不为空和空字符串，则用户名错误判定元素对象不展示
                usernameErrEle.style.display="none";
                flag=true;
            }else{
                //如果用户名为空或者空字符串，则用户名错误判定元素对象展示
                usernameErrEle.style.display="inline";
                flag=false;
            }
            return flag;
        }
        function password_checking(){
            //设置返回值，以供onsubmit()提交表单使用
            var flag=false;
            //通过id获取密码输入框元素对象
            var passwordInputEle = document.getElementById("passwordInput");
            //通过id获取密码错误判定元素对象
            var passwordErrEle = document.getElementById("passwordErr");
            //获取密码输入框元素对象的输入值
            var password = passwordInputEle.value;
            if(password!=null&&password!=""){
                //如果密码不为空和空字符串，则密码错误判定元素对象不展示
                passwordErrEle.style.display="none";
                flag=true;
            }else{
                //如果密码为空或者空字符串，则密码错误判定元素对象展示
                passwordErrEle.style.display="inline";
                flag=false;
            }
            return flag;
        }
        function form_checking(){
            return username_checking() && password_checking();
        }
    </script>
</body>
</html>

运行结果：

请添加图片描述

2.2 常用事件绑定方式二

在此无论是第一种方式还是第二种方式，笔者均以onblur()失去焦点事件举例

绑定方式二：通过DOM元素属性进行绑定

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>事件绑定练习</title>
</head>
<body>
<form id="form1" method="post" action="#">
    <table>
        <tr>
            <th><label>用户姓名：</label></th>
            <th>
                <input id="usernameInput" type="text" name="username"/><br>
                <span id="usernameErr" style="display: none"><font color="red">用户名错误！！！</font></span>
            </th>
        </tr>
        <tr>
            <th><label>用户密码：</label></th>
            <th>
                <input id="passwordInput" type="password" name="password"/><br>
                <span id="passwordErr" style="display: none"><font color="red">密码错误！！！</font></span>
            </th>
        </tr>
        <tr>
            <th><input  type="submit" name="submit" value="登录"/></th>
            <th><input  type="reset" name="reset" value="重置"/></th>
        </tr>
    </table>
</form>

<script>
    //通过id获取用户名输入框元素对象
    var usernameInputEle = document.getElementById("usernameInput");
    //为用户输入框绑定事件
    usernameInputEle.onblur=username_checking;
    function username_checking(){
        //设置返回值，以供onsubmit()提交表单使用
        var flag=false;
        //通过id获取用户名错误判定元素对象
        var usernameErrEle = document.getElementById("usernameErr");
        //获取用户名输入框元素对象的输入值
        var username = usernameInputEle.value;
        if(username!=null&&username!=""){
            //如果用户名不为空和空字符串，则用户名错误判定元素对象不展示
            usernameErrEle.style.display="none";
            flag=true;
        }else{
            //如果用户名为空或者空字符串，则用户名错误判定元素对象展示
            usernameErrEle.style.display="inline";
            flag=false;
        }
        return flag;
    }

    //通过id获取密码输入框元素对象
    var passwordInputEle = document.getElementById("passwordInput");
    //为密码输入框绑定事件
    passwordInputEle.onblur=password_checking;
    function password_checking(){
        //设置返回值，以供onsubmit()提交表单使用
        var flag=false;
        //通过id获取密码错误判定元素对象
        var passwordErrEle = document.getElementById("passwordErr");
        //获取密码输入框元素对象的输入值
        var password = passwordInputEle.value;
        if(password!=null&&password!=""){
            //如果密码不为空和空字符串，则密码错误判定元素对象不展示
            passwordErrEle.style.display="none";
            flag=true;
        }else{
            //如果密码为空或者空字符串，则密码错误判定元素对象展示
            passwordErrEle.style.display="inline";
            flag=false;
        }
        return flag;
    }

    //通过id获取表单元素对象
    var formEle = document.getElementById("form1");
    //为表单绑定事件
    formEle.onsubmit=form_checking;
    function form_checking(){
        return username_checking() && password_checking();
    }
</script>
</body>
</html>

运行结果：

请添加图片描述

三、onsubmit()表单事件特别绑定方式

在讲述表单事件特别绑定方式之前，我们先来完整运行上述两种绑定代码

事件绑定方式一完整运行：（我们看到onsubmit()无法起到表单格式有误时阻止提交的作用）
请添加图片描述

事件绑定方式二完整运行：（我们看到onsubmit()可以起到表单格式有误时阻止的功能）

请添加图片描述

通过运行结果我们可以看出，事件绑定一方式运行的效果并不是我们想要的，我们想要的是若用户名输入框或者密码输入框有一项不符合输入要求时，表单应做到无法提交，但目前来看表单无法阻止提交，也就是说onsubmit()并没有起到真正地作用，那么如何使之真正地起作用呢？接下来我们来看如何使onsubmit()真正地起作用

3.1 事件绑定方式一使得onsubmit()真正起效

事件绑定方式一：直接在元素框中添加事件，完成事件绑定

改动之处：实际上就是在方法前面加了一个return
在这里插入图片描述

完整代码：

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>事件绑定练习</title>
</head>
<body>
    <form id="form1" method="post" action="#" onsubmit="return form_checking()">
        <table>
            <tr>
                <th><label>用户姓名：</label></th>
                <th>
                    <input id="usernameInput" type="text" name="username" onblur="username_checking()"/><br>
                    <span id="usernameErr" style="display: none"><font color="red">用户名错误！！！</font></span>
                </th>
            </tr>
            <tr>
                <th><label>用户密码：</label></th>
                <th>
                    <input id="passwordInput" type="password" name="password" onblur="password_checking()"/><br>
                    <span id="passwordErr" style="display: none"><font color="red">密码错误！！！</font></span>
                </th>
            </tr>
            <tr>
                <th><input  type="submit" name="submit" value="登录"/></th>
                <th><input  type="reset" name="reset" value="重置"/></th>
            </tr>
        </table>
    </form>

    <script>
        function username_checking(){
            //设置返回值，以供onsubmit()提交表单使用
            var flag=false;
            //通过id获取用户名输入框元素对象
            var usernameInputEle = document.getElementById("usernameInput");
            //通过id获取用户名错误判定元素对象
            var usernameErrEle = document.getElementById("usernameErr");
            //获取用户名输入框元素对象的输入值
            var username = usernameInputEle.value;
            if(username!=null&&username!=""){
                //如果用户名不为空和空字符串，则用户名错误判定元素对象不展示
                usernameErrEle.style.display="none";
                flag=true;
            }else{
                //如果用户名为空或者空字符串，则用户名错误判定元素对象展示
                usernameErrEle.style.display="inline";
                flag=false;
            }
            return flag;
        }
        function password_checking(){
            //设置返回值，以供onsubmit()提交表单使用
            var flag=false;
            //通过id获取密码输入框元素对象
            var passwordInputEle = document.getElementById("passwordInput");
            //通过id获取密码错误判定元素对象
            var passwordErrEle = document.getElementById("passwordErr");
            //获取密码输入框元素对象的输入值
            var password = passwordInputEle.value;
            if(password!=null&&password!=""){
                //如果密码不为空和空字符串，则密码错误判定元素对象不展示
                passwordErrEle.style.display="none";
                flag=true;
            }else{
                //如果密码为空或者空字符串，则密码错误判定元素对象展示
                passwordErrEle.style.display="inline";
                flag=false;
            }
            return flag;
        }
        function form_checking(){
            return username_checking() && password_checking();
        }
    </script>
</body>
</html>

运行效果：（我们看到onsubmit()可以起到表单格式有误时阻止的功能）
请添加图片描述

四、常见事件绑定小Bug

当我们没有正确使用事件绑定事件时，例如绑定事件一的绑定方法需要加上()，而我们不加()则会出现问题；事件绑定方式二的绑定方法不需要加上()，而我们加上()也会出现问题

4.1 绑定事件一不规范引发的Bug

若我们使用绑定事件方式一绑定事件，但不给绑定方法加上()：
在这里插入图片描述

运行效果：（我们发现方法会失效）

请添加图片描述

4.2 绑定事件二不规范引发的Bug

若我们使用绑定事件方式二绑定事件，但给绑定方法加上了()：

请添加图片描述

运行效果：（同样我们发现方法会失效，并且onblur()事件会被直接触发且失效）

请添加图片描述

因此，我们一定要规范正确的使用事件绑定！！！

五、总结

当我们使用事件绑定方式一绑定事件时，事件属性通通加上()

在这里插入图片描述

当我们使用事件绑定方式二绑定事件时，元素属性通通不加()

在这里插入图片描述

OK！！！结束！！！

极小白
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js第13天（事件绑定方式）
weixin_61884985的博客
09-04 2644
js事件的绑定方式，事件的执行机制，以及事件传播以及事件委托。
html form表单绑定按钮提交,HTML form表单的两种提交方式，submit和button的用法
weixin_39622760的博客
06-18 1576
1.当输入用户名和密码为空的时候，需要判断。这时候就用到了校验用户名和密码，这个需要在jsp的前端页面写；有两种方法，一种是用submit提交。一种是用button提交。方法一：在jsp的前端页面的头部插入一个js方法：function checkUser(){var result = document.getElementById("userid").value;var password = d...
HTML实战(3)：实现按钮的功能
nianfen的博客
05-16 544
本文内容为html入门到精通，是本人学习过程整理所得，能让读者尽快实现自己想要的效果
Vue03---事件绑定和表单绑定
m0_37756431的博客
03-10 2577
目录 一、事件绑定 1、点击事件两种写法 2、阻止form表单提交的默认事件 事件修饰符 按键修饰符 系统修饰符 鼠标按键修饰符 二、表单绑定 vue表单绑定修饰符 一、事件绑定 1、点击事件两种写法 @click="handleClick" @click="handleClick($event)" $event可以对dom元素进行获取或修改标签的属性 2、阻止form表单提交的默认事件 1.在表单上绑定事件@click="handleClick"，方法中写e
表单提交的两种方式
weixin_44428184的博客
06-24 6550
1.type="submit"方式 优点：简单，可以上传附件 缺点：数据是单向的传递的，无法获取服务端传回来的信息，因此难以实现一些在数据传过去但服务器还未处理成功返回响应的中间状态界面。 （1）使用form表单进行上传文件需要为form添加enctype=”multipart/form-data” 属性，除此之外还需要将表单的提交方法改成post,method=”post”, input type的类型需要设置为file （2）input的submit按钮会导致表单提交和页面跳转，即使acti..
Element 表单按钮事件
ge18737872469的博客
07-10 2043
Elementui 表单按钮事件
【jQuery】jQuery操作之如何绑定事件_05
青春木鱼的博客
07-13 1049
在jQuery中，实现事件绑定有两种方式，一种是通过事件方法进行绑定(仅限常用事件)，另一种是通过on()方法进行绑定(标准)。jQuery的事件和DOM中的事件相比，省略了开头的“on”，如jQuery中的click()对应DOM中的onclick。并且，jQuery的事件方法允许为一个事件绑定多个事件处理函数，只需多次调用事件方法，传入不同的函数即可。...............
layui 之button 事件绑定的一种方法
Mihu_Tutu的博客
01-05 1689
添加button按键 button 事件监听 使用util.event作事件监听，并定义函数 定义弹出层 函数实现
Vue之事件绑定（初识Vue事件）
百赢出品，必属精品
04-19 1668
Vue 的事件绑定是指通过 Vue 提供的v-on指令来监听 DOM 事件，当特定事件被触发时执行相应的方法或表达式。事件绑定在 Vue 中是一种重要的交互机制，它使得开发者可以轻松地响应用户的交互行为，并进行相应的逻辑处理。当在 Vue 中使用事件绑定时，通常会使用v-on或简写形式来监听 DOM 事件，并在触发事件时执行相应的方法。监听事件：使用v-on指令来监听 DOM 事件，语法为v-on:event，其中event是要监听的事件名，例如clickmouseover等。也可以使用简写形式。
html表格中加按钮,表单中的按钮有三种
weixin_39984661的博客
05-31 3090
表单中的按钮有哪几种？各有什么作用type="button" type="image" 你下个dreamweaver 上面都有 不管是什么代码自动下拉列表提示 网页编程必备 答案补充 或者你把问题转到编程type="button" type="submit"打开Dreamweaver软件，鼠标左键选择新建【HTML】，在代码窗口上，修改网页title标签，比如表单中添加按钮，如下图所示。接着，在【...
JavaScript给按钮绑定点击事件（onclick）的方法
10-24
事件委托是一种优化技术，通过在父元素上绑定事件监听器，而不是在每个子元素上单独绑定。当事件冒泡到父元素时，处理程序会被调用： ```javascript document.getElementById('parent').addEventListener('click', ...
Spring MVC---数据绑定和表单标签详解
08-31
在Spring MVC框架中，数据绑定和表单标签是开发Web应用程序时...总的来说，Spring MVC的数据绑定和表单标签库为开发复杂的Web应用程序提供了强大的工具，使开发者能够专注于业务逻辑，而不是繁琐的表单处理和数据转换。
html表单的几种提交方式总结
09-28
本文将详细介绍HTML表单的几种提交方式，帮助开发者更好地理解和运用这些方法。 1. **常规submit按钮提交** 这是最常见、最基本的提交方式。在`<form>`标签中定义一个`<input type="submit">`按钮，当用户点击这个...
表单元素的submit()方法和onsubmit事件应用概述
09-05
这两种方式都能有效地阻止表单的提交。 总结来说，`submit()`方法和`onsubmit`事件是HTML表单编程的关键，它们提供了对表单提交的控制。在使用过程中，需要注意避免命名冲突、正确处理事件回调的返回值，以及充分...
详细分析vue表单数据的绑定
10-15
本文将详细介绍 `v-model` 的基本用法以及在不同表单元素中的应用，包括单选按钮（radio）、复选框（checkbox）和选择列表（select）的绑定，还有 `v-model` 修饰符的使用。 首先，`v-model` 是Vue中的一个指令，它...
JavaScript青少年简明教程：函数及其相关知识（下）
cnds123的专栏
07-26 648
JavaScript青少年简明教程：函数及其相关知识（下）
VUE3自定义指令防止重复点击多次提交
最新发布
MadSnail00的博客
07-30 72
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 407
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
题目要求：表单：一个文本框，一个按钮，按钮内容为：欢迎您，按钮绑定onclick事件，事件处理程序需获取此文本框五种方法获取元素getelementbyidgetelementsbynamegetelementsbytagnamegetelementbyclassnamequeryselector
05-02
这题要求我们用文本框和按钮创建一个表单，按钮的内容为“欢迎您”，并且需要将按钮和onclick事件绑定起来。点击按钮后，需要运行一个事件处理程序，该程序需要使用五种获取元素的方法从文本框中获取内容。 首先，我们需要在HTML文档中创建一个表单。使用HTML的标签和属性可以创建文本框和按钮，并设置按钮的onclick事件为我们编写的处理程序。 在处理程序中，我们需要使用JavaScript来获取文本框的内容，并使用五种方法中的任何一种来获取该元素。getelementbyid是最常用的方法，它根据元素id属性获取该元素。getelementsbyname和getelementsbytagname方法根据元素的name和tag名称获取元素，但这两种方法都返回一组元素。getelementbyclassname方法根据类名获取元素，它不适用于所有浏览器。最后是querySelector方法，它使用CSS选择器来获取元素，它支持复杂的选择器和组合器。 在使用任何一种方法获取文本框元素后，我们可以使用.value属性获取文本框中的文本内容。获取文本框的内容后，我们可以将内容显示到页面上或将其发送到服务器。 总之，这是一个简单的练习，旨在让我们了解HTML和JavaScript如何协同工作。通过使用文本框和按钮，可以创建各种类型的表单和互动用户界面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值