[HTML]Web前端开发技术28（HTML5、CSS3、JavaScript ）JavaScript基础——喵喵画网页

希望你开心，希望你健康，希望你幸福，希望你点赞！

最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！

喵喵喵，你对我真的很重要！

目录

前言

JavaScript事件分析

JavaScript事件概述

事件类型

事件句柄

事件处理

事件处理-静态指定

事件处理-动态指定

事件处理-特定对象的特定事件指定

事件处理程序的返回值

表单事件

获得及失去焦点事件

提交及重置事件

改变及选择事件

鼠标事件

鼠标单击、双击事件

鼠标单击、双击事件

鼠标移动事件

键盘事件

窗口事件

综合练习

总结

前言

Web 前端开发工程师应掌握以下内容：

了解 JavaScript 事件类型。              
理解事件发生时事件处理的三种方式。
学会利用表单的提交及重置事件对表单的数据进行校验。
理解鼠标事件中的鼠标单击及鼠标移动事件。
掌握常用的键盘及窗口事件。

JavaScript事件分析

JavaScript事件概述

    事件编程:让用户不仅能够浏览页面中的内容，而且还可以和页面元素进行交互。

       事件-事件是可以被JavaScript侦测到的行为(ACTION)。

事件类型

事件类型：

1.鼠标事件

2.键盘事件

3.HTML事件

4.突变事件

鼠标单击：例如单击button、选中checkbox和radio等元素；鼠标进入、悬浮或退出页面的某个热点：例如鼠标停在一个图片上方或者进入table的范围；

键盘按键：当按下按键或释放按键时；

HTML事件：例如页面body被加载时；在表单中选取输入框或改变输入框中文本的内容：例如选中或修改了文本框中的内容；

突变事件：主要指文档底层元素发生改变时触发的事件，如DomSubtreeModified(DOM子树修改)。

事件句柄

事件句柄 （event handler）

       事件句柄是事件发生要进行的操作。onload属性就是我们所说的事件句柄,也称为事件属性。

基本语法 ：

      <标记 事件句柄=“JavaScript代码”…></标记>

  如： <body onload=“show()”>…    </body>

格式：    onload  =“show();”    /*load  */

事件处理

 当一个事件发生时，如果需要截获并处理该事件，只需要定义该事件的事件句柄所关联的事件处理代码，具体的处理方式有以下3种：

l 静态指定： <HTML 标记 ... 事件句柄 1=" 事件处理程序 " [ 事件句柄 2 = " 事件处理程序 " ...]></HTML 标记 >
l 动态指定

<事件主角-对象>.<事件句柄>=<事件处理程序>;

l 特定对象特定事件的指定

<script type=“text/javascript”for=“对象” event=“事件”>

  //事件处理程序代码

</script>

事件处理-静态指定

基本语法：<标记 ... 事件句柄1="事件处理程序1" [事件句柄2 ="事件处理程序2" ...]

语法说明：一个标记可以同时指定多个事件处理程序，事件处理程序既可以是<script>标记中的自定义函数，还可以直接将事件处理代码写在此位置。

事件处理-动态指定

事件处理程序在JavaScript中动态指定(分配)：

      <事件主角-对象>.<事件句柄>=<事件处理程序>;

        obj.onclick=function(){disp();}  obj.onclick();//调用

事件处理-特定对象的特定事件指定

特定对象的特定事件指定：

   <script type="text/javascript" for="对象" event="事件句柄">

             //事件处理程序代码

     </script>

事件处理程序的返回值

事件处理程序的返回值

         在JavaScript中通常事件处理程序不需要有返回值，这时浏览器会按默认方式进行处理；

        很多情况下需要使用返回值，来判断事件处理程序是否正确进行处理。返回值类型：boolean布尔型值

      浏览器根据返回值的类型决定下一步如何操作。当返回值为true，进行默认操作； 当返回值为 false，阻止浏览器的下一步操作。

基本语法：事件句柄=“return 函数名（参数）;"      

表单事件

Form表单是一种重要的与用户进行交互的工具，它用于采集用户输入各类信息。

获得及失去焦点事件

       当表单中的元素获得焦点时会触发Focus获得事件，当表单中的元素失去焦点时会触发Blur失去焦点事件。

<!-- edu_15_2_1.html -->
<html>
    <head>
        <title>获得/失去焦点测试</title>
        <script language="javascript" type="text/javascript">
      function getFocus(){document.bgColor ="red“;}
       function loseFocus(){document.bgColor ="blue“;}
     </script>
    </head>
    <body>
     <form><br />
<input type="button" onfocus="getFocus()" value="获得/失去焦点触发事件" onblur="loseFocus()"/>
     </form>
    </body>
</html>

提交及重置事件

      表单的Submit事件触发后会将表单中的数据提交到服务器端，Reset事件触发后会将表单中的数据重置为初始值。

<!-- edu_15_2_2.html -->
<html>
<head>
<script  type="text/javascript">
function submitTest() {
var msg ="表单数据的获取：\n";
var username = document.getElementById("input1").value;
msg+="用户名:";
msg+=username;
var psw = document.getElementById("input2").value;
            msg+="，\n密码:是";
             msg+=psw;
             alert(msg);
            return false;
            }
function resetTest() {alert("将数据清空");}

</script>
<style type=“text/css“>                     fieldset{width:350px;height:150px;}
</style>
</head> 
<body>
  <form onsubmit="return submitTest();"  onreset="resetTest()"> 
   <fieldset>
   <legend>表单数据提交</legend>
   <br><label>用户名：</label><input type="text" id="input1">
   <br><label>密&nbsp;码：</label><input type="password" id="input2">
   <br><input type="submit" value="提交">
   <input type="reset" value="重置">
   </fieldset>
</form>
</body>
</html>

改变及选择事件

<!-- edu_15_2_3.html -->
<html>
   <head>
<title>下拉菜单</title>
<script language="javascript">
function changeImage() {            
     var a = document.getElementById("game").selectedIndex;
    //获取下拉框中选择项
     document.getElementById("show").src = document.getElementById("game").options[a].value;//将图片更改为对应选择项
}
</script>
</head>
<body>
<div align="center">
<form >
<select id="game" onChange="changeImage()" >
<option value="pic4.jpg">--请选择--</option>
<option value="pic0.jpg">平板电视</option>
<option value="pic1.jpg">笔记本电脑</option>
<option value="pic2.jpg">单反相机</option>
<option value="pic3.jpg">智能手机</option>
</select>
</form>
</div>
<p align="center">
<img  src="pic4.jpg"  id="show">
</p>		
</body>
</html>

注：当选择列表项时发生改变事件，调用函数更新图像

鼠标事件

用户在页面上操作鼠标会触发鼠标事件，如用户单击鼠标左键会触发Click事件，双击鼠标时会触发DblClick事件，移动鼠标会触发鼠标移动事件

鼠标单击、双击事件

<!-- edu_15_3_1.html -->
<!doctype html>
<html lang="en">
	<head><meta charset="UTF-8">
	  <title>鼠标单击事件</title>
	<script type="text/javascript">
	function $(id){return document.getElementById(id);}
	function copyText(){	$("target").value=$("source").value;	}
	</script>
	</head>
	<body>
	  <h4>文本框内容复制</h4>
	<form method="post" action="">
	来源文本框：<input type="text" id="source" value="">
	<br>目标文本框：<input type="text" id="target" readonly>
	<br><input type="button" value="复制文本框内容" onclick="copyText();">
	</form>	</body>
</html>

鼠标单击、双击事件

<!-- edu_15_3_1.html -->
<!doctype html>
<html lang="en">
	<head><meta charset="UTF-8">
	  <title>鼠标单击事件</title>
	<script type="text/javascript">
	function $(id){return document.getElementById(id);}
	function copyText(){	$("target").value=$("source").value;	}
	</script>
	</head>
	<body>
	  <h4>文本框内容复制</h4>
	<form method="post" action="">
	来源文本框：<input type="text" id="source" value="">
	<br>目标文本框：<input type="text" id="target" readonly>
	<br><input type="button" value="复制文本框内容" onclick="copyText();">
	</form>	</body>
</html>

鼠标移动事件

       鼠标移动事件有：MouseOver事件、MouseOut事件、MouseDown及MouseUp等事件

<!-- edu_15_3_2.html -->
<html>
<head>
<title>鼠标移动事件</title>
<script type="text/javascript">
    function mouseOver(){//鼠标盘旋
     document.getElementById('b1').src ="eg_mouse1.jpg”
    }
    function mouseOut(){//鼠标移出
       document.getElementById('b1').src ="eg_mouse2.jpg”
    }
</script>
</head>

键盘事件

    通过 window的event对象的keyCode属性来获取按键代码的值，其中：回车：13，0～9：48～57;Aa～Zz:65～90;

  使用方法：window.event.keyCode或event.keyCode。

窗口事件

<!--  edu_15_5_1.html -->
<html>
    <head>
        <title>窗口事件举例</title>
      <script  type="text/javascript">
     function load(){alert("欢迎访问本页面!");}
     function myunload(){alert("欢迎下次访问!“);}
    </script>
  </head>
  <body onload="load();" onbeforeunload=" myunload();" 
  <h4>窗口事件的应用</h4>
  <p onclick="alert('单击我！')">单击我！</p>
  </body>
</html>

综合练习

页面设计分析：

       采用表单和表单控件完成页面布局。采用样式表完成页面效果控制。

       自定义2个JS函数，分别是检查输入数据的有效性checkReg()和清除信息clearInfo()函数。

通过 ID 获取页面元素的通用函数：

              function $(id){ return document.getElementById(id); }

<!--  edu_15_6_1.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册页面</title>
<style type="text/css">
strong{color:red;font-style:bolder;}
fieldset{width:560px;height:186px;padding:0px 50px;}
#button{margin:10px 20px;}
</style>
<script  type="text/javascript">
function $(id){return document.getElementById(id);}
function checkReg(){			
var username=$("myname").value;
var pwd=$("mypwd1").value;
var pwdConfirm=$("mypwd2").value;
var checkright=true;			
if(username=="" || pwd=="")  //两者中有一个为空
{
alert("请确认用户名和密码输入是否正确！！");
   checkright=false;
}else     //不为空，再判断用户名和密码的长度合法性
{ 
    if(username.length<6) {    
       alert("用户名长度太短，至少6个字符！！");
       checkright=false;
    } else if(pwd.length<6) {
      alert("密码长度太短，至少6个字符！！");
       checkright=false;
    } else if(pwd!=pwdConfirm) {
       alert("两次输入的密码必须一致！！");
      checkright=false;
    } else{
        checkright=true;}
    }
    return checkright;
}
function clearInfo()
{
   var flag = confirm("确认要重置数据吗？");
   if(flag==true)
  {
    $("myname").value = "";
    $("mypwd1").value = "";
    $("mypwd2").value = "";
   }
}
</script>
</head>
<body>
<form action="regsuccess.html" method="get" onSubmit="return checkReg()" onReset="clearInfo()">
<fieldset>
   <legend align="center" >新用户注册</legend><br>
   <div>
   <label >用&nbsp;户&nbsp;名: </label>
   <input type="text" name="myname"><strong>(用户名要大于6位)</strong><br>
   <label> 登录密码: </label>
   <input type="password" name="mypwd1"><strong>(密码要大于6位)</strong><br>
  <label> 密码确认: </label>          
   <input type="password" name="mypwd2"><br>
  <input id="button" type="submit" value="用户注册" >
  <input  id="button" type="reset" value="重置">
  </div> 
 </fieldset>
</form>
</body>
</html>

总结

       本章介绍JavaScript脚本中的事件处理的概念、方法，列出了常用的事件及事件句柄，并且介绍了如何编写用户自定义的事件处理函数以及如何将它们与页面中用户的动作相关联，以得到预期的交互性能。

       重点介绍了Web开发中常用的表单事件、鼠标事件、键盘事件等。在表单事件中，详细介绍表单元素的焦点事件、表单提交与重置事件以及表单元素的选中及改变事件。在鼠标事件中，详细介绍鼠标单击及鼠标移动事件。在窗口事件中，主要介绍了装载事件和卸载事件。Web前端开发人员只要掌握JavaScript事件概念、事件触发类型和事件处理的方式，就可以开发出具有交互性、动态性的页面。

希望你开心，希望你健康，希望你幸福，希望你点赞！

最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！

喵喵喵，你对我真的很重要！

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Linux-基础知识(黑马学习笔记)

Linux-基础知识(黑马学习笔记)

硬件和软件 我们所熟知的计算机是由&#xff1a;硬件和软件组成。 硬件&#xff1a;计算机系统中电子&#xff0c;机械和光电元件等组成的各种物理装置的总称。 软件&#xff1a;是用户和计算机硬件之间的接口和桥梁&#xff0c;用户通过软件与计算机进行交流。 而操作系统…
阅读更多...
【前端素材】推荐优质后台管理系统PORTAL平台模板（附源码）

【前端素材】推荐优质后台管理系统PORTAL平台模板（附源码）

一、需求分析 后台管理系统是一种具有多层次结构的软件系统&#xff0c;用于管理网站、应用程序或系统的后台操作和管理。下面是对后台管理系统的分层次、详细分析&#xff1a; 第一层&#xff1a;用户界面层 登录界面&#xff1a;提供用户登录验证&#xff0c;确保只有经过授…
阅读更多...
村镇医院医疗中心污废水如何处理达标

村镇医院医疗中心污废水如何处理达标

污废水处理是村镇医院医疗中心运营中不可忽视的重要环节。如何有效处理污废水&#xff0c;使其达到相关标准&#xff0c;是保障医疗中心环境卫生的关键之一。 首先&#xff0c;村镇医院医疗中心应建立科学的废水处理系统。该系统应包括预处理、初级处理、中级处理和高级处理等环…
阅读更多...
二十七、图像的均值模糊操作

二十七、图像的均值模糊操作

项目功能实现&#xff1a;对一张图片进行均值模糊操作 按照之前的博文结构来&#xff0c;这里就不在赘述了 更多的图像模糊操作原理可参考博文&#xff1a;七、模糊操作&#xff0c;里面有详细原理讲解&#xff0c;只不过代码是python写的。 一、头文件 blurtest.h #pragma…
阅读更多...
网络存储技术

网络存储技术

第4章 存储文件系统 1.元数据 文件系统中的数据分为数据和元数据&#xff0c;数据是指普通文件中的实际数据&#xff0c;而元数据是描述数据属性的信息。 在Linux操作系统下&#xff0c;使用文件状态信息stat命令&#xff0c;可以显示文件的元数据如下。 [rootgitlab ~]# s…
阅读更多...
英国客户亲临育菁，考察桌面级CNC机床

英国客户亲临育菁，考察桌面级CNC机床

育菁桌面级CNC机床生产车间 2024年2月22日&#xff0c;英国某机床服务公司Alston和Gary一行拜访考察育菁&#xff0c;在育菁总经理Jimyang和总工程师Alan及海外营销中心总监Akuma的陪同下&#xff0c;参观了育菁桌面小型数控机床生产装配车间&#xff0c;并对育菁牌桌面型数控机…
阅读更多...
《TCP/IP详解 卷一》第2章 Internet地址结构

《TCP/IP详解 卷一》第2章 Internet地址结构

目录 2.1 引言 2.2 表示IP地址 2.3 基本的IP地址结构 单播地址 全球单播地址&#xff1a; 组播地址 任播地址 2.4 CIDR和聚合 2.5 特殊用途地址 2.6 分配机构 2.7 单播地址分配 2.8 与IP地址相关的攻击 2.9 总结 2.1 引言 2.2 表示IP地址 IPv4地址&#xff1a;3…
阅读更多...
【寸铁的刷题笔记】树、dfs、bfs、回溯、递归(二)

【寸铁的刷题笔记】树、dfs、bfs、回溯、递归(二)

【寸铁的刷题笔记】树、dfs、bfs、回溯、递归(二) 大家好 我是寸铁&#x1f44a; 金三银四&#xff0c;树、dfs、bfs、回溯、递归是必考的知识点✨ 快跟着寸铁刷起来&#xff01;面试顺利上岸&#x1f44b; 喜欢的小伙伴可以点点关注 &#x1f49d; 上期回顾 感谢大家的支持&am…
阅读更多...
Matlab/simulink基于vsg的风光储调频系统建模仿真（持续更新）

Matlab/simulink基于vsg的风光储调频系统建模仿真（持续更新）

​ 1.Matlab/simulink基于vsg的风光储调频系统建模仿真&#xff08;持续更新&#xff09;
阅读更多...
LeetCode 2583.二叉树中的第 K 大层和：层序遍历 + 排序

LeetCode 2583.二叉树中的第 K 大层和：层序遍历 + 排序

【LetMeFly】2583.二叉树中的第 K 大层和&#xff1a;层序遍历 排序 力扣题目链接&#xff1a;https://leetcode.cn/problems/kth-largest-sum-in-a-binary-tree/ 给你一棵二叉树的根节点 root 和一个正整数 k 。 树中的 层和 是指 同一层 上节点值的总和。 返回树中第 k …
阅读更多...
sql注入 [极客大挑战 2019]FinalSQL1

sql注入 [极客大挑战 2019]FinalSQL1

打开题目 点击1到5号的结果 1号 2号 3号 4号 5号 这里直接令传入的id6 传入id1^1^1 逻辑符号|会被检测到&#xff0c;而&感觉成了注释符&#xff0c;&之后的内容都被替换掉了。 传入id1|1 直接盲注比较慢&#xff0c;还需要利用二分法来编写脚本 这里利用到大佬的脚…
阅读更多...
学习使用在mysql中查询指定字段字符串包含多个字符串的方法

学习使用在mysql中查询指定字段字符串包含多个字符串的方法

学习使用在mysql中查询指定字段字符串包含多个字符串的方法 使用LIKE关键字使用REGEXP关键字使用FIND_IN_SET函数使用INSTR函数和AND关键字 使用LIKE关键字 SELECT * FROM table_name WHERE column_name LIKE %string1% AND column_name LIKE %string2%;使用LIKE关键字&#x…
阅读更多...
Python爬虫技术详解：从基础到高级应用，实战与应对反爬虫策略【第93篇—Python爬虫】

Python爬虫技术详解：从基础到高级应用，实战与应对反爬虫策略【第93篇—Python爬虫】

前言 随着互联网的快速发展&#xff0c;网络上的信息爆炸式增长&#xff0c;而爬虫技术成为了获取和处理大量数据的重要手段之一。在Python中&#xff0c;requests模块是一个强大而灵活的工具&#xff0c;用于发送HTTP请求&#xff0c;获取网页内容。本文将介绍requests模块的…
阅读更多...
深入探究node搭建socket服务器

深入探究node搭建socket服务器

自从上篇中sokect实现了视频通话&#xff0c;但是是使用ws依赖库实现的服务端&#xff0c;所以最近再看ws源码&#xff0c;不看不知道&#xff0c;一看很惊讶。 接下来一点点记录一下&#xff0c;如何搭建一个简易的服务端socket&#xff0c;来实现上次的视频通讯。 搭建一个…
阅读更多...
检索增强生成（RAG）——提示工程方法

检索增强生成（RAG）——提示工程方法

在检索增强生成（RAG）过程中，提示工程也是一个不可忽略的部分。提示工程可以降低 RAG 应用出现的幻觉，提高 RAG 应用回答的质量。 下面简单介绍一些关于提示工程的论文。 欢迎关注公众号（NLP Research），及时查看最新内容 1. Thread of Thought(ThoT) 论文：Thread of …
阅读更多...
LLM （Large language model）的指标参数

LLM （Large language model）的指标参数

1. 背景介绍 我们训练大模型的时候&#xff0c;或者我们用RAG的时候&#xff0c;不知道我们的算法&#xff0c;或者我们的提示&#xff0c;或者我们的本地知识库是否已经整理得符合要求了。又或我们需要一个指标去评估我们目前的所有围绕大模型&#xff0c;向量数据库或外挂知…
阅读更多...
【EI会议征稿通知】2024年软件自动化与程序分析国际学术会议（SAPA 2024)

【EI会议征稿通知】2024年软件自动化与程序分析国际学术会议（SAPA 2024)

2024年软件自动化与程序分析国际学术会议&#xff08;SAPA 2024) 2024 International Conference on Software Automation and Program Analysis 在当今科技社会中&#xff0c;软件产业呈快速发展趋势&#xff0c;软件自动化与程序分析技术在提高软件质量、降低开发成本、提升…
阅读更多...
QT问题 打开Qt Creator发现没有菜单栏

QT问题 打开Qt Creator发现没有菜单栏

之前不知道按了什么快捷键,当我再次打开Qt Creator时发现菜单栏消失啦 找了许多原因发现:安装有道词典的快捷键Ctrl Alt m 与Qt Creator里的快捷键冲突导致菜单栏被莫名其妙的隐藏 解决方法: 1找到有道词典快捷键 2再次按快捷键 Ctrl Alt m就可以重新显示菜单栏
阅读更多...
Servlet使用Cookie和Session

Servlet使用Cookie和Session

一、会话技术 当用户访问web应用时&#xff0c;在许多情况下&#xff0c;web服务器必须能够跟踪用户的状态。比如许多用户在购物网站上购物&#xff0c;Web服务器为每个用户配置了虚拟的购物车。当某个用户请求将一件商品放入购物车时&#xff0c;web服务器必须根据发出请求的…
阅读更多...
特保罗环保节能邀您参观2024生物发酵产品与技术装备展

特保罗环保节能邀您参观2024生物发酵产品与技术装备展

参观企业介绍 山东特保罗环保节能科技有限公司位处山东章丘区&#xff0c;是一家致力于研发 “MVR&多效蒸发器”和“高难工业废水零排放”技术等的科技制造型高新技术企业。特保罗公司隶属山东明天机械集团股份有限公司&#xff0c;集团公司旗下拥有山东明天机械有限公司、…
阅读更多...
最新文章

Copyright @ 2022~2023