week11---11月18日 JS基础（七）

一、复习

1、函数的概念

2、通过ID获得HTML元素的方法

二、新课

计算器中firstChild的使用要求非空

（例子说明）

（一）函数的概念

1．内嵌函数

JavaScript的函数可以嵌套定义，即在一个函数内部还可以定义独立的内嵌函数（内部函数），但内嵌函数只能在包含它的独立函数内部调用。

内嵌函数可以直接使用其外部函数的所有变量，而不需要作为参数传递，因此函数内需要多次重复使用的代码块尤其适合定义为内嵌函数，在任意位置任意多次调用而不必传递参数。

2．匿名函数

JavaScript允许在需要调用函数的位置直接定义并调用匿名函数，一般仅适用于为屏蔽全局变量、在页面加载时需要记忆的事件函数。

匿名函数定义及调用格式：

事件属性名称＝function( [参数] ) { 脚本代码语句块; }

（二）JavaScript事件处理

每个标记都可以引发某个事件，XHTML或HTML4.0都可以将事件对象作为标记的属性，并与JavaScript函数配合使用，事件发生时自动调用函数或执行JavaScript代码实现对页面操作。

标记元素响应事件的传统写法：

<标记名 事件属性名称＝"函数名( [参数1, 参数2, ...] )

或JavaScript代码" >

如果代码较少可直接在事件属性中书写代码，但不推荐这种方式，目前流行的网页制作技术，即使调用事件函数也不在标记中使用事件属性，只为标记设置id属性，所要响应的各种事件名称及调用的事件函数全部在JavaScript文件中设置。

注意：事件发生时JavaScript会自动创建一个event对象，该对象封装了引发事件的所有状态与参数，通过event对象可以获取引发事件的事件源对象、鼠标左键或右键及点击次数以及鼠标按下点的坐标、按下了键盘的哪个按键等。

1、JavaScript常用事件

1）页面相关事件

页面相关事件一般由window浏览器对象或body对象响应。

onload 页面内容加载完成，包括外部文件引入完成

onunload 用户改变页面卸载当前页面前或关闭浏览器后

onmove 移动浏览器窗口(onmovestart、onmoveend)

onresize 调整浏览器窗口或框架大小(onresizestart、onresizeend)

onerror 加载页面或图像错误，如脚本错误与外部数据引用的错误

onabort 加载图像被用户中断或取消

onstop 按下浏览器停止按钮或者正下载的文件被中断

onscroll 浏览器滚动条位置发生变化

onbeforeunload当前页面内容被改变之前(关闭浏览器之前)

2）鼠标相关的一般事件

鼠标相关事件可以由页面中任意标记对象响应。

onclick 鼠标单击（在某个标记对象控制的范围内）

ondblclick 鼠标双击

onmousedown 鼠标按下（一般用于按钮或超链接对象）

onmouseup 鼠标松开（一般用于按钮或超链接对象）

onmouseover 鼠标移到元素上(进入某个标记对象控制范围内)

onmouseout 鼠标从元素移开(脱离某个标记对象的控制范围)

onmousemove 鼠标在元素内控制范围移动

注意：鼠标单击将同时分解为鼠标按下、鼠标释放，响应顺序为按下、释放、单击。

3）键盘相关事件

键盘相关事件可以由页面中任意标记对象响应，但必须获得焦点才能响应键盘事件。

onkeydown 某个键被按下时

onkeyup 某个键松开释放时

onkeypress 键盘上的某个键被敲击（按下并释放）

注意：按键事件将同时分解为键按下、键释放，响应顺序为按下、敲击、释放。

4）表单相关事件

表单相关事件一般由表单元素响应，可配合表单元素对表单数据进行验证。

onfocus 元素获得焦点(也可用于其他标记，鼠标与键盘操作均可触发)

onblur 元素失去焦点(也可用于其他标记，鼠标与键盘操作均可触发)

onchange 文本内容被改变—在失去焦点时触发

onsubmit 单击提交按钮提交表单时触发(必须由form标记响应)

onreset 单击重置按钮时触发（必须由form标记响应）

5）页面编辑事件

6．滚动字幕事件

7．数据绑定事件

8．外部事件

（三）实训练习

页面用户注册

要求：1、用户注册用户名如果失去焦点，检查字符长度是否超过6个。

2、输入完密码后，可以进行两次密码是否相等。

利用JavaScript编写一个小程序实现页面加载事件、鼠标事件。

要求：1、页面设计如下图，单击按钮时，进行两数和计算，双击按钮时，进行两数幂计算；

2、显示结果前的文字会根据按钮的单击或双击事件改变；

3、页面关闭时，跳出对话框，“再见！”。