码农教程 - 一技在手,衣食无忧! tools

目录

JavaScript HTML DOM 事件

❮ 上一节 下一节 ❯

HTML DOM 允许 JavaScript 对 HTML 事件做出反应：

鼠标悬停在我身上
点我

对事件做出反应

JavaScript 可以在事件发生时执行，例如当用户单击 HTML 元素时。

要在用户单击元素时执行代码，请将 JavaScript 代码添加到 HTML 事件属性：

onclick= JavaScript

HTML 事件示例：

  • 当用户单击鼠标时
  • 当网页加载完毕后
  • 当图片已加载时
  • 当鼠标移到某个元素上时
  • 当输入字段改变时
  • 当提交 HTML 表单时
  • 当用户敲击按键时

在这个例子中，内容<h1>当用户单击元素时，元素会发生更改：

示例

<!DOCTYPE html>
<html>
<body>

<h1 onclick="this.innerHTML = 'Ooops!'">Click on this text!</h1>

</body>
</html>
亲自试一试 »

在此示例中，从事件处理程序调用一个函数：

示例

<!DOCTYPE html>
<html>
<body>

<h1 onclick="changeText(this)">Click on this text!</h1>

<script>
function changeText(id) {
  id.innerHTML = "Ooops!";
}
</script>

</body>
</html>
亲自试一试 »

HTML 事件属性

要将事件分配给 HTML 元素，您可以使用事件属性。

示例

将 onclick 事件分配给按钮元素：

<button onclick="displayDate()">Try it</button>
亲自试一试 »

在上面的例子中，一个名为displayDate单击按钮时将执行。

使用 HTML DOM 分配事件

HTML DOM 允许您使用 JavaScript 将事件分配给 HTML 元素：

示例

将 onclick 事件分配给按钮元素：

<script>
document.getElementById("myBtn").onclick = displayDate;
</script>
亲自试一试 »

在上面的例子中，一个名为displayDate被分配给一个 HTML 元素id="myBtn"。

单击按钮时将执行该函数。

onload 和 onunload 事件

这个onload和onunload当用户进入或离开页面时触发事件。

这个onload事件可用于检查访问者的浏览器类型和浏览器版本，并根据该信息加载正确版本的网页。

这个onload和onunload事件可以用来处理cookie。

示例

<body onload="checkCookies()">
亲自试一试 »

oninput 事件

这个oninput事件通常是在用户输入数据时执行某些操作。

下面是如何使用 oninput 更改输入字段内容的示例。

示例

<input type="text" id="fname" oninput="upperCase()">
亲自试一试 »

onchange 事件

这个onchange事件通常与输入字段的验证结合使用。

下面是如何使用 onchange 的示例。这upperCase()当用户更改输入字段的内容时将调用该函数。

示例

<input type="text" id="fname" onchange="upperCase()">
亲自试一试 »

onmouseover 和 onmouseout 事件

这个onmouseover和onmouseout当用户将鼠标悬停在 HTML 元素上或移出 HTML 元素时，事件可用于触发函数：

鼠标悬停在我身上

亲自试一试 »

onmousedown、onmouseup 和 onclick 事件

这个onmousedown,onmouseup， 和onclick事件都是鼠标单击的一部分。首先，当单击鼠标按钮时，会触发 onmousedown 事件；然后，当释放鼠标按钮时，会触发 onmouseup 事件；最后，当鼠标单击完成时，会触发 onclick 事件。

Click Me

亲自试一试 »

更多示例

onmousedown 和 onmouseup
当用户按住鼠标按钮时更改图片。

负载
页面加载完成后显示警告框。

焦点
当输入字段获得焦点时更改其背景颜色。

鼠标事件
当光标移到元素上时更改元素的颜色。

HTML DOM 事件对象参考

有关所有 HTML DOM 事件的列表，请查看我们完整的HTML DOM 事件对象参考。

❮ 上一节 下一节 ❯