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

希望你开心,希望你健康,希望你幸福,希望你点赞!

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

喵喵喵,你对我真的很重要!

目录

前言

JavaScript事件分析

JavaScript事件概述

事件类型

事件句柄

事件处理

事件处理-静态指定

事件处理-动态指定

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

事件处理程序的返回值

表单事件

获得及失去焦点事件

提交及重置事件

改变及选择事件

鼠标事件

鼠标单击、双击事件

鼠标单击、双击事件

鼠标移动事件

键盘事件

窗口事件

综合练习

总结


前言

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

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

JavaScript事件分析

JavaScript事件概述

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

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


事件类型

事件类型:

1.鼠标事件

2.键盘事件

3.HTML事件

4.突变事件

鼠标单击例如单击button、选中checkboxradio等元素;鼠标进入、悬浮或退出页面的某个热点:例如鼠标停在一个图片上方或者进入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事件、MouseDownMouseUp等事件

<!-- 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>

键盘事件

    通过 windowevent对象的keyCode属性来获取按键代码的值,其中:回车:13094857;AaZz:6590;

  使用方法:window.event.keyCodeevent.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>

综合练习

页面设计分析:

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

       自定义2JS函数,分别是检查输入数据的有效性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事件概念、事件触发类型和事件处理的方式,就可以开发出具有交互性、动态性的页面。


希望你开心,希望你健康,希望你幸福,希望你点赞!

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

喵喵喵,你对我真的很重要!

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HTTP概要

文章目录 什么是HTTP?URL的结构请求报文结构请求方法GETHEADPOSTPUTDELETETRACEOPTIONSCONNECTPATCH解释 请求头字段 响应报文结构响应状态响应头字段 HTTP会话3次握手无状态协议 什么是HTTP? HTTP&#xff0c;即Hypertext Transfer Protocol(超文本传输协议) 它是一个”请…

Linux——简单的Shell程序

&#x1f4d8;北尘_&#xff1a;个人主页 &#x1f30e;个人专栏:《Linux操作系统》《经典算法试题 》《C》 《数据结构与算法》 ☀️走在路上&#xff0c;不忘来时的初心 文章目录 一、Shell程序思路二、Shell代码展示 一、Shell程序思路 用下图的时间轴来表示事件的发生次序…

XUbuntu22.04之解决:systemd-journald占用cpu过高问题(二百一十三)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…

Linux运维-Web服务器的配置与管理(PHP)

Web服务器的配置与管理(PHP) 项目场景 某企业在CentOS上搭建Web服务系统&#xff0c;以PHP作为网页开发环境&#xff0c;以MySQL为后台数据库。 基础知识 PHP PHP原始为Personal Home Page的缩写&#xff0c;已经正式更名为 “PHP: Hypertext Preprocessor”&#xff08;超…

iOS面试:4.多线程GCD

一、多线程基础知识 1.1 什么是进程&#xff1f; 进程是指在系统中正在运行的一个应用程序。对于电脑而已&#xff0c;你打开一个软件&#xff0c;就相当于开启了一个进程。对于手机而已&#xff0c;你打开了一个APP&#xff0c;就相当于开启了一个进程。 1.2 什么是线程&am…

算法题目中图和树的存储

邻接表的方式存储图和树 这就是邻接表&#xff0c;就是将每个结点的孩子结点用链表表示出来&#xff0c;再将所有结点以数组形式连起来。 存储树和图我们需要三个数组&#xff0c;h[N], e[N], ne[N],分别表示邻接表&#xff0c;结点值&#xff0c;结点的next值&#xff0c;h[i…

面试经典150题——快乐数

​"Success is not final, failure is not fatal: It is the courage to continue that counts." - Winston Churchill 1. 题目描述 2. 题目分析与解析 2.1 思路一 还是最简单的&#xff0c;模拟最直观的思路&#xff0c;就是进行一个while循环。比如&#xff1a;…

yolov8-seg dnn调用

接上篇一直更换torch、opencv版本都无法解决这个问题&#xff08;seg调用dnn报错&#xff09;。那问题会不会出在yolov8源码本身呢。yolov8的讨论区基本都看过了&#xff0c;我决定尝试在其前身yolov5的讨论区上找找我不信没人遇到这个问题。很快找到下面的讨论第一个帖子&…

20个改善编码的Python异常处理技巧,让你的代码更高效

异常处理是写好代码的一个重要的方面&#xff0c;虽然许多开发人员都熟悉基本的try-except块&#xff0c;但是有很多更深入的知识可以使异常处理更高效、更可读和更python化。所以本文将介绍关于Python异常的20个可以显著改善编码的Python异常处理技巧&#xff0c;这些技巧可以…

软件性能测试和功能测试有何联系和区别?第三方软件检测机构简析

软件性能测试和功能测试是软件开发过程中非常重要的两个环节。从根本上说&#xff0c;它们都是为了保证软件质量和可靠性&#xff0c;但它们的目标和方法却有所不同。 软件性能测试是评估软件在特定负载下的性能表现&#xff0c;包括响应时间、吞吐量、并发能力等指标。它通过…

Jenkins详解

目录 一、Jenkins CI/CD 1、 Jenkins CI/CD 流程图 2、介绍 Jenkins 1、Jenkins概念 2、Jenkins目的 3、特性 4、产品发布流程 3、安装Jenkins 1、安装JDK 2、安装tomcat 3.安装maven 4安装jenkins 5.启动tomcat&#xff0c;并页面访问 5.添加节点 一、Jenkins CI/…

Opencv实战(2)绘图与图像操作

Opencv实战(2)绘图与图像操作 指路前文&#xff1a;Opencv实战(1)读取与像素操作 三、基本绘图 文章目录 Opencv实战(2)绘图与图像操作三、基本绘图(1).line(2).rectangle(3).circle 四、图像处理(1).颜色空间1.意义2.cvtColor()3.inRange()4.适应光线 (2).形态操作1.腐蚀2.膨…

Python语句(一)【条件语句】

条件语句&#xff1a;通过一条或多条语句的执行结果&#xff08;True或者False&#xff09;来决定执行的代码块。 其程序流程图如下&#xff1a; 条件语句包括&#xff1a;if 判断条件&#xff1a;执行语句…… else&#xff1a;执行语句……orif 判断条件1:执行语句1…… el…

电商+支付双系统项目------项目部署到服务器

我已经把这个项目的所有模块都做好了。那么&#xff0c;现在我们要做的就是将这个项目部署发布了。其实关于部署发布网上有很多的文章都会教&#xff0c;我就不写哪些很具体的步骤了&#xff0c;我就简单的总结一下怎么部署这个项目&#xff0c;让大家对项目部署有一个整体的认…

kubernetes的网络flannel与caclio

flannel网络 跨主机通信的一个解决方案是Flannel&#xff0c;由CoreOS推出&#xff0c;支持3种实现&#xff1a;UDP、VXLAN、host-gw udp模式&#xff1a;使用设备flannel.0进行封包解包&#xff0c;不是内核原生支持&#xff0c;上下文切换较大&#xff0c;性能非常差 vxlan模…

瑞_23种设计模式_装饰者模式

文章目录 1 装饰者模式&#xff08;Decorator Pattern&#xff09;1.1 介绍1.2 概述1.3 装饰者模式的结构 2 案例一2.1 需求2.2 代码实现 3 案例二3.1 需求3.2 代码实现 4 JDK源码解析5 总结5.1 装饰者模式的优缺点5.2 装饰者模式的使用场景5.3 装饰者模式 VS 代理模式 &#x…

dpdk环境搭建和工作原理

文章目录 1、DPDK环境搭建1.1、环境搭建1.2、编译DPDK 2、DPDK工作原理 1、DPDK环境搭建 1.1、环境搭建 工具准备&#xff1a;VMware、ubuntu16.04。 &#xff08;1&#xff09;VMware添加两个网卡。桥接网卡作为 DPDK 运行的网卡&#xff0c;NAT 网卡作为 ssh 连接的网卡。 …

【动态规划】【前缀和】【推荐】2463. 最小移动总距离

作者推荐 【广度优先搜索】【网格】【割点】【 推荐】1263. 推箱子 本文涉及知识点 动态规划汇总 C算法&#xff1a;前缀和、前缀乘积、前缀异或的原理、源码及测试用例 包括课程视频 2463. 最小移动总距离 X 轴上有一些机器人和工厂。给你一个整数数组 robot &#xff0c…

【统计分析数学模型】判别分析(四):机器学习分类算法

【统计分析数学模型】判别分析&#xff08;四&#xff09;&#xff1a;机器学习分类算法 一、机器学习分类算法1. 交叉验证方法2. 案例数据集3. 数据标准化 二、决策树模型1. 基本原理2. 计算步骤3. R语言实现 三、K最邻近分类1. 基本原理2. K值的选择3. R语言实现 四、支持向量…

5分钟JavaScript快速入门

目录 一.JavaScript基础语法 二.JavaScript的引入方式 三.JavaScript中的数组 四.BOM对象集合 五.DOM对象集合 六.事件监听 使用addEventListener()方法添加事件监听器 使用onX属性直接指定事件处理函数 使用removeEventListener()方法移除事件监听器 一.JavaScript基础…