[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事件概念、事件触发类型和事件处理的方式，就可以开发出具有交互性、动态性的页面。

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

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

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

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

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

相关文章

ES6 | （一）ES6 新特性（上） | 尚硅谷Web前端ES6教程

ES6 | （一）ES6 新特性（上） | 尚硅谷Web前端ES6教程

文章目录 &#x1f4da;ES6新特性&#x1f4da;let关键字&#x1f4da;const关键字&#x1f4da;变量的解构赋值&#x1f4da;模板字符串&#x1f4da;简化对象写法&#x1f4da;箭头函数&#x1f4da;函数参数默认值设定&#x1f4da;rest参数&#x1f4da;spread扩展运算符&a…
阅读更多...
Optimization for Deep Learning

Optimization for Deep Learning

Notations: : model parameters at time step or : gradient at used to compute : momentum accumulated from time step to time step , which is used to cpmpute Optimization What is Optimization about? 找到一组参数&#xff0c;使得 最小&#xff0c;或者说是…
阅读更多...
视频怎么变成gif动图？一招教你在线转换

视频怎么变成gif动图？一招教你在线转换

MP4是一种常见的视频文件格式&#xff0c;它可以包含音频和视频数据&#xff0c;并支持高质量的视频压缩。MP4视频可以呈现连续的动态效果&#xff0c;可以包含平滑的运动、音频等多媒体元素。而GIF动图是由一系列静态图像组成的&#xff0c;通过快速连续播放这些帧来创造出动态…
阅读更多...
使用Python制作进度条有多少种方法？看这一篇文章就够了！

使用Python制作进度条有多少种方法？看这一篇文章就够了！

前言 偶然间刷到一个视频&#xff0c;说到&#xff1a;当程序正在运算时&#xff0c;会有一个较长时间的空白期&#xff0c;谁也不知道程序运行的进度如何&#xff0c;不如给他加个进度条。 于是我今个就搜寻一下&#xff0c;Python版的进度条都可以怎么写&#xff01; 送书…
阅读更多...
一出手就是“天价”，鹰角网络的第二款游戏《来自星尘》，备受游戏行业关注

一出手就是“天价”，鹰角网络的第二款游戏《来自星尘》，备受游戏行业关注

​还有4天&#xff0c;鹰角网络的第二款游戏《来自星尘》即将面市。 行业内大部分人都在关注这一产品的落地情况&#xff0c;想要知道市场对于这一游戏的反应。 这当然有其原因。 最简单的一点是&#xff0c;这是鹰角网络自《明日方舟》后&#xff0c;时隔五年后才出的第二款…
阅读更多...
基础光学系列：（一）光学在机器视觉中的角色：原理、应用与学习途径

基础光学系列：（一）光学在机器视觉中的角色：原理、应用与学习途径

光学是一门研究光的产生、传播以及与物质相互作用的科学&#xff0c;对于机器视觉技术的发展至关重要。机器视觉利用计算机和相机系统模拟人类视觉&#xff0c;解释和理解图像&#xff0c;广泛应用于制造业、医疗、安全监控等领域。本文旨在探讨光的传播原理及其在机器视觉中的…
阅读更多...
二手旧物回收系统开发：推动可持续发展的关键

二手旧物回收系统开发：推动可持续发展的关键

随着人们环保意识的增强&#xff0c;二手旧物回收系统的发展逐渐成为社会关注的焦点。开发二手旧物回收系统&#xff0c;不仅能有效减少废弃物的排放&#xff0c;降低对环境的污染&#xff0c;还能实现资源的循环利用&#xff0c;推动可持续发展。本文将深入探讨二手旧物回收系…
阅读更多...
【前端素材】推荐优质后台管理系统Salreo平台模板（附源码）

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

一、需求分析 当我们从多个层次来详细分析后台管理系统时&#xff0c;可以将其功能和定义进一步细分&#xff0c;以便更好地理解其在不同方面的作用和实际运作。 1. 结构层次 在结构层次上&#xff0c;后台管理系统可以分为以下几个部分&#xff1a; a. 辅助功能模块&#…
阅读更多...
【linux】查看openssl程序的安装情况

【linux】查看openssl程序的安装情况

【linux】查看openssl程序的安装情况 1、查看安装包信息 $ rpm -qa |grep openssl 2、安装路径 $ rpm -ql openssl $ rpm -ql openssl-libs $ rpm -ql openssl-devel 3、相关文件和目录 /usr/bin/openssl /usr/include/openssl /usr/lib64/libssl.so.* /usr/lib64/libcrypto…
阅读更多...
Python奇幻之旅(从入门到入狱基础篇)——面向对象进阶篇(下)

Python奇幻之旅(从入门到入狱基础篇)——面向对象进阶篇(下)

目录 引言 3. 面向对象高级和应用 3.1. 继承【补充】 3.1.1. mro和c3算法 c3算法 一句话搞定继承关系 3.1.2. py2和py3区别 3.3. 异常处理 3.3.1. 异常细分 3.3.2. 自定义异常&抛出异常 3.3.3. 特殊的finally 3.4. 反射 3.4.1. 一些皆对象 3.4.2. import_modu…
阅读更多...
UI风格汇：扁平化风格来龙去脉，特征与未来趋势

UI风格汇：扁平化风格来龙去脉，特征与未来趋势

Hello&#xff0c;我是大千UI工场&#xff0c;设计风格是我们新开辟的栏目&#xff0c;主要讲解各类UI风格特征、辨识方法、应用场景、运用方法等&#xff0c;本次带来的扁平化风格的解读&#xff0c;有设计需求&#xff0c;我们也可以接单。 一、什么是扁平化风格 扁平化风格…
阅读更多...
多窗口编程

多窗口编程

六、多窗口编程 QMessageBox消息对话框&#xff08;掌握&#xff09; QMessageBox继承自QDialog&#xff0c;显示一个模态对话框。用于用户前台信息通知或询问用户问题&#xff0c;并接收问题答案。 QDialog的Qt源码中&#xff0c;派生类往往都是一些在特定场合下使用的预设好的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023