搜索
阅读量：
收藏数：
点赞数：JavaScript 事件
HTML 事件是发生在 HTML 元素上的 “事情”。
当 JavaScript 在 HTML 页面中使用时，JavaScript 可以 “反应” 在这些事件。
HTML 事件
HTML 事件可以是浏览器执行的操作，也可以是用户执行的操作。
以下是 HTML 事件的一些示例：
- HTML 网页已完成加载
- 更改了 HTML 输入字段
- 单击了一个 HTML 按钮
通常，当事件发生时，您可能想做点什么。
JavaScript 允许您在检测到事件时执行代码。
HTML 允许将事件处理程序属性和 JavaScript 代码添加到 HTML 元素中。
使用单引号：
1 | <element event='some JavaScript'> |
带双引号：
1 | <element event="some JavaScript"> |
在以下示例中，将属性（带代码）添加到元素中：onclick``<button>
1 |
|
在上面的示例中，JavaScript 代码更改了 id=“demo” 的元素。
在下一个示例中，代码更改了 它自己的元素（使用）：this.innerHTML
1 | <button onclick="this.innerHTML = Date()">The time is?</button> |
JavaScript 代码通常有几行长。更常见的情况是看到事件属性调用函数：
1 | <button onclick="displayDate()">The time is?</button> |
常见 HTML 事件
以下是一些常见 HTML 事件的列表：
| 事件 | 描述 |
|---|---|
| 更改 | HTML 元素已更改 |
| onclick（点击） | 用户单击 HTML 元素 |
| onmouseover | 用户将鼠标移到 HTML 元素上 |
| onmouseout | 用户将鼠标移离 HTML 元素 |
| onkeydown | 用户按下键盘键 |
| 加载 | 浏览器已完成页面加载 |
JavaScript 事件处理程序
事件处理程序可用于处理和验证用户输入、用户操作、 和浏览器操作：
- 每次加载页面时应执行的操作
- 页面关闭时应执行的操作
- 用户单击按钮时应执行的操作
- 用户输入数据时应验证的内容
- 还有更多…
可以使用许多不同的方法来让 JavaScript 处理事件：
- HTML 事件属性可以直接执行 JavaScript 代码
- HTML 事件属性可以调用 JavaScript 函数
- 您可以将自己的事件处理函数分配给 HTML 元素
- 您可以阻止发送或处理事件
- 还有更多…
您将在 HTML DOM 章节中了解有关事件和事件处理程序的更多信息。
0评论