目录

JavaScript 事件


HTML 事件是"things"HTML 元素会发生这种情况。

当 JavaScript 用于 HTML 页面时,JavaScript 可以"react"关于这些事件。


HTML 事件

HTML 事件可以是浏览器执行的操作,也可以是用户执行的操作。

以下是 HTML 事件的一些示例:

  • HTML 网页已完成加载
  • HTML 输入字段已更改
  • 单击了 HTML 按钮

通常,当事件发生时,您可能想做一些事情。

JavaScript 允许您在检测到事件时执行代码。

HTML 允许事件处理程序属性,使用 JavaScript 代码,添加到 HTML 元素中。

带单引号:

< element event= ' some JavaScript '>

带双引号:

< element event= " some JavaScript ">

在下面的示例中,onclick属性(带有代码),被添加到<button>元素:

示例

<button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>
亲自试一试 »

在上面的示例中,JavaScript 代码更改了 id="demo" 的元素的内容。

在下一个示例中,代码更改其自身元素的内容(使用this.innerHTML):

示例

<button onclick="this.innerHTML = Date()">The time is?</button>
亲自试一试 »

JavaScript 代码通常有几行长。更常见的是事件属性调用函数:

示例

<button onclick="displayDate()">The time is?</button>
亲自试一试 »


常见 HTML 事件

以下是一些常见 HTML 事件的列表:

事件 描述
变化 HTML 元素已更改
单击时 用户单击 HTML 元素
鼠标悬停时 用户将鼠标移动到 HTML 元素上
鼠标移出时 用户将鼠标从 HTML 元素上移开
按下按键 用户按下键盘按键
负载 浏览器已完成页面加载

该列表更长:91xjr JavaScript 参考 HTML DOM 事件


JavaScript 事件处理程序

事件处理程序可用于处理和验证用户输入、用户操作和浏览器操作:

  • 每次页面加载时都应该做的事情
  • 页面关闭时应该做的事情
  • 用户单击按钮时应执行的操作
  • 用户输入数据时应验证的内容
  • 和更多 ...

可以使用许多不同的方法让 JavaScript 处理事件:

  • HTML事件属性可以直接执行JavaScript代码
  • HTML事件属性可以调用JavaScript函数
  • 您可以将自己的事件处理函数分配给 HTML 元素
  • 您可以阻止发送或处理事件
  • 和更多 ...

您将在 HTML DOM 章节中了解有关事件和事件处理程序的更多信息。


通过练习测试一下

练习:

这个<button>当有人点击元素时,元素应该执行某些操作。尝试修复它!

<button ="alert('Hello')">Click me.</button>

开始练习