当前位置： 首页 > news >正文

【Web前端|第三篇】JavaScript事件

news 2025/9/26 8:05:25

目录

（五）JavaScript事件

1、事件理解：

2、事件绑定：

3、常见事件：

（六）综合案例

（五）JavaScript事件

1、事件理解：

如下图所示的百度注册页面，当我们输入完用户名，百度会自动提示该用户名是否存在。

思考：百度是怎么知道我们用户名输入完了呢？

答案：借助JavaScript事件实现。

什么是事件呢？HTML事件是发生在HTML元素上的 “事情”。

例如：

  • 按钮被点击
  • 鼠标移到元素上
  • 输入框失去焦点
  • ........

事件监听：

程序员给事件绑定函数，当事件触发时，可以自动的完成对应的功能。这就是事件监听。

例如：上述百度注册页面中，我们给用户名输入框的失去焦点事件绑定函数，当我们用户输入完内容，在标签外点击了鼠标，对于用户名输入框来说，失去焦点，然后执行绑定的函数：进行用户名内容的校验等操作。

JavaScript事件是JS非常重要的一部分，对于JavaScript事件的学习主要围绕2点：

  • 常用事件
  • 事件绑定

2、事件绑定：

JavaScript对于事件的绑定提供了2种方式：

1）绑定方式1：通过html标签中的事件属性进行绑定

如button按钮可以借助onclick属性实现事件绑定，onclick属性值指向一个函数。

<input type="button" id="btn1" value="事件绑定1" onclick="on()">

很明显没有on函数，所以我们需要创建该函数，代码如下：

<script>

        function on(){

                alert("按钮1被点击了...");

        }

</script>

2）绑定方式2：通过DOM中Element元素的事件属性进行绑定

根据我们学习的DOM知识点，我们知道html中的标签被加载成element对象，所以我们也可以通过element对象的属性来操作标签的属性。

我们可以先通过id属性获取btn1按钮对象，然后操作对象的onclick属性来绑定事件，代码如下：

document.getElementById('btn1').onclick = function(){

        alert("按钮1被点击了...");

}

浏览器刷新页面，点击按钮，弹框如下：

注意事项：事件绑定的函数，只有在事件被触发时，函数才会被调用。

完整案例：

<!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, initialscale=1.0"><title>15-事件绑定</title>
</head>
<body><input type="button" id="btn1" value="事件绑定1" onclick="on()"><input type="button" id="btn2" value="事件绑定2">
</body>
<script>function on(){alert("按钮1被点击了...");}document.getElementById('btn2').onclick = function(){alert("按钮2被点击了...");}
</script>
</html>

3、常见事件：

上面案例中用到了 onclick 事件属性，下面给大家列举一些比较常用的事件属性：

案例展示： 
<!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, initialscale=1.0"><title>16-常见事件</title>
</head>
<body onload="load()"><form action="" style="text-align: center;" onsubmit="subfn()"><input type="text" name="username" onblur="bfn()" onfocus="ffn()" onkeydown="kfn()"><input id="b1" type="submit" value="提交"><input id="btn1" type="button" value="单击事件" onclick="fn1()"></form><br><br><br><table width="800px" border="1" cellspacing="0" align="center" onmouseover="over()"     onmouseout="out()"><tr><th>学号</th><th>姓名</th><th>分数</th><th>评语</th></tr><tr align="center"><td>001</td><td>张三</td><td>90</td><td>很优秀</td></tr><tr align="center"><td>002</td><td>李四</td><td>92</td><td>优秀</td></tr></table>
</body>
<script>//onload : 页面/元素加载完成后触发function load(){console.log("页面加载完成...")}//onclick: 鼠标点击事件function fn1(){console.log("我被点击了...");}//onblur: 失去焦点事件function bfn(){console.log("失去焦点...");}//onfocus: 元素获得焦点function ffn(){console.log("获得焦点...");}//onkeydown: 某个键盘的键被按下function kfn(){console.log("键盘被按下了...");}//onmouseover: 鼠标移动到元素之上function over(){console.log("鼠标移入了...")}//onmouseout: 鼠标移出某元素function out(){console.log("鼠标移出了...")}//onsubmit: 提交表单事件function subfn(){alert("表单被提交了...");}
</script>
</html>
  • onfocus:获取焦点事件，鼠标点击输入框，输入框中光标一闪一闪的，就是输入框获取焦点了

  • onblur:失去焦点事件，前提是输入框获取焦点的状态下，在输入框之外的地方点击，光标从输入框中消失了，这就是失去焦点。

（六）综合案例

1）需求说明

接下来我们通过案例来加强所学JS知识点的掌握。

需求如下3个：

1. 点击 "点亮" 按钮点亮灯泡，点击"熄灭"按钮熄灭灯泡

2. 输入框鼠标聚焦后，展示小写；鼠标离焦后，展示大写

3. 点击 "全选"按钮使所有的复选框呈现被选中的状态，点击"反选"按钮使所有的复选框呈现取消勾选的状态

效果如图所示：

2）资料准备

准备html页面

<!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, initialscale=1.0"><title>17-事件案例</title>
</head>
<body><img id="light" src="img/off.gif"> <br><input type="button" value="点亮" ><input type="button" value="熄灭" ><br> <br><input type="text" id="name" value="BRIUP"><br> <br><input type="checkbox" name="hobby"> 电影<input type="checkbox" name="hobby"> 旅游<input type="checkbox" name="hobby"> 游戏<br><input type="button" value="全选"><input type="button" value="反选">
</body>
</html>

3）操作灯泡

功能分析：

点击按钮时触发按钮单击事件。不管是点亮还是熄灭，借助图片变化即可实现功能。故而我们需要先获取标签图片标签对象。

实现步骤：

  • 先给点亮按钮和熄灭按钮都绑定单击事件，分别绑定函数on()和off()
  • 在JS中定义on()和off()函数
  • on()函数中，通过id获取img标签对象，然后通过img标签对象的src属性切换点亮的图片
  • off()函数中，通过id获取img标签对象，然后通过img标签对象的src属性切换熄灭的图片

代码实现：

事件绑定：

<input type="button" value="点亮" onclick="on()">
<input type="button" value="熄灭" onclick="off()">

on()和off()函数实现

//1. 点击 "点亮" 按钮, 点亮灯泡; 点击 "熄灭" 按钮, 熄灭灯泡; -- onclick

function on(){

        //a. 获取img元素对象

        var img = document.getElementById("light");

        //b. 设置src属性

        img.src = "img/on.gif";

}

function off(){

        //a. 获取img元素对象

        var img = document.getElementById("light");

        //b. 设置src属性

        img.src = "img/off.gif";

}

4）大小写切换

输入框鼠标聚焦后，展示小写；鼠标离焦后，展示大写。

功能分析：

先给input标签绑定onfocus和onblur事件；然后去实现事件处理函数。函数中我们要切换大小写，那么需要先获取输入框原始内容。查询资料可知，使用input标签对象的value属性，可以获取输入框内容。往输入框中重新填入内容，也是通过设置value属性实现。

实现步骤:

  • 给input标签的onfocus和onblur事件分别绑定lower()和upper()函数
  • 然后在JS中定义lower()和upper()函数
  • 对于lower()函数，先通过id获取输入框对象，然后通过输入框的value属性来设置内容，内容的话可以通过字符串的toLowerCase()函数来进行小写转换
  • 对于upper()函数，先通过id获取输入框对象，然后通过输入框的value属性来设置内容，内容的话可以通过字符串的toupperCase()函数来进行大写转换

代码实现：

事件绑定：

<input type="text" id="name" value="BRIUP" onfocus="lower()"  onblur="upper()">

lower()和upper()函数实现：

//2. 输入框聚焦后, 展示小写;

// 输入框离焦后, 展示大写; -- onfocus, onblur

function lower(){//小写

        //a. 获取输入框元素对象

        var input = document.getElementById("name");

        //b. 将值转为小写

        input.value = input.value.toLowerCase();

}

function upper(){//大写

        //a. 获取输入框元素对象

        var input = document.getElementById("name");

        //b. 将值转为大写

        input.value = input.value.toUpperCase();

}

5）全选反选

点击 "全选"按钮使所有的复选框呈现被选中的状态，点击"反选"按钮使所有的复选框选中状态取反。

功能分析：

点击按钮完成功能，我们需要给2个按钮绑定单击事件；实现"全选"功能，我们需要在事件处理函数中获取所有的复选框，然后逐个对象设置checked属性为true；实现"反选"功能，我们获得所有复选框，然后逐个元素观察其checked属性值，如果为true则设置为false，如果为false则设置为true。

实现步骤：

  • 给全选和反选按钮绑定单击事件，分别绑定函数checkAll()和reverse()
  • 在js中定义checkAll()和reverse()函数
  • 对于checkAll()函数，首先通过name属性值为hobby来获取所有的复选框，然后遍历复选框，设置每个复选框的checked属性为true即可
  • 对于reverse()函数，首先通过name属性值为hobby来获取所有的复选框，然后遍历复选框，根据其checked属性值修改其值：如果为true则设置为false，如果为false则设置为true

代码实现：

事件绑定：

<input type="button" value="全选" onclick="checkAll()">

<input type="button" value="反选" onclick="reverse()">

checkAll()和reverse()函数

//3. 点击"全选"按钮使所有的复选框呈现选中状态;

// 点击"反选"按钮使所有的复选框选中状态取反;

function checkAll(){

        //a. 获取所有复选框元素对象

        var hobbys = document.getElementsByName("hobby");

        //b. 设置选中状态

        for (let i = 0; i < hobbys.length; i++) {

                const element = hobbys[i];

                element.checked = true;

        }

}

function reverse(){

        //a. 获取所有复选框元素对象

        var hobbys = document.getElementsByName("hobby");

        //b. 设置未选中状态

        for (let i = 0; i < hobbys.length; i++) {

                const element = hobbys[i];

                if(element.checked)

                        element.checked = false;

                else

                        element.checked = true;

        }

}

6）完整代码

<!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, initialscale=1.0"><title>17-事件案例</title>
</head>
<body><img id="light" src="img/off.gif"> <br><input type="button" value="点亮" onclick="on()"><input type="button" value="熄灭" onclick="off()"><br> <br><input type="text" id="name" value="BRIUP" onfocus="lower()" onblur="upper()"><br> <br><input type="checkbox" name="hobby"> 电影<input type="checkbox" name="hobby"> 旅游<input type="checkbox" name="hobby"> 游戏<br><input type="button" value="全选" onclick="checkAll()"><input type="button" value="反选" onclick="reverse()">
</body>
<script>//1. 点击 "点亮" 按钮, 点亮灯泡;// 点击 "熄灭" 按钮, 熄灭灯泡; -- onclickfunction on(){//a. 获取img元素对象var img = document.getElementById("light");//b. 设置src属性img.src = "img/on.gif";}function off(){//a. 获取img元素对象var img = document.getElementById("light");//b. 设置src属性img.src = "img/off.gif";}//2. 输入框聚焦后, 展示小写;// 输入框离焦后, 展示大写; -- onfocus, onblurfunction lower(){ //小写//a. 获取输入框元素对象var input = document.getElementById("name");//b. 将值转为小写input.value = input.value.toLowerCase();}function upper(){ //大写//a. 获取输入框元素对象var input = document.getElementById("name");//b. 将值转为大写input.value = input.value.toUpperCase();}//3. 点击"全选"按钮使所有的复选框呈现选中状态;// 点击"反选"按钮使所有的复选框选中状态取反;function checkAll(){//a. 获取所有复选框元素对象var hobbys = document.getElementsByName("hobby");//b. 设置选中状态for (let i = 0; i < hobbys.length; i++) {const element = hobbys[i];element.checked = true;}}function reverse(){//a. 获取所有复选框元素对象var hobbys = document.getElementsByName("hobby");//b. 反转其选中状态for (let i = 0; i < hobbys.length; i++) {const element = hobbys[i];if(element.checked)element.checked = false;elseelement.checked = true;}}
</script>
</html>

http://www.dtcms.com/a/406198.html

相关文章：

  • 【数据结构】二叉树全面详解
  • 信号处理与系统设计，第二节课笔记
  • 设计模式(C++)详解——解释器模式(2)
  • Spring Cloud构建分布式微服务架构的完整指南
  • php网站做多久郑州建设网
  • jsp网站开发的使用表格电子商务网站建设的核心是
  • 快速将多个PPT、PPTX幻灯片统一转换成浏览器能直接打开的HTML网页文件
  • IROS 2025将于10月在中国杭州举办，爱迪斯通携手机器人训练与遥操作专家XSENS、HAPTION参展
  • 后海做网站公司网址搜索引擎入口
  • Java之链表
  • IDEA 高效配置指南：从基础到进阶的设置全解析
  • 用 SeaTunnel 同步 MySQL 到 Doris：全量增量 + SQL 过滤
  • C++项目：仿muduo库高并发服务器--------Any类的实现
  • ELK 企业级日志分析系统实战教程
  • 驻马店怎么建设自己的网站wordpress 导出到pdf
  • 网站建设成本表一般什么行业做网站的多
  • 阳台光伏、储能系统再升级！双路电能表，您家能源的“智能管家”
  • 【Unity 入门教程】四、如何制作一个 Perfab
  • 浅谈高校门户网站建设的规范标准找做废薄膜网站
  • Word和WPS文字中的题注没有更新？全选按F9刷新
  • Spring Boot集群 集成Nginx配置：负载均衡+静态资源分离实战
  • 本地生活软件开发指南：从用户需求到商业闭环的实战逻辑
  • 建设网站需要租赁主机吗重庆模板建站代理
  • CSP-J/S初赛赛后总结
  • Leetcode 208. 实现 Trie (前缀树)
  • 国际型网站建设wordpress换网址插件
  • Dlib+OpenCV 人脸轮廓绘制
  • Spring Boot 整合 MySQL 和 Druid
  • 基于 STM32 的智能马桶控制系统设计与实现
  • SpringCloud 项目阶段九：Kafka 接入实战指南 —— 从基础概念、安装配置到 Spring Boot 实战及高可用设计