Javascript基础学习干货教程（4）

最新推荐文章于 2025-09-04 18:55:33 发布

weixin_34248023

最新推荐文章于 2025-09-04 18:55:33 发布

阅读量110

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5cda6796f265da038d0b6655

本文深入讲解HTML事件在JavaScript中的应用，包括事件触发、事件处理、表单验证等关键概念。同时，介绍了JavaScript的调试技巧，如使用try-catch语句处理错误，利用F12键启用浏览器调试工具，以及如何使用debugger关键字进行代码调试。

JavaScript 事件

HTML 事件是发生在 HTML 元素上的事情。下面是一些常见的HTML事件的列表:

比较常见的是通过事件属性来调用JavaScript代码

HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素

修改自身元素的内容 (使用 this.innerHTML)：

<button onclick="this.innerHTML=Date()">现在的时间是?</button>复制代码

事件可以用于处理表单验证，用户输入，用户行为及浏览器动作:
页面加载时触发事件
页面关闭时触发事件
用户点击按钮执行动作
验证用户输入内容的合法性

可以使用多种方法来执行 JavaScript 事件代码：
HTML 事件属性可以直接执行 JavaScript 代码
HTML 事件属性可以调用 JavaScript 函数
可以为 HTML 元素指定自己的事件处理程序
可以阻止事件的发生。

JavaScript 对大小写是敏感的。函数 getElementById 与 getElementbyID 是不同的。同样，变量 myVariable 与 MyVariable 也是不同的。

JavaScript 使用 Unicode 字符集（覆盖了所有的字符，包含标点等字符）。

在 JavaScript 中，RegExp 对象是一个预定义了属性和方法的正则表达式对象。

test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false：

var patt = /e/;
patt.test("The best things in life are free!");复制代码

exec() 方法用于检索字符串中的正则表达式的匹配。

该方法返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。

错误：

try 语句测试代码块的错误。
catch 语句处理错误。
throw 语句创建或抛出异常（exception），语法：throw exception，异常可以是 JavaScript 字符串、数字、逻辑值或对象。。
finally 语句在 try 和 catch 语句之后，无论是否有触发异常，该语句都会执行。

调试：

通常在编写一个新的 JavaScript 代码过程中都会发生错误，在程序代码中寻找错误叫做代码调试
浏览器启用调试工具一般是按下 F12 键，并在调试菜单中选择 "Console"
在调试窗口设置 JavaScript 代码的断点，在每个断点上，都会停止执行 JavaScript 代码，以便于检查 JavaScript 变量的值。在检查完毕后，可以重新执行代码（如播放按钮）
debugger 关键字用于停止执行 JavaScript，并调用调试函数，与在调试工具中设置断点的效果是一样的（前提是有调试可用该语句才能正常工作）。