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

news2024/11/17 9:57:21

文章目录

    • 前言
    • 一、常用事件
    • 二、常用事件绑定方式一
    • 三、常用事件绑定方式二
    • 四、onsubmit()表单事件特别绑定方式
      • 4.1 事件绑定方式一使得onsubmit()真正起效
    • 五、常见事件绑定小Bug
      • 绑定事件一不规范引发的Bug
      • 绑定事件二不规范引发的Bug

前言

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

一、常用事件

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

二、常用事件绑定方式一

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

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

<%@ 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>

运行结果：

请添加图片描述

三、常用事件绑定方式二

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

绑定方式二：通过元素方法调用，完成事件绑定

<%@ 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()真正地起作用

4.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

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

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

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

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

请添加图片描述

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

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

请添加图片描述

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

请添加图片描述

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/695256.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

VUE使用v-html解析失败和解决方案

VUE使用v-html解析失败和解决方案

有些时候我们拿到后端返回内容进行v-html解析的时候&#xff0c;会发现解析之后&#xff0c;页面展示的还是html内容&#xff0c;我分析了我遇到的情况&#xff0c;希望能帮到大家。 原因&#xff1a;是因为后端返回数据的时候没有对内容进行html做转义&#xff0c;导致页面输出…
阅读更多...
爬虫入门指南：学习爬虫的基础知识和技巧

爬虫入门指南：学习爬虫的基础知识和技巧

文章目录 爬虫基础知识什么是爬虫&#xff1f;爬虫的工作原理爬虫的应用领域 爬虫准备工作安装Python安装必要的库和工具 网页解析与XPath网页结构与标签CSS选择器与XPathXpath 语法XPath的基本表达式&#xff1a;XPath的谓语&#xff08;Predicate&#xff09;&#xff1a;XPa…
阅读更多...
数据挖掘与数据分析之统计知识篇

数据挖掘与数据分析之统计知识篇

1、自由度是什么&#xff1f;怎么确定&#xff1f; 统计学上&#xff0c;自由度是指当以样本的统计量估计总体的参数时&#xff0c;样本中独立或能自由变化的数据个数叫自由度。一般来说&#xff0c;自由度等于独立变量减掉其衍生量数。举例来说&#xff0c;变异数的定义是样本…
阅读更多...
Revit U型墩柱的绘制方法和生成柱方法

Revit U型墩柱的绘制方法和生成柱方法

一、Revit U型墩柱的绘制方法 这里教大家一个墩柱的绘制步骤&#xff0c;我们采用一级等级考试第八期中的U型墩柱试题来给大家演示绘制步骤。 首先我们要明白这里需要采用族样板来绘制&#xff0c;新建一个族样板打开我们的公制常规模型样板 进入立面绘制题目中所需要的参照先&…
阅读更多...
java基础(并发编程)-设计模式~同步模式之保护性暂停

java基础(并发编程)-设计模式~同步模式之保护性暂停

一、同步模式之保护性暂停定义 保护性暂停即Guarded Suspension&#xff0c;用在一个线程等待另一个线程的执行结果。 要点 有一个结果需要从一个线程传递到另一个线程&#xff0c;让他们关联到同一个Guarded Object。如果有结果不断从一个线程到另一个线程&#xff0c;那么…
阅读更多...
Covex combination和affine combination

Covex combination和affine combination

Covex combination和affine combination是两种常见的线性组合方法。 Covex combination&#xff08;凸组合&#xff09;是指在线性组合中&#xff0c;所有权重&#xff08;coefficients&#xff09;取非负值且总和为1的情况。也就是说&#xff0c;对于给定的一组向量或点集合&…
阅读更多...
Linux系统编程：详解进程地址空间

Linux系统编程：详解进程地址空间

目录 一. 进程空间的布局 二. 进程地址空间 2.1 早期CPU访问物理内存的方式 2.2 什么是虚拟地址&#xff08;进程地址空间&#xff09; 2.3 操作系统对地址空间的管理方法 三. 地址空间存在的意义 四. 总结 一. 进程空间的布局 在语言层面学习C/C时&#xff0c;根据变量…
阅读更多...
android studio 单独运行java 文件

android studio 单独运行java 文件

首先&#xff0c;创建一个新的java文件。 然后&#xff0c;在Test.java文件中写上如图所示的代码。 接下来&#xff0c;我们把目录模式从Android转换成Project。 打开.idea文件夹下的gradle.xml文件。 在gradle.xml文件中添加上红色方框中的内容。 <option name"delega…
阅读更多...
MySQL GROUP BY 多个字段的用法说明

MySQL GROUP BY 多个字段的用法说明

MySQL GROUP BY 多个字段的用法说明 1. 说明2. 举例附录 1. 说明 在 mysql 中使用 group by 的意思是分组查询。如果 group by 后面跟的是单个字段&#xff0c;那么表示按照这个字段分组查询&#xff0c;如果 group by 后面跟的是多个字段&#xff0c;那么表示按照这些字段的不…
阅读更多...
关于使用idea中遇到给Dependencies没有加入jar包，但是在war_exploded中lib有

关于使用idea中遇到给Dependencies没有加入jar包，但是在war_exploded中lib有

lib文件夹无jar包 Dependencies无jar包 war_exploded中存在此jar 原因是在此有jar包 当去掉时
阅读更多...
深入解析 css.1.5

深入解析 css.1.5

❑ 控制选择器的优先级。 ❑ 不要混淆层叠和继承。 ❑ 某些属性会被继承&#xff0c;包括文本、列表、表格边框相关的属性。 ❑ 不要混淆initial和auto值。 initial是一个CSS属性的初始值&#xff0c;它会将属性的值重置为浏览器默认值。例如&#xff0c;如果将background-co…
阅读更多...
其实失败才是人生常态，赢者通吃确实存在，但那不代表绝大多数人。

其实失败才是人生常态，赢者通吃确实存在，但那不代表绝大多数人。

其实失败才是人生常态&#xff0c;赢者通吃确实存在&#xff0c;但那不代表绝大多数人。 &#x1f4e2;今年的就业难度可能是之前5年最难的一年&#xff0c;也有可能是以后5年最好的一年。 &#x1f4e2;&#x1f4e2;疫情的回落&#xff0c;仿佛只带动了旅游业的发展&#x…
阅读更多...
在EasyCVR中调用快照接口返回404是什么原因？如何解决？

在EasyCVR中调用快照接口返回404是什么原因？如何解决？

EasyCVR视频融合平台基于云边端一体化架构&#xff0c;能在复杂的网络环境中将前端设备进行统一集中接入&#xff0c;实现视频资源的汇聚管理、直播鉴权、转码处理、多端分发、智能告警、数据共享等能力与服务。此外&#xff0c;平台也提供了丰富的API接口供用户自由调用、集成…
阅读更多...
【XKCD】XKCD 风格的图像

【XKCD】XKCD 风格的图像

目录 1. XKCD 2. 实战 1. XKCD xkcd是一种风格独特的漫画风格&#xff0c;以幽默、讽刺、科学和技术为主题。这种风格通常采用简单的线条和草图&#xff0c;表达出作者的思考和观点。xkcd的图像经常涉及科学、数学、计算机科学、社会和文化问题&#xff0c;以及作者个人的生…
阅读更多...
181_带你体验 Power BI 开发者模式 pbip

181_带你体验 Power BI 开发者模式 pbip

181_带你体验 Power BI 开发者模式 pbip 一、背景 如果你是一个 Power BI 重度用户&#xff0c;你是不是也有如下的情况&#xff1f; 是的&#xff0c;Power BI 的版本控制全靠复制一份重命名来实现&#xff0c;而且版本之间的特点和差异时间久了就不记得了&#xff0c;还要加…
阅读更多...
人工智能将怎样改变未来？TVP读书会带你探索！

人工智能将怎样改变未来？TVP读书会带你探索！

引言 数十年前&#xff0c;图灵抛出的时代之问“机器能思考吗&#xff1f;”&#xff0c;将 AI 从科幻拉至现实&#xff0c;随着无数计算机科学先驱的共同努力&#xff0c;人工智能已经发展为引领未来的战略性技术。 AI 无处不在&#xff0c;智能时代触手可及&#xff0c;从 NL…
阅读更多...
小程序 view clearfix 不起作用，边距还是被折叠

小程序 view clearfix 不起作用，边距还是被折叠

问题&#xff1a; 多个同级view情况下设置最后view clearfix&#xff0c;让底部露一些空白局域&#xff0c;此时clearfix不启作用。 .wxss .clearfix:before,.clearfix:after{content: "";clear: both;display: table;border-bottom: 1px solid black; } /*边距*/…
阅读更多...
软件测试金字塔是什么，它的目的是什么，以及它包含哪些层次？

软件测试金字塔是什么，它的目的是什么，以及它包含哪些层次？

一、测试金字塔的概念&#xff1a; 测试金字塔是2009年Mike Cohn在他的著作《Succeeding with Agile》一书正式提出的。他是一个类比的概念&#xff0c;形容每一层&#xff0c;或者说不同集成阶段测试覆盖率和知行效率之间的一个相对关系。 测试金字塔最初的原型分三层&#…
阅读更多...
如何找回删除的文件？这些文件恢复方法，超实用！

如何找回删除的文件？这些文件恢复方法，超实用！

大家快看看我&#xff01;我一不小心删除了非常重要的文件&#xff0c;突然不知道该怎么办了&#xff01;我对电脑的操作也不熟悉&#xff0c;不敢轻易进行操作&#xff01;大家有什么比较好的方式可以找回删除的文件吗&#xff1f; 在使用电脑时&#xff0c;误删文件的情况经常…
阅读更多...
基于Python所写的五子棋设计

基于Python所写的五子棋设计

点击以下链接获取源码资源&#xff1a; https://download.csdn.net/download/qq_64505944/87952977 《五子棋&#xff08;控制台版&#xff09;》程序使用说明 在PyCharm中运行《五子棋&#xff08;控制台版&#xff09;》即可进入如图1所示的系统主界面。 图1 游戏主界面 具…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023