JavaScript事件



HTML事件是发生在HTML元素上的“事情”。

当JavaScript用于HTML页面时, JavaScript能"响应"在他们的事件上.


HTML 事件

一个HTML事件可能是浏览器做的一些事情,或者用户做的一些事情

这里有一些HTML事件的例子:

  • 一个HTML网页加载完毕
  • 一个HTML输入字段被改变
  • 一个HTML按钮被单击

通常,当事件发生时,你可能想做某事.

JavaScript当检测到事件时,可以让你执行代码。

HTML允许事件处理程序属性,用JavaScript代码,可以添加到HTML元素.

用单引号:

<some-HTML-element some-event='some JavaScript'>

用双引号:

<some-HTML-element some-event="some JavaScript">

在下面的例子中,一个onclick属性(代码),添加到按钮元素:

<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事件:

事件 描述
onchange 一个HTML元素已经改变
onclick 用户点击一个HTML元素
onmouseover 用户移动鼠标指针经过一个HTML元素
onmouseout 用户将鼠标从一个HTML元素移开
onkeydown 用户按下按键
onload 浏览器已完成加载页面

JavaScript 事件可以做什么?

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

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

许多不同的方法可以用来让JavaScript的事件工作:

  • HTML事件属性可以直接执行JavaScript代码
  • HTML事件属性可以调用JavaScript函数
  • 您可以为HTML元素指定您自己的事件处理函数
  • 可以防止事件被发送或被处理
  • 等等 ...

你将学到更多关于事件和事件处理程序在HTML DOM的章节.