轻松学HTML+CSS之脚本和事件.ppt

1、第13章 脚本和事件,网站脚本语言是指在HTML中所使用的脚本语言。它可以实现网页的动态效果。事件也是网页制作过程中经常会用到的，通过事件可以让网页变得更加生动、灵活。所以经常将脚本和事件相结合使用，以达到使网页效果更加富有生命力的效果。本章将讲解有关两者的知识。,13.1 脚本,脚本是指一种计算机语言。HTML脚本是指在HTML中通过编程可以运行的一种HTML语言，主要用于实现一些动态的效果。本节就来介绍有关脚本的基本知识。,13.1.1 定义脚本,定义脚本是指在HTML页面中对脚本的定义。通常使用标签进行定义，定义语法规则如下所示：,13.1.1 定义脚本,有时，由于浏览器的版本不同，可能

2、无法识别标签，标签中所包含的内容会以文本方式显示在页面上。为解决这种情况的发生，需要将脚本隐藏在注释标签中，定义代码规则如下所示： 在JavaScript中：,13.1.1 定义脚本,在VBScript中：,13.1.2 替换文本,替换文本是指在定义的脚本没有执行时的替代文本。通过标签进行定义，与标签相同，添加在标签中，定义语法规则如下：,13.1.3 嵌入对象,嵌入对象是指在HTML中嵌入所需的对象。常见的嵌入对象标签包括标签和标签。,13.1.3 嵌入对象,1.标签 通过标签进行定义，标签可以插入Java中后缀为.class的文件（即Java类文件），定义语法规则如下所示：,13.1.3

3、嵌入对象,2.标签 嵌入对象的方式还有一种，就是使用标签。由于网页时代的更新，标签几乎已经被淘汰了，建议读者使用标签进行定义对象的嵌入。,13.2 事件,事件是指当网页在浏览器上被某些动作出发所做出的相应的反应。通过事件的使用可以使网页变得更加生动，效果更加丰富。本节将会详细介绍有关HTML中触发的事件。,13.2.1 触发载入事件,触发载入事件是指当鼠标对链接进行单击时做出的动作。通过onclick来进行定义，通常onclick可以执行很多种动作。由于onclick的语法形式较多，且复杂，这里给出基本定义语法如下所示：,13.2.2 触发双击事件,触发双击事件是指当鼠标对链接进行双击时做出的

4、动作。通过ondbclick进行设置，这里给出基本定义语法如下所示：,13.3 触发鼠标按钮事件,触发鼠标按钮事件是指鼠标在按钮上所做的动作触发事件，通过onmouse进行定义。其中，onmouse中有5种触发事件，下面我们就来详细介绍有关触发鼠标按钮事件的知识。,13.3.1 触发鼠标按下事件,鼠标按下事件是指鼠标在按下时立刻发生的动作。通过onmousedown进行定义，通常onmousedown可以执行多种动作。由于onmousedown的语法形式较多，且复杂，这里给出基本定义语法如下所示：,13.3.2. 触发鼠标释放事件,鼠标释放事件是指鼠标在按下后松开时发生的动作。通过onmous

5、eup进行定义，放在标签中，这里给出基本定义语法如下所示：,13.3.3 触发鼠标移动事件,鼠标移动事件是指鼠标在元素上移动时发生的动作。通过onmousemove进行定义，这里给出最基本的语法形式如下所示：,13.3.4 触发鼠标经过事件,鼠标经过事件是指鼠标在经过元素时发生的动作。通过onmouseover进行定义，由于onmouseover的语法形式复杂多样，这里给出简单的语法形式如下所示：,13.3.5 触发鼠标离开事件,鼠标离开事件是指当鼠标离开元素时发生的动作。通过onmouseout进行定义，这里给出简单的语法形式如下所示：,13.4 触发键盘事件,触发键盘事件是指在键盘上做过的

6、动作触发的事件。通过onkey进行定义，其中onkey中具有3个触发事件，本节将来介绍有关触发键盘事件的知识。,13.4.1 触发按下键盘按钮事件,按下键盘按钮事件是指在用户按下一个键盘按键时所触发的事件。通过onkeydown进行定义，通常onkeydown可以执行多种动作。由于onkeydown的语法形式多样且复杂，这里给出最简单的语法形式如下所示：,13.4.2 触发键盘按键被按下并松开事件,键盘按键被按下并松开是指在键盘按键被按下并松开一个键时触发的事件。通过onkeypress进行定义，这里给出最简单的语法形式如下所示：,13.4.3 触发键盘按键被松开事件,键盘按键被松开是指键盘按

7、键被松开时触发的事件。通过onkeyup进行定义，这里给出最基本的定义语法形式如下所示：,13.5 触发页面相关事件,页面相关事件是指在打开页面时被触发的事件。页面相关事件包括很多复杂的JavaScript程序。本节就将介绍有关页面相关事件的知识。,13.5.1 触发图片在下载时被用户中断事件,图片在下载时被用户中断事件是指用户在页面图片还没有完全载入前就放弃了图片的下载，所触发的事件。通过onabort进行设置，这里给出最简单的语法形式如下所示：,13.5.2 触发当前页的内容将要被改变事件,触发当前页面的内容将要被改变事件是指当页面发生跳转、刷新、返回、关闭等可以离开本页面的动作而触发的事

8、件。通过onbeforeunload进行定义，这里给出最简单的语法形式如下所示：,13.5.3 触发捕捉当前页面的错误事件,捕捉当前页面错误是指在页面的文本或图片发生加载时所触发的事件。通过onerror进行定义，这里给出最简单的语法形式如下所示：,13.5.4 触发页面内容完成传送到浏览器事件,触发页面内容完成传送到浏览器事件是指在页面内容加载完成后立即触发的事件。通过onload进行定义，这里给出最简单的语法形式如下所示：,13.5.5 触发浏览器的窗口大小被改变事件,触发浏览器窗口大小被改变事件是指当页面窗口或框架大小被调整时触发的事件。通过onresize进行定义，这里给出最简单的语法

9、形式如下所示：,13.5.6 触发浏览器的滚动条位置发生变化事件,触发浏览器的滚动条位置发生变化事件是指当页面的滚动条被移动时所触发的事件。通过onscroll进行定义，这里给出最简单的语法形式：,13.5.7 触发当前页面将被改变事件,触发当前页面将改变事件是指当页面发生跳转、返回、关闭、刷新等可以离开本页面的动作而触发的事件。通过onunload进行定义。这里给出的语法形式如下所示：,13.6 表单相关事件,表单相关事件是指在表单里触发的事件。表单相关事件包括了很多的复杂JavaScript程序，下面就来介绍有关表单的相关事件。,13.6.1 触发元素失去焦点事件,触发元素失去焦点事件是指

10、当状态已经不在当前元素上时触发的事件。通过onblur进行定义，onblur可以执行很多种动作。由于onblur的语法形式多样且复杂，这里给出最简单的语法形式如下所示：,13.6.2 触发元素改变事件,触发元素改变事件是指当改变当前的元素所触发的事件。通过onchange进行定义，与onblur相同，都需要用鼠标在元素外点击时才可以触发事件发生。通常onchange可以执行多种动作。这里给出最简单的语法形式如下所示：,13.6.3 触发元素过的焦点事件,触发元素获得焦点事件是指当状态在元素上时所触发的事件。通过onfocus进行定义，onfocus可以执行多种动作。这里给出最简单的语法形式如下

11、所示：,13.6.4 触发表单被重置事件,触发表单被重复事件是指当表单中重置按钮被按下时所触发的事件。通过onreset进行定义，这里给出最简单的语法形式，如下所示：,13.6.5 触发表单被提交事件,触发表单被提交事件是指当表单中提交按钮被按下时触发的事件。通过onsubmit进行定义，定义语法形式如下所示：,13.7 滚动字幕事件,滚动字幕事件是指在滚动字幕里触发的事件。其中滚动字幕事件包括有很多复杂的JavaScript程序，本节就来介绍有关滚动字幕事件的知识。,13.7.1 触发内容移动至显示范围之外事件,触发内容移动至显示范围之外事件是指当滚动字幕里的内容超出滚动字幕范围之外触发的事

12、件。通过onbounce进行定义，由于其是用于定义滚动字幕的，故需要将该事件放在标签中，定义语法规则如下所示：,13.7.2 触发完成需要显示内容后的事件,触发完成需要显示内容后的事件是指当需要显示的内容已经显示完成后所触发的事件。通过onfinish进行定义，onsubmit可以执行多种动作，如弹出窗口等。与onbounce的用法相同，onfinish也需要放在标签中，定义语法形式如下所示：,13.7.3 触发开始显示内容事件,触发开始显示内容事件是指当需要显示的内容开始显示时触发的事件。通过onstart进行定义，也需要放在标签中，定义语法形式如下所示：,13.8 编辑事件,编辑事件是指在

13、编辑页面时触发的事件。其中，编辑事件包括了有很多复杂的JavaScript程序。本节就来介绍有关编辑事件的知识。,13.8.1 触发按下鼠标右键出现菜单的事件,触发按下鼠标右键出现菜单的事件是指当鼠标在文本内容中点击了右键所触发的事件。通过oncontextmenu进行定义，由于它是用于控制页面内容的，故需放在标签中。定义语法如下所示：,13.8.2 触发被选择内容被复制后的事件,触发被选择内容被复制后的事件是指当页面中选择内容进行复制时触发的事件。通过oncopy进行定义，也需要写在标签中。此事件可以通过复杂的编程用于防止页面内容被复制，定义语法形式如下所示：,13.8.3 触发被选择内容被

14、剪切时的事件,触发被选择内容被剪切时的事件是指对页面中选择的内容被剪切时触发的事件。通过oncut进行定义，需要放在输入框标签中。此事件可以通过复杂的编程来防止页面内容被剪切。定义语法形式如下所示：,13.8.4 触发鼠标拖动时的事件,触发鼠标拖动时的事件是指当页面中选择的内容被拖动时触发的事件。通过ondrag进行设置，需要写在标签中。此事件可以通过复杂的编程来防止页面内容被拖动，定义语法形式如下所示：,13.8.5 触发失去鼠标移动所形成选择焦点时的事件,触发失去鼠标移动所形成选择焦点时的事件是指当页面中的内容用鼠标进行选择，选中后松开鼠标所触发的事件。通过onlosecapture进行定

15、义，需要写在标签中。定义语法形式如下所示：,13.8.6 触发内容被黏贴时事件,触发内容被黏贴时的事件是指页面内容被黏贴时触发的事件。通过onpaste进行定义，需要卸载输入框标签中。定义语法形式如下所示：,13.8.7 触发内容被选择时事件,触发内容被选择时事件是指当页面内容被选择时触发的事件。通过onselect进行定义，需要写在标签中。定义语法形式如下所示：,13.8.8 触发内容选择准备开始时事件,触发内容选择准备开始时事件是指当页面内容开始被选择时触发的事件。通过onselectstart进行定义，需要写在标签中，定义语法形式如下所示：,13.9 外部事件,外部事件是指触发的事件在页

16、面内容范围之外。其中包括有很多复杂的JavaScript程序，本节就来介绍有关外部事件的知识。,13.9.1 触发文档被打印后事件,触发文档被打印后事件是指当页面被打印完后触发的事件。通过onafterprint进行定义，需要写在标签中，定义语法形式如下所示：,13.9.2 触发文档即将要打印时事件,触发文档即将要打印时的事件是指在页面将要被打印时触发的事件。通过onbeforeprint进行定义，需要写在标签中，定义语法形式如下所示：,13.9.3 触发滤镜效果发生变化时事件,触发滤镜效果发生变化时的事件是指当页面内容发生滤镜效果时触发的事件。通过onfilterchange进行设置，通常会

17、配合JavaScript程序进行设置。定义语法形式如下：,13.9.4 触发按下F1（或者帮助选择）时的事件,触发按下F1（或者帮助选择）时的事件是指在页面中按下F1或者选择帮助菜单时触发的事件。通过onhelp进行定义，需要放在标签中。定义语法形式如下所示,13.9.5 触发对象的属性之一发生变化时事件,触发对象的属性之一发生变化时的事件是指当页面中元素发生变化时触发的事件。通过onpropertychange进行定义，需要写在输入框中，定义语法形式如下所示：,13.10 数据绑定,数据绑定是指页面信息和数据源之间触发的事件。大多数的数据源都来自数据库，数据绑定所触发的事件需要和数据库进行绑

18、定才可以使用。由于这方面的内容涉及到数据库的相关知识，故本节对此方面的内容只做个简单的介绍。,13.10 数据绑定,1.触发数据完成由数据源到对象传送时的事件 触发数据完成由数据源到对象传送时的事件是指当数据完成后，从数据源传送到响应的页面元素时触发的事件，通过onafterupdate进行定义。 2.触发数据源发生变化时的事件 触发数据来源发生变化时的事件是指当数据的来源法神改变时触发的事件，通过oncellchange进行定义。,13.10 数据绑定,3.触发在数据接收完成时的事件 触发数据接收完成时事件是指当数据从数据源接收完成时所触发的事件，通过ondataavailable进行定义。 4.触发在数据源发生变化时的事件 触发在数据源发生变化时的事件是指当提供数据的数据源发生变化时触发的事件，通过ondatesetchange进行定义。,13.10 数据绑定,5.触发全部有效数据读取完毕时的事件 触发全部有效数据读取完毕时的事件是指当页面绑定有效数据读取完毕时触