HTML 21 天入门: 事件和脚本
当前位置:点晴教程→知识管理交流
→『 技术文档交流 』
事件(Event)网页上的事件,是指当用户在网页上做某个操作时,这个操作被浏览器捕获,被捕获的操作,即为事件。 事件有很多种,不同的 HTML 控件(标签)有不同的事件。 捕获事件,是为了基于用户的操作提供更多的交互,或者说,事件为 HTML 提供了更多的功能扩展,让网页能提供更为丰富的功能。 目前我们说的事件,是已经定义好的事件。所以在使用的时候,只要用就可以了。 大体上,能使用的事情分成以下几类:
每一个事件分类里,都有一批量可用的事件,在每个分类里挑几个常用的进行说明。 窗口事件(Windows Event)窗口事情适用于 body 标签。窗口可理解为当前这个网页。 它的常见事件有比如说 onload,表示当前这个网页文档加载的事件。
在 body 标签里添加了属性 onload,它会在网页文档加载时调用,而调用的是脚本内置的方法 alert,表示弹出一个提示框,上面写着“欢迎光临”。 表单事件表单事件适用于 HTML 的所有元素,但这些元素必须存在于 form 元素之内。 比如说 oninput,是获得用户输入时触发的事件。
可以看到,在用户输入还未展示在 input 里时,oninput 事件就被触发而且可以通过脚本拿到用户输入出来的值,当事件结束后,用户输入的值就显示在了页面上。 键盘事件键盘事件比较少,只有以下三个,贯穿了键盘上的按键被按下又弹起来的全过程。
以上事件不太好使用图形示意,大家可以自行根据前面的示例在本地尝试。 鼠标事件鼠标的事件相对键盘来说,就多了很多。其中最常用的是 onclick 事件,当然还有其它常用的,比如说 ondrag,表示在拖拽时触发,ondbclick,双击时触发,等等。 其中 ondrag 这一系列事件,是后来新增到 HTML 里的。 多媒体事件多媒体事件,指的是多媒体元素相关的操作引发的事情。 这里几乎所有的事件都是新事件,原因也比较简单,多媒体元素是 HTML5 引用的新元素。 而它们的事件也不难理解,比如在音频或视频播放时触发的事件,onplay。 其它事件另外两个新增的事件,没有归类到上述里,它们分别 是 onshow 和 ontoggle。 这两个事件的引入,最主要的原因还是这两个操作在网页上非常常见,ontoggle 表示折叠和展开某个内容时触发。 在后来的脚本框架里,几乎都实现了这一类操作的常函数以简化开发人员写脚本的工作。 脚本(Script)介绍完了事件,就得说一说脚本了,因为要处理事件,基本上离不开脚本的支持。 在页面上插入脚本,要用到标签 script,这个标签里即可以直接写脚本,也可以通过 src 指定一个脚本文件的路径引入脚本。 这里我们说的脚本,默认是指使用 Javascript 这一门语言写的代码。 它最常用于操作图片,表单验证,内容动态更新等等。 与 script 相对应的一个标签是 noscript,当浏览器不支持脚本,或禁用了脚本的时候,noscript 里的内容会被显示。
上述代码执行完的结果,就输出 Hello World! 但如果浏览器不支持脚本,它就会显示 noscript 中间的文字信息。 脚本与事件处理一个脚本与事件处理的完整例子。
默认的背景色是白色,当点击了按钮之后,背景色变成红色,这里使用了事件 onclick,同时它调用了方法 changeBGColor,在脚本里,实现了 changeBGColor 方法,修改了背景色为红色。 总结
该文章在 2024/10/22 12:31:05 编辑过 |
关键字查询
相关文章
正在查询... |