当前位置：文档之家 › 第二章 JavaScript事件处理 JavaScript及网页特效制作课件

第二章 JavaScript事件处理 JavaScript及网页特效制作课件

  • 格式：ppt
  • 大小：1021.00 KB
  • 文档页数：23

下载文档原格式

  / 23

合集下载

JavaScript基础PPT课件

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(课件)-(版)

JavaScript(课件)-(版)

深入浅出JavaScript引言：JavaScript是一种广泛应用于Web开发的编程语言，它为网页带来了动态效果和交互性。

本课件旨在为您提供关于JavaScript的全面概述，包括其基本概念、语法、功能和应用场景。

通过本课件的讲解，您将能够理解JavaScript的工作原理，并能够运用它来创建更加丰富和互动的Web体验。

第一部分：JavaScript概述1.1JavaScript的历史和发展1.2JavaScript的主要特点和优势1.3JavaScript在Web开发中的应用场景第二部分：JavaScript基础语法2.1变量和数据类型2.2运算符和表达式2.3控制语句和循环语句2.4函数的定义和调用第三部分：JavaScript对象和数组3.1对象的基本概念和创建方式3.2数组的基本概念和操作方法3.3内置对象和全局对象第四部分：JavaScript高级特性4.1闭包的概念和应用4.2原型链和继承4.3异步编程和回调函数4.4事件处理和事件委托第五部分：JavaScript与DOM操作5.1DOM的基本概念和结构5.2DOM的查询和操作方法5.3事件冒泡和事件捕获5.4AJAX和动态数据加载第六部分：JavaScript框架和库6.1jQuery的基本使用和优势6.2React的基本概念和组件化开发6.3Vue.js的基本概念和双向数据绑定6.4Angular的基本概念和依赖注入第七部分：JavaScript最佳实践和性能优化7.1代码规范和命名约定7.2代码压缩和合并7.3异步加载和懒加载7.4优化DOM操作和事件处理第八部分：JavaScript安全性和错误处理8.1JavaScript的安全性问题8.2错误处理和异常捕获8.3跨域请求和安全措施结论：通过本课件的学习，您已经了解了JavaScript的基本概念、语法和功能，并能够运用它来创建动态和交互式的Web页面。

JavaScript作为一种灵活和强大的编程语言，将继续在Web开发中发挥重要作用。

JavaScript网页特效案例教程教案(普通班)

JavaScript网页特效案例教程教案(普通班)

JavaScript网页特效案例教程教案(普通班)第一章：JavaScript简介1.1 教学目标了解JavaScript的历史和发展掌握JavaScript的基本语法和结构了解JavaScript在网页中的应用1.2 教学内容JavaScript的历史和发展JavaScript的基本语法和结构JavaScript的数据类型和变量JavaScript的运算符和表达式JavaScript的控制语句JavaScript的对象和数组JavaScript在网页中的应用1.3 教学方法讲授和演示相结合学生动手实践讨论和提问1.4 教学资源PowerPoint课件JavaScript实例代码在线编程环境课堂练习课后作业学生提问和讨论第二章：JavaScript基本语法和结构2.1 教学目标掌握JavaScript的基本语法和结构能够编写简单的JavaScript代码2.2 教学内容JavaScript的基本语法和结构变量和数据类型的声明和使用运算符和表达式的使用控制语句的使用函数的声明和使用2.3 教学方法讲授和演示相结合学生动手实践讨论和提问2.4 教学资源PowerPoint课件JavaScript实例代码在线编程环境课堂练习课后作业学生提问和讨论第三章：JavaScript在网页中的应用3.1 教学目标了解JavaScript在网页中的应用掌握JavaScript在网页中的基本操作3.2 教学内容JavaScript在网页中的应用事件处理的基本概念和方法操作DOM元素的方法和技巧使用JavaScript实现网页特效的基本方法3.3 教学方法讲授和演示相结合学生动手实践讨论和提问3.4 教学资源PowerPoint课件JavaScript实例代码在线编程环境3.5 教学评估课后作业学生提问和讨论第四章：JavaScript数据类型和变量4.1 教学目标掌握JavaScript的数据类型和变量能够正确声明和使用变量4.2 教学内容JavaScript的数据类型和变量变量的声明和使用数据类型的转换类型判断函数的使用4.3 教学方法讲授和演示相结合学生动手实践讨论和提问4.4 教学资源PowerPoint课件JavaScript实例代码在线编程环境4.5 教学评估课堂练习学生提问和讨论第五章：JavaScript运算符和表达式5.1 教学目标掌握JavaScript的运算符和表达式能够正确使用运算符和表达式进行计算5.2 教学内容JavaScript的运算符和表达式算术运算符的使用比较运算符的使用逻辑运算符的使用赋值运算符的使用条件表达式和循环表达式的使用5.3 教学方法讲授和演示相结合学生动手实践讨论和提问5.4 教学资源PowerPoint课件JavaScript实例代码在线编程环境5.5 教学评估课后作业学生提问和讨论第六章：JavaScript控制语句6.1 教学目标掌握JavaScript的控制语句能够正确使用条件语句和循环语句6.2 教学内容JavaScript的控制语句条件语句的使用（if，if-else，switch）循环语句的使用（for，while，do-while）分支结构和循环结构的嵌套使用6.3 教学方法讲授和演示相结合学生动手实践讨论和提问6.4 教学资源PowerPoint课件JavaScript实例代码在线编程环境6.5 教学评估课堂练习学生提问和讨论第七章：JavaScript函数7.1 教学目标掌握JavaScript的函数能够正确声明和使用函数7.2 教学内容JavaScript的函数函数的声明和调用函数的参数传递和返回值匿名函数和自调用函数的使用函数的嵌套和闭包7.3 教学方法讲授和演示相结合学生动手实践讨论和提问7.4 教学资源PowerPoint课件JavaScript实例代码在线编程环境7.5 教学评估课堂练习学生提问和讨论第八章：JavaScript对象和数组8.1 教学目标掌握JavaScript的对象和数组能够正确操作对象和数组8.2 教学内容JavaScript的对象和数组对象的声明和使用数组的声明和使用对象属性和方法的访问和修改数组的遍历和操作（push，pop，shift，unshift）数组的排序和搜索（sort，indexOf，lastIndexOf）8.3 教学方法讲授和演示相结合学生动手实践讨论和提问8.4 教学资源PowerPoint课件JavaScript实例代码在线编程环境8.5 教学评估课后作业学生提问和讨论第九章：JavaScript在网页中的事件处理9.1 教学目标掌握JavaScript在网页中的事件处理能够正确处理鼠标事件、键盘事件和其他事件9.2 教学内容JavaScript的事件处理事件的概念和作用事件处理程序的声明和绑定（onclick，onchange，onkeydown等）事件对象的属性和方法事件冒泡和事件捕获鼠标事件（mouseover，mousedown，mouseup等）键盘事件（keydown，keyup，keypress等）其他事件（scroll，resize等）9.3 教学方法讲授和演示相结合学生动手实践讨论和提问9.4 教学资源PowerPoint课件JavaScript实例代码在线编程环境9.5 教学评估课堂练习课后作业学生提问和讨论第十章：JavaScript网页特效案例分析10.1 教学目标学习JavaScript网页特效的实现方法能够分析和实现常见的网页特效案例10.2 教学内容JavaScript网页特效案例分析案例1：图片轮播案例2：下拉菜单案例3：表单验证案例4：滚动动画案例5：响应式布局案例6：菜单展开与收缩案例7：回到顶部按钮案例8：时间日期显示案例9：天气信息显示10.3 教学方法讲授和演示相结合学生动手实践讨论和提问10.4 教学资源PowerPoint课件JavaScript实例代码在线编程环境10.5 教学评估课堂练习课后作业学生提问和讨论重点解析本文主要介绍了JavaScript网页特效案例教程的教案内容，包括十个章节。

JavaScript教程优质课件

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'。
《JavaScript》PPT课件讲义(2024)

《JavaScript》PPT课件讲义(2024)


简化了函数表达式的写法 ，同时解决了this指向的问 题，使得代码更加简洁易 读。
使用反引号(``)来定义字符 串，可以包含变量和表达 式，使得字符串的拼接更 加直观和易读。
允许将数组或对象的属性 直接赋值给其他变量，简 化了数据的提取和操作过 程。
用于处理异步操作，通过 then和catch方法来指定异 步操作成功或失败时的回 调函数，避免了回调地狱 的问题。
2024/1/29
命名导出 使用export关键字来导出模块中 的指定成员，其他模块可以使用 import { member } from 'module'的语法来导入该成员。
导入所有成员 使用import * as alias from 'module'的语法来导入模块中的 所有成员，并使用别名来引用这 些成员。
2024/1/29
20
Web API接口调用方法
1
Web API概述
Web API是一组基于HTTP协议的应用程序接口 ，用于实现Web应用与服务器之间的数据交互。
2 3
接口调用方法
通过JavaScript的XMLHttpRequest或Fetch API发送HTTP请求，调用Web API接口并处理响 应结果。
游戏开发
使用JavaScript及其 相关技术（如 Canvas、WebGL等 ）开发网页游戏或移 动游戏。
服务器端开发
使用Node.js等技术 进行服务器端编程， 处理请求、操作数据 库等。
2024/1/29
6
02
JavaScript语法与数据类型
2024/1/29
7
基本语法规则
2024/1/29
Байду номын сангаас
《JavaScript动态网页编程》课件.ppt

《JavaScript动态网页编程》课件.ppt


第2章目录
2.1.1 HTML工作原理 HTML标记有以下两种格式：
<标记 属性1="值1" 属性2="值2"...>要控制的内容</标记> <标记 属性1="值1" 属性2="值2"... /> 在HTML语言中，所有标记都必须用一对尖括号括起来，这对尖括号由小于号 “<”和大于号“>”组成，它们是HTML语言的定界符。例如，<html>、<head>、 <body>、<div>、<form>等都是HTML标记。大多数HTML标记都包含一个开始标记 和一个结束标记，用于定义该标记所影响的范围，例如，<html>和</html>、<head> 和</head>等。也有一些HTML标记只要求单一标记，通常应当在这些标记的大于号 之前放置一个斜线符号“/”，例如、水平线标记<hr />、换行标记<br />就是这样。 通过HTML标记可以定义一个页面元素，称为HTML元素。大多数HTML元素都 拥有一个属性集，通过这些属性可以对该元素进行更多的控制。在HTML语言中， 所有属性都放置在开始标记的尖括号内。 大多数HTML元素都具有以下通用属性。 id：为HTML元素指定一个独一无二的标识符。 class：把一个元素指定为一个或多个类的成员。 style：为一个单独出现的元素指定CSS样式。 title：为元素指定一个标题，通常以工具提示形式显示出来。
简单性。JavaScript是一种脚本编写语言，它采用小程序段的方式实现程序设计。 JavaScript是一种解释性语言，在程序运行过程中一边解释一边执行。JavaScript 与HTML、CSS结合在一起，可以实现用户的交互式操作。JavaScript脚本语句 的解释执行由Web浏览器负责，不需要额外的开发环境。
JavaScript学习资料演示课件

JavaScript学习资料演示课件

事件绑定方式
通过HTML标签属性直接绑定事件处理函数，或在JavaScript代码中使用`addEventListener()`方法绑定事件处理 函数。后者支持同时绑定多个事件处理函数，且事件处理函数中的`this`指向当前元素。
事件流模型及阻止默认行为
事件流模型
包括捕获阶段、目标阶段和冒泡阶段。在捕获阶段，事件从 顶层元素向下传递，直到触发目标元素的事件处理函数；在 冒泡阶段，事件从目标元素向上冒泡，直到顶层元素。
使用CDN加速
将JavaScript文件部署在CDN上，利用CDN的分布式网络加速文件传 输，提高加载速度。
异步加载和延迟执行
通过async和defer属性实现JavaScript的异步加载和延迟执行，避免 阻塞页面渲染。
利用浏览器缓存
通过设置HTTP缓存头信息，使浏览器缓存JavaScript文件，减少重复 请求和加载时间。
利用WeakMap和WeakSet处理弱…
使用WeakMap和WeakSet可以自动处理对象之间的弱引用关系，避 免内存泄漏。
渲染性能优化策略
减少重排和重绘
通过避免不必要的DOM操作、使用transform代替top/left等优化手 段，减少页面的重排和重绘次数。
使用requestAnimationFr…
03
AJAX 基于 JavaScript、XML、HTML、CSS 和 DOM 等多种技术组合而成。
XMLHttpRequest对象使用
XMLHttpRequest 是 AJAX 的 基础，用于在后台与服务器交换
数据。
通过创建 XMLHttpRequest 对 象，可以打开一个连接、发送请
求并处理响应。
了解jQuery中的事件绑定、事件冒泡、事 件委托等概念，实现交互效果。
JavaScript编程-电子课件

JavaScript编程-电子课件

JavaScript编程-电子课件1. 简介JavaScript是一种编程语言，它主要用于在Web浏览器上创建动态效果和交互性。

与HTML和CSS一起，JavaScript是现代Web开发中不可或缺的一部分。

本电子课件旨在向初学者介绍JavaScript编程的基础知识。

本课程将探讨以下主题：•JavaScript的起源和发展历程•JavaScript的特点和优势•如何在HTML中使用JavaScript代码•JavaScript变量和数据类型•JavaScript运算符和控制结构•JavaScript函数和事件处理器•JavaScript数组和对象•JavaScript面向对象编程•JavaScript中的错误处理2. JavaScript的起源和发展历程JavaScript最初由Netscape公司的Brendan Eich开发，最早的版本称为LiveScript。

1995年，Netscape将它更名为JavaScript，并提交给ECMA （European Computer Manufacturers Association）组织进行标准化处理。

ECMAScript是JavaScript的标准化版本，它是一种完全独立的编程语言，目前已经成为一种普及的脚本语言。

JavaScript已经成为Web开发的核心技术之一，Web上许多应用程序都依赖它的功能。

JavaScript的发展也在不断演进，新的规范和框架不断出现。

3. 如何在HTML中使用JavaScript代码JavaScript代码可以在HTML页面的和标签中的标签内使用。

可以使用内联脚本或外部脚本文件。

下面是一个简单的JavaScript例子，它将在浏览器的控制台中输出欢迎语句。

```javascriptconsole.log(。

JavaScript特效制作精讲

JavaScript特效制作精讲

JavaScript特效制作精讲目录：技巧1：添加链接提示技巧2：在网页中加入最后修改日期技巧3：实现图片循环隐现的效果技巧4：给图像添加探照灯效果。

技巧5：打开一个新的浏览器窗口并设置窗口的属性技巧6：利用单机来关闭浏览器窗口技巧7：禁止保存网页技巧8：制作网页中雪花飘飘的效果技巧9：在状态栏中显示跑马灯效果技巧10：制作烟花效果技巧11：制作状态栏数字时钟技巧12：制作围绕鼠标指针旋转的文本技巧13：制作跟随鼠标指针飘动的双层时钟技巧14：实现每天不同时间显示不同信息技巧15：禁止鼠标右键和左键对页面的操作技巧16：实现鼠标指针移上时图片加亮的效果技巧17：让网页中跳出一个会说话的老人技巧18：让浏览者知道自己访问网页的次数技巧19：禁止页面最小化技巧20：设置网页由中间向外扩大变化技巧1：添加链接提示添加链接提示，在要添加的位置输入以下代码。

OnMouseOver="window.status='添加链接提示...'; return true" OnMouseOut="window.status=''; return true"技巧2：在网页中加入最后修改日期在网页中加入最后修改日期，在<head>与</head>之间输入以下代码。

<script Language="JavaScript">document.write("最后修改日期" + stModified);</Script>技巧3：实现图片循环隐现的效果制作图片循环隐现效果的具体操作步骤如下：①在<body>与</body>之间输入以下代码。

<script language="JavaScript">var b = 1;var c = true;function fade(){if(document.all);if(c == true) {b++;}if(b==100) {b--;c = false}if(b==10) {b++;c = true;}if(c == false) {b--;}u.filters.alpha.opacity=0 + b;setTimeout("fade()",50);}</script>>②将光标位置放置在<body>标记内，输入代码onLoad=＂fade()＂③将光标位置放置在图片<img>标记内，输入以下代码。

电子课件-《网页制作高级特效》-A06-3371 模块二 JavaScript 高级特效

电子课件-《网页制作高级特效》-A06-3371 模块二 JavaScript 高级特效


课题 １ JavaScript 语言基础
客户端脚本和服务器端脚本比较
课题 １ JavaScript 语言基础
编写 JavaScript 程序可选择普通的文本编辑器或集成开发环境。 Dreamweaver 集成了JavaScript 开发环境，提供了强大的 JavaScript 支持。
JavaScript 需要嵌入 HTML 中，即 JavaScript 的存在依赖于 HTML 文档。 在 HTML 中，使用 < script > 标记引入 JavaScript ，使用 < / script > 结束 JavaScript ，< script >和 < / script > 之间是 JavaScript 脚本。 < script > < / script > 可以放在 <head > 和 < / head > 之间，也可以放在 <body > 和 < / body> 之间。二者的区别是: １) head 部分的脚本: 需调用才执行的脚本或事件触发执行的脚本放在 HTML 的 head部分。当把脚本放在 head 部分时，可以保证脚本在任何调用之 前被加载。
< script > 标记还有一个 type 属性，用于指明文本类型，其值为 “text / javascript”。
课题 １ JavaScript 语言基础
和 VBScript 不区分大小写不同，JavaScript 严格区分大小写。 在编写 JavaScript 脚本语句时，用 “；” 作为当前语句的结束符。语句分 行后，作为语句结束符的 “；” 可省略。也可将多个语句写在同一行中，若将 多个语句写在同一行中，则语句之间的 “；” 不能省略。 JavaScript 中的注释采用和 Java 中类似的方式，单行注释前加 “ / / ”，多 行注释放在 “ / ∗” 和 “∗ / ” 之间。
JavaScript网页动画教程

JavaScript网页动画教程

JavaScript网页动画教程第一章：概述JavaScript是一种广泛使用的编程语言，可用于创建交互式和动态的网页。

在网页设计中，动画是提升用户体验和吸引力的重要部分。

本教程旨在介绍如何使用JavaScript创建网页动画。

本章将简要介绍JavaScript和网页动画的基本概念，为后续章节奠定基础。

第二章：基本动画效果动画是通过改变元素的属性值来实现的。

JavaScript中提供了多种方法来操作元素的属性。

本章将通过示例介绍如何使用JavaScript实现基本动画效果，包括淡入淡出、移动、旋转和缩放。

同时，还将探讨如何使用定时器函数来控制动画的播放速度。

第三章：过渡效果过渡效果可以平滑地改变元素的属性值，使动画更加自然。

CSS3中引入的transition属性可以实现简单的过渡效果，而JavaScript可以进一步扩展这些效果。

本章将介绍如何使用JavaScript结合CSS3过渡属性创建更复杂的过渡动画。

同时，还将讨论如何处理过渡效果的事件和回调函数。

第四章：关键帧动画关键帧动画是一种更高级的动画技术，它可以实现更复杂和精确的动画效果。

CSS3中的animation属性可以实现关键帧动画，而JavaScript可以在此基础上添加更多的控制和交互。

本章将介绍如何使用JavaScript结合CSS3关键帧动画创建更灵活和交互式的动画效果。

同时，还将探讨如何处理关键帧动画的事件和自定义动画函数。

第五章：路径动画路径动画是一种有趣和创新的动画效果，通过沿着指定的路径移动元素来实现。

JavaScript中的canvas元素提供了路径绘制和动画控制的功能，可以实现各种路径动画效果。

本章将介绍如何使用JavaScript和canvas元素创建路径动画，包括直线运动、曲线运动和多对象运动。

同时，还将探讨如何控制路径动画的速度和方向。

第六章：交互动画交互动画可以根据用户的操作或输入来触发和响应。

JavaScript中的事件处理函数可以用于捕获和处理用户的交互行为，并实现相应的动画效果。

  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

//通过document.getElementById函数获取文本框对象
var curTxt = document.getElementById('txtResult');
//为文本框对象绑定onblur事件 curTxt.onblur = function() {
根据id获取页面组 件对象的方法
//this表示调用此函数的当前文本框对象
• JavaScript浏览器事件
– onload : 浏览器载入文档事件 – onunload : 关闭该文档事件 – onblur : 浏览器失去焦点事件 – onfocus : 获得焦点事件
2020/9/26
JavaScript事件处理
• HTML 文档将元素的常用事件,如onclick、 onmouseover 等,当作属性捆绑在HTML元素 上，当该元素的特定事件发生时，对应于此 特定事件的事件处理器就被执行，并将处理 结果返回给浏览器。事件捆绑导致特定的代 码放请实置现功在能其：文所档加处载完对毕象时弹的出对事话框件提示处“理文档器加载中完毕。”
alert('文档已经加载完毕！'); }
//此处可以省略函数小括号
调用函数 showMessage
window.onload = showMessage;
➢推荐使用js脚本和html文档分离的模式
2020/9/26
JavaScript事件应用-按 钮单击事件
为页面上现有的按钮各自绑定一个单击事件，弹出对话框 显示按钮的文本值。
绑定onblur事件 }
alert(this.value);
}
演示程序text.html
2020/9/26
课堂练习
• 练习使用文本框的onchange事件，当事件触 发时，弹出文本框内当前的值。
2020/9/26
JavaScript事件应用-下拉菜单change事件
为下拉菜单绑定onchange事件，并在页面输出当前选中项的文 本值。
2020/9/26
演示程序button.html
课堂练习
• 单击页面按钮，弹出提示框，用两种不同的 绑定方式实现。
2020/9/26
JavaScript事件应用-文本 框光标事件
为文本框绑定一个失去光标事件，弹出当前文本框中的内 容。
分析
• 文本框失去光标事件为onblur • 需获取当前文本框对象(使用
JavaScript事件处理
• 其他书写方式
<html><head><title>第一个JavaScript事件</title> <script type="text/javaScript"> function showMessage() {
定义函数 showMessage
alert('文档加载完毕！');
} </script> </head>
调用函数 showMessage
<body onload="showMessage();"></body></html>
演示程序first2.html
2020/9/26
JavaScript事件处理
• 其他书写方式
function showMessage() {//显式定义一个函数以备调用
//定义函数showValue并接受一个按钮对象参数 function showValue(btn) {
alert(btn.value); }
定义函数 showValue
传入this代表当前 按钮对象
调用方式：
<input type="button" value="按钮1" onclick="showValue(this);" /> <input type=“button” value=“按钮2” onclick=“showValue(this);” /> <input type="button" value="按钮3" onclick="showValue(this);" />
</select>result.innerHTML = html;
<}div id="result"></div><!--显示结果用的div-->
2020/9/26Biblioteka 演示程序select.html
总结
• 什么是事件？ • JavaScript如何处理事件？ • 按钮的常用事件有哪些，如何绑定？
2020/9/26
2020/9/26
JavaScript事件处理
////定HT义M了L文一档个加匿载名完函毕数后绑执定行到此on方lo法ad，事此件处中使。用functio匿n 名函数 window.onload = function() {
alert('文档已经加载完毕！'); }
2020/9/26
演示程序first.html
分析
• 需使用事件onchange • 需获取当前下拉菜单对象(使用
document.getElementById(‘下拉菜单id’)方 法获取)， • 使用下拉菜单对象.value属性获取当前选中 项的值。
2020/9/26
JavaScript事件应用-下拉菜单change事件
<//s定e义lec一t 个id=函"s数e处lec理t"oonncchhaannggee事=件"show(this);"> function<sohpotwio(nsevlaelcute)={"0">请选择</option>
HJtSm脚l脚本本代代码码
<voarptrieosnuvlta=ludeo=c"加um菲e猫nt."g>e加tE菲le猫m<e/notpBtyioIdn(>'result');
<voarpthiotmnlv=al'u你e选="择兔了八'哥+"s>e兔le八ct.哥va<l/uoep;tion>
<//o使p用tioinnvearlHuTe=M"L唐属老性鸭为"d>i唐v内老部鸭插</入op一tio段nh>tml代码
2020/9/26
本章案例
按钮单击事件 文本框光标事件 下拉菜单change事件
2020/9/26
本章目标
了解JavaScript事件含义 掌握JavaScript常用事件 掌握JavaScript事件绑定
2020/9/26
2020/9/26
2020/9/26
JavaScript常用事件
作业
2020/9/26
2020/9/26
document.getElementById(‘文本框id’)方 法获取)， • 使用文本框对象.value属性获取内部写入 的值。
2020/9/26
JavaScript事件应用-文本框光标事件
//这里需保证页面文档加载完毕，否则无法取得文本框文对档象加载完毕
window.onload = function() {
分析
1. 分析需要使用的事件，按钮单击事件为onclick 2. 根据需要决定事件的绑定方式，采用显式声明函数后手工绑定（所
有按钮需要处理的问题完全相同，均是弹出对话框显示当前按钮的 文本，可以采用绑定同一个函数的方式）。 3. 编写代码。
2020/9/26
JavaScript事件应用-按 钮单击事件