LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

HTML 21 天入门: 事件和脚本

admin
2024年10月19日 22:15 本文热度 103

事件(Event)

网页上的事件,是指当用户在网页上做某个操作时,这个操作被浏览器捕获,被捕获的操作,即为事件。

事件有很多种,不同的 HTML 控件(标签)有不同的事件。

捕获事件,是为了基于用户的操作提供更多的交互,或者说,事件为 HTML 提供了更多的功能扩展,让网页能提供更为丰富的功能。

目前我们说的事件,是已经定义好的事件。所以在使用的时候,只要用就可以了。

大体上,能使用的事情分成以下几类:

  • 窗口事件

  • 表单事件

  • 键盘事件

  • 鼠标事件

  • 多媒体事件

  • 其它事件

每一个事件分类里,都有一批量可用的事件,在每个分类里挑几个常用的进行说明。

窗口事件(Windows Event)

窗口事情适用于 body 标签。窗口可理解为当前这个网页。

它的常见事件有比如说 onload,表示当前这个网页文档加载的事件。

<body onload="alert('欢迎光临!')"></body> 

在 body 标签里添加了属性 onload,它会在网页文档加载时调用,而调用的是脚本内置的方法 alert,表示弹出一个提示框,上面写着“欢迎光临”。

表单事件

表单事件适用于 HTML 的所有元素,但这些元素必须存在于 form 元素之内。

比如说 oninput,是获得用户输入时触发的事件。

<form action="/" method="post">   测试oninput事件:<input     id="textbox"     oninput="alert(document.getElementById('textbox').value)"     value=""   /> </form> 

可以看到,在用户输入还未展示在 input 里时,oninput 事件就被触发而且可以通过脚本拿到用户输入出来的值,当事件结束后,用户输入的值就显示在了页面上。

键盘事件

键盘事件比较少,只有以下三个,贯穿了键盘上的按键被按下又弹起来的全过程。

  • onkeydown: 当按下按键时触发(此时还未被按到最下面,只是按了)。

  • onkeypress: 当按键被按下后松开时触发。

  • onkeyup: 当按键复原到一开始位置时触发。

以上事件不太好使用图形示意,大家可以自行根据前面的示例在本地尝试。

鼠标事件

鼠标的事件相对键盘来说,就多了很多。其中最常用的是 onclick 事件,当然还有其它常用的,比如说 ondrag,表示在拖拽时触发,ondbclick,双击时触发,等等。

其中 ondrag 这一系列事件,是后来新增到 HTML 里的。

多媒体事件

多媒体事件,指的是多媒体元素相关的操作引发的事情。

这里几乎所有的事件都是新事件,原因也比较简单,多媒体元素是 HTML5 引用的新元素。

而它们的事件也不难理解,比如在音频或视频播放时触发的事件,onplay。

其它事件

另外两个新增的事件,没有归类到上述里,它们分别 是 onshow 和 ontoggle。

这两个事件的引入,最主要的原因还是这两个操作在网页上非常常见,ontoggle 表示折叠和展开某个内容时触发。

在后来的脚本框架里,几乎都实现了这一类操作的常函数以简化开发人员写脚本的工作。

脚本(Script)

介绍完了事件,就得说一说脚本了,因为要处理事件,基本上离不开脚本的支持。

在页面上插入脚本,要用到标签 script,这个标签里即可以直接写脚本,也可以通过 src 指定一个脚本文件的路径引入脚本。

这里我们说的脚本,默认是指使用 Javascript 这一门语言写的代码。

它最常用于操作图片,表单验证,内容动态更新等等。

与 script 相对应的一个标签是 noscript,当浏览器不支持脚本,或禁用了脚本的时候,noscript 里的内容会被显示。

<script>   document.write("Hello World!"); </script> <noscript>您的浏览器不支持 JavaScript或禁用了Javascript!</noscript> 

上述代码执行完的结果,就输出 Hello World! 但如果浏览器不支持脚本,它就会显示 noscript 中间的文字信息。

脚本与事件处理

一个脚本与事件处理的完整例子。

<script>   function changeBGColor() {     document.body.style.backgroundColor = "#ff0000"; //Red color   } </script>  <body>   <button type="button" onclick="changeBGColor()">点我改变背景色!</button> </body> 

默认的背景色是白色,当点击了按钮之后,背景色变成红色,这里使用了事件 onclick,同时它调用了方法 changeBGColor,在脚本里,实现了 changeBGColor 方法,修改了背景色为红色。

总结

  • 🍑 事件是被捕获的用户操作,基于不同的事情,能提供更丰富的功能。

  • 🍑 脚本常用于操作图片,表单验证,内容动态更新等等。

  • 🍑 事件和脚本的结合,能够提供更好的事件处理以及代码管理。


该文章在 2024/10/22 12:31:05 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved