JavaScript程序设计(第2版)第6章01.事件的基本概念
合集下载
JavaScript程序设计(第2版)01.对象的基本概念
对象名["属性名"]
（3）通过循环语句。语法：
for(var 变量 in 对象变量){……对象变量[变量]……}
（4）通过With语句。语法：
with(对象变量){ ……直接使用对象属性名、方法名…… }
使用对象的方法 使用With语句或通过圆点（.）运算符就可以得到对象的方法。
对象变量.对象方法名()
例如，实例化一个字符串对象。
var newString=new String("I like JavaScript!");
//实例化一个字符串对象
在JavaScript中使用对象
使用对象的属性 使用下述几种方法可以得到对象的属性值。
（1）通过圆点（.）运算符。语法：
对象名.属性名
（2）通过属性名。语法：
JavaScript程序设计（第2版）01.对象 的基本概念
什么是对象
JavaScript是一种基于对象（Object）的语言，它支 持3种对象：内置对象、用户自定义对象和浏览器对象，其 中内置对象和浏览器对象合称为预定义对象。通过基于对 象的程序设计可以用更直观模块化和可重复使用的方式进行 程序开发。
在JavaScript中使用对象的具体应用会在下面各节中逐步进行详细讲解。
一组包含数据的属性和对属性中包含数据进行操作的方 法称为对象。例如，要在网页是输出字符串，所针对的对 象就是document，所用的属性名是write，如：
("我喜欢学JavaScript");
就是在网页上输出字符串“我喜欢学JavaScript”。
创建对象
对于已定义的对象，使用之前首先要使用JavaScript运算符 “new”对已定义的对象创建一个对象的“实例”。
（3）通过循环语句。语法：
for(var 变量 in 对象变量){……对象变量[变量]……}
（4）通过With语句。语法：
with(对象变量){ ……直接使用对象属性名、方法名…… }
使用对象的方法 使用With语句或通过圆点（.）运算符就可以得到对象的方法。
对象变量.对象方法名()
例如，实例化一个字符串对象。
var newString=new String("I like JavaScript!");
//实例化一个字符串对象
在JavaScript中使用对象
使用对象的属性 使用下述几种方法可以得到对象的属性值。
（1）通过圆点（.）运算符。语法：
对象名.属性名
（2）通过属性名。语法：
JavaScript程序设计（第2版）01.对象 的基本概念
什么是对象
JavaScript是一种基于对象（Object）的语言，它支 持3种对象：内置对象、用户自定义对象和浏览器对象，其 中内置对象和浏览器对象合称为预定义对象。通过基于对 象的程序设计可以用更直观模块化和可重复使用的方式进行 程序开发。
在JavaScript中使用对象的具体应用会在下面各节中逐步进行详细讲解。
一组包含数据的属性和对属性中包含数据进行操作的方 法称为对象。例如，要在网页是输出字符串，所针对的对 象就是document，所用的属性名是write，如：
("我喜欢学JavaScript");
就是在网页上输出字符串“我喜欢学JavaScript”。
创建对象
对于已定义的对象，使用之前首先要使用JavaScript运算符 “new”对已定义的对象创建一个对象的“实例”。
JavaScript基础PPT课件
事件类型、监听和传播方式讲解
事件类型 JavaScript中支持多种事件类型，包括鼠标事件、键盘事 件、表单事件、窗口事件等。每种事件类型都对应一个特 定的触发条件和处理方式。
事件监听 可以使用`addEventListener`方法为元素添加事件监听器， 当指定的事件发生时，会调用监听器中的回调函数处理事 件。
移动端适配与优化
探讨针对不同设备和浏பைடு நூலகம்器的 JavaScript代码适配与优化策略， 提高页面性能和用户体验。
行业发展趋势预测
ES6+新特性
01
分析ECMAScript 6及以后版本的新特性和发展趋势，如模块化、
异步编程、装饰器等。
前端框架与库
02
探讨React、Vue等前端框架以及配套库在Web开发中的应用和
和3D游戏。
移动应用开发
通过React Native、Cordova 等框架，可以使用JavaScript
开发跨平台的移动应用。
服务器端开发
Node.js使得JavaScript可以在 服务器端运行，处理HTTP请
求、数据库操作等。
02
JavaScript基础知识
变量与数据类型
变量声明
使用`var`、`let`或`const`关键字声明 变量，分别表示可变变量、块级作用 域可变变量和常量。
逻辑运算符
用于进行逻辑运算，包括`&&`、 `||`和`!`。
流程控制语句
01
02
03
条件语句
使用`if`、`else if`和`else` 关键字实现条件判断。
循环语句
包括`for`、`while`和 `do...while`循环，用于重 复执行某段代码。
JavaScript程序设计(第2版)第6章04.表单相关事件
结果如图6-18所示。
图6-18 文本框获得焦点时改变背景颜色
失去焦点修改事件
失去焦点修改事件（onchange）是当前元素失去焦点并且元素的内容发生改变时触发事件处理 程序。该事件一般在下拉文本框中使用。 例6-11 下面的实例是在用户选择下拉文本框中的颜色时，通过onchange事件来相应的改变 文本框的字体颜色。程序代码如下。
表单相关事件
本讲大纲：
1、获得焦点与失去焦点事件 2、失去焦点修改事件 3、表单提交与重置事件
获得焦点与失去焦点事件
获得焦点事件（onfocus）是当某个元素获得焦点时触发事件处理程序。失去焦点事件（r） 是当前元素失去焦点时触发事件处理程序。在一般情况下，这两个事件是同时使用的。 例6-10 下面的实例是在用户选择页面中的文本框时，改变文本框的背景颜色为淡蓝色，当选择其他 文本框时，将失去焦点的文本框背景颜色恢复原始状态。程序代码如下。
<form name="formname" onReset="return Funname" onsubmit="return Funname " ></form> formname：表单名称。 Funname：函数名或执行语句，如果是函数名，在该函数中必须有布尔型的返回值。
说
明
如果在onsubmit和onreset事件中调用的是自定义函数名，那么，必须在函数名的前面加return语句，否则，不论在函数 中返回的是true，还是false，当前事件所返回的值一律是true值。
例6-12 下面的实例是在提交表单时，调用check()函数判断表单元素是否为空，注意一定要将 当前表单作为参数传递到check()函数中。然后应用JavaScript编写检查表单元素是否为空的函数 check()，该函数只有一个参数Form，用于指定要进行检查的表单对象，无返回值。程序代码如
JavaScript程序设计(第2版)06.编辑事件
width="150" height="120" border="0"> </td> <td id="td2" align="center" width="165" height="136" ondragenter="DragObject(event)" ondragover="DragObject(event)" ondragleave="DragObject(event)" ondrop="DragObject(event)"> </td>
例6-18 下面通过对图片的拖曳操作，对ondragover、ondragenter、ondragleave和ondrop事 件的相关应用在窗口标题栏中进行显示。程序代码如下。
<body> <table width="330" height="136" border="1">
<tr> <td id="td1" align="center" width="165" height="136"> <input name="imageField" type="image" src="flower.jpg"
编辑事件
本讲大纲：
1、文本编辑事件 2、对象拖动事件
文本编辑事件
文本编辑事件是对浏览器中的内容进行选择、复制、剪切和粘贴时所触发的事件。 1．复制事件 复制事件是在浏览器中复制被选中的部份或全部内容时触发事件处理程序，复制事件有 onbeforecopy和oncopy两个事件，onbeforecopy事件是将网页内容复制到剪贴版时触发事件处 里程序，oncopy事件是在网页中复制内容时触发事件处里程序。 例如，不允许复制网页中的内容。代码如下：
例6-18 下面通过对图片的拖曳操作，对ondragover、ondragenter、ondragleave和ondrop事 件的相关应用在窗口标题栏中进行显示。程序代码如下。
<body> <table width="330" height="136" border="1">
<tr> <td id="td1" align="center" width="165" height="136"> <input name="imageField" type="image" src="flower.jpg"
编辑事件
本讲大纲：
1、文本编辑事件 2、对象拖动事件
文本编辑事件
文本编辑事件是对浏览器中的内容进行选择、复制、剪切和粘贴时所触发的事件。 1．复制事件 复制事件是在浏览器中复制被选中的部份或全部内容时触发事件处理程序，复制事件有 onbeforecopy和oncopy两个事件，onbeforecopy事件是将网页内容复制到剪贴版时触发事件处 里程序，oncopy事件是在网页中复制内容时触发事件处里程序。 例如，不允许复制网页中的内容。代码如下：
HTML CSS JavaScript网页制作(第2版)
04
6.4设置背 景
06
6.6设置表 格样式
05
6.5图文混 排
6.7设置表单样式
6.8使用CSS设置常 用样式修饰的综合案
例
6.9实训——制作梦 想橱柜商务安全中心 页面
习题6
7.1使用CSS设置链 接
7.2用CSS设置列表
7.3创建导航菜单
7.4使用CSS设置链 接与导航菜单综合案 例
7.5实训——梦 想商务平台技 术支持页面
习题7
8.2在网页中调用 JavaScript
8.1 JavaScript简 介
8.3常见的网页特 效
8.4实训——制 作二级纵向列 表模式的导航 菜单
习题8
9.1网站的开发流程 9.2设计首页布局
9.3首页的制作 9.4制作产品中心页
9.6制作新闻资讯 页
9.5制作产品明细 页
习题9
10.1制作后台管理 登录页面
精彩摘录
这是《HTML+CSS+JavaScript网页制作（第2版）》的读书笔记模板，可以替换为自己的精彩内容摘录。
感谢观看
3.6实训——制作 梦想橱柜联系信息
表单
3.5换行标签<br/>
习题3
1
4.1 CSS概述
2
4.2 CSS语法 基础
3
4.3 CSS的属 性单位
4 4.4 CSS与
HTML文档的结 合方法
5
4.5 HTML文档 结构
4.7实训——制作 梦想橱柜行业资讯
页面
4.6元素类型
习题4
5.1 Web标准
5.2认识Div+CSS布 局
5.3 CSS盒模型 5.4盒子的定位
JavaScript程序设计(第2版)01.JavaScript简述
例如，在签写许愿信息时，为了让用户可以实时看到添加后字条的样式，用户每输入 一个文字，在右侧的字条预览区实时预览签写许愿字条内容的效果，如图2-3所示。
图2-3 实时预览许愿字条
动画效果 在浏览网页时，经常会看到一些动画效果，使页面显得更加生动。使用JavaScript 脚本语言也可以实现动画效果，例如在页面中实现一种星星闪烁的效果，如图2-4所示 。
允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。这样可有效地 防止数据的丢失。
JavaScript简述
本讲大纲：
1、什么是JavaScript 2、JavaScript的作用 3、JavaScript的基本特点
格式性校验可以只发生在客户端，即在表单提交到服务器端之前完成。JavaScript能及时响应用户 的操作，对提交表单做即时的检查，无需浪费时间交由CGI验证。JavaScript常用于对于用户输入的格 式性校验。 如图2-2所示是一个要求用户输入购卡人的详细信息，它要求对用户的输入进行以下校验。 （1）学生考号、移动电话、固定电话和E-mail不能为空。 （2）学生考号必须是12位。 （3）移动电话必须由11位数字组成，且以“13”和“15”开头。 （4）固定电话必须是“3位区号-8位话号”或“4位区号-7位或8位话号”。 （5）E-mail必须包含“@”和“.”两个有效字符。 当用户输入不符合指定格式的移动电话号码时，就会在页面输出提示信息“移动电话号码的格式不正 确”，如图2-2所示。
图2-6 文字特效Leabharlann JavaScript的基本特点
JavaScript是为适应动态网页制作的需要而诞生的一种新的编程语言，如今越来越广泛地 应用于Internet网页制作上。JavaScript脚本语言具有以下几个基本特点。 解释性 JavaScript不同于一些编译性的程序语言，例如C、C++等，它是一种解释性的程序语言，它 的源代码不需要经过编译，而直接在浏览器中运行时被解释。 基于对象 JavaScript是一种基于对象的语言。这意味着它能运用自己已经创建的对象。因此，许多功能 可以来自于脚本环境中对象的方法与脚本的相互作用。 事件驱动 JavaScript可以直接对用户或客户输入做出响应，无须经过Web服务程序。它对用户的响应
图2-3 实时预览许愿字条
动画效果 在浏览网页时，经常会看到一些动画效果，使页面显得更加生动。使用JavaScript 脚本语言也可以实现动画效果，例如在页面中实现一种星星闪烁的效果，如图2-4所示 。
允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。这样可有效地 防止数据的丢失。
JavaScript简述
本讲大纲：
1、什么是JavaScript 2、JavaScript的作用 3、JavaScript的基本特点
格式性校验可以只发生在客户端，即在表单提交到服务器端之前完成。JavaScript能及时响应用户 的操作，对提交表单做即时的检查，无需浪费时间交由CGI验证。JavaScript常用于对于用户输入的格 式性校验。 如图2-2所示是一个要求用户输入购卡人的详细信息，它要求对用户的输入进行以下校验。 （1）学生考号、移动电话、固定电话和E-mail不能为空。 （2）学生考号必须是12位。 （3）移动电话必须由11位数字组成，且以“13”和“15”开头。 （4）固定电话必须是“3位区号-8位话号”或“4位区号-7位或8位话号”。 （5）E-mail必须包含“@”和“.”两个有效字符。 当用户输入不符合指定格式的移动电话号码时，就会在页面输出提示信息“移动电话号码的格式不正 确”，如图2-2所示。
图2-6 文字特效Leabharlann JavaScript的基本特点
JavaScript是为适应动态网页制作的需要而诞生的一种新的编程语言，如今越来越广泛地 应用于Internet网页制作上。JavaScript脚本语言具有以下几个基本特点。 解释性 JavaScript不同于一些编译性的程序语言，例如C、C++等，它是一种解释性的程序语言，它 的源代码不需要经过编译，而直接在浏览器中运行时被解释。 基于对象 JavaScript是一种基于对象的语言。这意味着它能运用自己已经创建的对象。因此，许多功能 可以来自于脚本环境中对象的方法与脚本的相互作用。 事件驱动 JavaScript可以直接对用户或客户输入做出响应，无须经过Web服务程序。它对用户的响应
JavaScript程序设计(第2版)第6章02.鼠标键盘事件
运行结果如图6-11和图6-12所示。
图6-11 鼠标移入时获得焦点
图6-12 鼠标移出时失去焦点
鼠标移动事件
鼠标移动事件（onmousemove）是鼠标在页面上进行移动时触发事件处理程序，可以在该事件中 用do例6-6 下面在页面中添加一串文字及一个层，自定义函数move()，当鼠标移动到指定的语句时， 将通过层动态显示飞出来的星形标记；自定义函数out()，当鼠标移出指定的文字时，隐藏星形标记。 代码如下。 语法：
结果如图6-7和图6-8所示。
图6-7 单击按钮前的效果
图6-8 单击按钮后的效果
鼠标的按下或松开事件
鼠标的按下或松开事件分别是onmousedown和onmouseup事件。其中，onmousedown事件 用于在鼠标按下时触发事件处理程序，onmouseup事件是在鼠标松开时触发事件处理程序。在用鼠 标单击对象时，可以用这两个事件实现其动态效果。 例6-4 下面应用onmousedown和onmouseup事件将文本制作成类似于<a>（超链接）标记 的功能，也就是在文本上按下鼠标时，改变文本的颜色，当在文本上松开鼠标时，恢复文本的默认颜 色，并弹出一个空页（可以链接任意网页）。程序代码如下。
运行结果如图6-9和图6-10所示。
图6-9 按下鼠标时改变字体颜色
图6-10 松开鼠标时恢复字体颜色
鼠标的移入移出事件
鼠标的移入和移出事件分别是onmouseover和onmousemove事件。其中，onmouseover事 件在鼠标移动到对象上方时触发事件处理程序，onmousemove事件在鼠标移出对象上方时触发事 件处理程序。可以用这两个事件在指定的对象上移动鼠标时，实现其对象的动态效果。 例6-5 本示例的主要功能是鼠标在图片上移入或移出时，动态改变图片的焦点，主要是用 onmouseover和onmouseout事件来完成鼠标的移入和移出动作。程序代码如下。
JavaScript教程优质课件
使用`document.createElement()`方法可以创建一个新的元素节点，使
用`document.createTextNode()`方法可以创建一个新的文本节点。
02 03
插入节点
使用`appendChild()`方法可以将新节点添加到指定元素的子节点列表 的末尾，使用`insertBefore()`方法可以将新节点插入到指定元素子节点 列表的指定位置。
06
使用回调函数时要注意避免回调地狱（Callback Hell） ，可以通过Promise、async/await等方式来优化代码结 构。
模块化开发和ES6新特性介绍
模块化开发
模块化开发是指将一个大的程序文件分割成独立的小文件，每个小文件都是一个模块，每 个模块都有自己的作用域和对外暴露的接口。模块化开发可以提高代码的可维护性、可重 用性和可测试性。
目标
掌握JavaScript基础语法、DOM操作、事件处理、异步编程等知识点，能够独立完成 简单的Web应用开发。
内容概述
本课程将涵盖JavaScript的基本数据类型、运算符、控制语句、函数等基础知识，以及 DOM操作、事件处理、Ajax等进阶内容。同时，还将介绍ES6及以上版本的新特性和 最佳实践。通过学习本课程，学员将具备扎实的JavaScript编程基础，为后续的Web开
选择器
使用CSS选择器可以选择文档中的特定元素，如通过元素名 、类名、ID等选择器进行选择。
遍历方法
通过DOM提供的遍历方法，如`childNodes`、`firstChild`、 `lastChild`、`nextSibling`、`previousSibling`等，可以访问 节点的子节点和相邻节点。
属性值为'myClass'。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
浏览器对象
事件处理 JavaScript函数 作用在对象上的事件
用户与网页交互操作
图6-1 网页浏览器对象、事件及函数之间的关系
事件处理程序的调用
事件处理是对象化编程的一个很重要的环节，它可以使程序的逻辑结构更加清晰，使程序更具 有灵活性，提高了程序的开发效率。事件处理的过程分为3步：
l发生事件。
l启动事件处理程序。 l事件处理程序作出反应。其中，要使事件处理程序能够启动，必须通过指定的对象来调用相 应的事件，然后通过该事件调用事件处理程序。事件处理程序可以是任意JavaScript语句，但是我们 一般用特定的自定义函数（function）来对事件进行处理。
在使用事件处理程序对页面进行操作时，最主要的是如何通过对象的事件来指定事件处理程序， 其指定方式主要有3种方法：
JavaScript的相关事件
为了便于读者查找JavaScript中的所有事件，下面以表格的形式对各事件进行说明。 如表6-1所示。
表6-1
事件 鼠标键 onclick 盘事件 ondblclick onmousedown onmouseup onmouseover onmousemove onmouseout onkeypress onkeydown onkeyup 页面相 onabort 关事件 onbeforeunload onerror onload onresize onunload 单击鼠标时触发此事件 双击鼠标时触发此事件 按下鼠标时触发此事件 鼠标按下后松开鼠标时触发此事件 当鼠标移动到某对象范围的上方时触发此事件 鼠标移动时触发此事件 当鼠标离开某对象范围时触发此事件 当键盘上的某个按键被按下并且释放时触发此事件 当键盘上某个按键被按下时触发此事件 当键盘上某个按键被按下后松开时触发此事件 图片在下载时被用户中断时触发此事件 当前页面的内容将要被改变时触发此事件 出现错误时触发此事件 页面内容完成时触发此事件（也就是页面加载事件） 当浏览器的窗口大小被改变时触发此事件 当前页面将被改变时触发此事件
图6-3 在页面关闭后弹出提示框
例6-2 在“确定”按钮的单击事件中，用多行代码改变页面中“JavaScript很好学”文本的字体样式。 其操作过程是在页面加载后，文本会以“宋体”格式进行显示，在单击“确定”按钮后，将弹出一个输入 提示框，向该提示框的文本框中输入“红色”，单击“确定”按钮，这时，将关闭提示框，将页面中的文 本以红色的黑体文字格式进行显示。代码如下：
运行结果如图6-4、图6-5和图6-6所示。
图6-5 向输入提示框中添值
图6-4 页面载入后
图6-6 改变文本的字体样式
（2）指定特定对象的特定事件 该 方法是在JavaScript 的<script> 标记 中指定特定的对 象，以及该对 象要执 行的事件名称 ，并 在 <script>和</script>标记中编写事件处理程序代码。 语法：
<form name="form1" method="post" action=""> JavaScript很好学 </form> <form name="form2" method="post" action=""> <input type="button" name="Button" value="确定" onclick="Sfont=prompt('请在文本框中输入红色',' ','提示框');if (Sfont=='红色 '){form1.style.fontFamily='黑体';form1.style.color='red';}"> </form>
事件的基本概念
本讲大纲：
1、 什么是事件 2、事件处理程序的调用 3、JavaScript的相关事件
什么是事件
通常，我们将鼠标或键盘在网页对象上的动作称为“事件”， 而由鼠标或键盘引发的一连串程序的动作称为“事件驱动”，对 事件进行处理的程序或函数称为“事件处理程序”。它们之间的 关系如图6-1所示。
<script language="JavaScript" for="对象" event="事件"> … //事件处理程序代码 … </script>
例如，用<script>和</script>标记来完成页面加载和关闭时显示对话框。代码如下：
<script language="javascript" for="window" event="onload"> alert("欢迎进入本网页"); </script> <script language="javascript" for="window" event="onunload"> alert("谢谢浏览"); </script>
（3）在JavaScript中说明 该方法是在JavaScript脚本中直接对各对象的事件及事件所调用的函数进行声明，不用在HTML标记中指定 要执行的事件。 语法：
<事件主角 - 对象>.<事件在该方法中“事件处理程序”是真正的代码，而不是字符串形式的代码。事件处理程序只能通过自定 义函数来指定，当函数无参数时，函数名后不用加“()”，如果在后面加“()”，函数会被触发，但它并 不是被指派为一个事件处理器。
（1）直接在HTML标记中指定 该方法是直接在HTML标记中指定事件处理程序，例如在<body>和<input>标记中指定。 语法：
<标记 … … 事件="事件处理程序" [事件="事件处理程序" ...]>
在以上语法中的事件处理程序可以是 JavaScript语句，也可是自定义函数，如果是JavaScript 语句，可以在语句的后面以分号（;）作为分隔符，执行多条语句。
例如，直接在JavaScript脚本中执行按钮的单击事件，而不用在按钮的<input>标记中调用单击 事件。该例将pp()函数定义为Button按钮的onclick事件的处理过程。代码如下：
<input type="button" name="Button" value="Button"> <script language="javascript"> function pp(){ alert("我喜欢学习JavaScript"); } Button.onclick=pp; </script>
例6-1 在页面加载完成后将弹出一个“欢迎进入本网页”的对话框，在用户退出页面后，弹出一 个“谢谢浏览”对话框。代码如下:
<body onLoad="alert('欢迎进入本网页')" onunLoad="alert('谢谢浏览')" >
运行结果如图6-2和图6-3所示。
图6-2 在页面加载完成后弹出提示框