javaScript事件

在本文中，您将学习如何在 JavaScript 中处理事件。

了解事件和事件处理程序

事件是当用户与网页交互时发生的事情，例如当他单击链接或按钮、在输入框或文本区域中输入文本、在选择框中进行选择、按下键盘上的键、移动鼠标指针时，提交表单等。在某些情况下，浏览器本身可以触发事件，例如页面加载和卸载事件。

当事件发生时，您可以使用 JavaScript 事件处理程序（或事件侦听器）来检测它们并执行特定任务或一组任务。按照惯例，事件处理程序的名称总是以单词“on”开头，因此调用 click 事件onclick的事件处理程序，类似地调用load 事件的onload事件处理程序，调用 blur 事件的事件处理程序onblur，等等在。

有多种方法可以分配事件处理程序。最简单的方法是使用特殊的事件处理程序属性将它们直接添加到 HTML 元素的开始标记中。例如，要为按钮元素分配点击处理程序，我们可以使用onclick属性，如下所示：

Click Me

但是，为了使 JavaScript 与 HTML 分离，您可以在外部 JavaScript 文件或标签中设置事件处理程序，如下所示：

Click Me

注意：由于 HTML 属性不区分大小写，所以onclick也可以写成onClick,OnClick或ONCLICK。但它的值是区分大小写的。

一般来说，事件可以分为四大类——鼠标事件、键盘事件、表单事件和文档/窗口事件。还有许多其他事件，我将在后面的章节中介绍它们。下面的部分将一一简要概述最有用的事件以及现实生活中的练习示例。

鼠标事件

当用户单击某个元素、将鼠标指针移到某个元素上等时，会触发鼠标事件。以下是一些最重要的鼠标事件及其事件处理程序。

点击事件（onclick）

当用户单击网页上的元素时，会发生单击事件。通常，这些是表单元素和链接。您可以使用onclick事件处理程序处理单击事件。

以下示例将在您单击元素时向您显示一条警报消息。

Click Me Click Me

上下文菜单事件 (oncontextmenu)

当用户在元素上单击鼠标右键以打开上下文菜单时，会发生上下文菜单事件。您可以使用oncontextmenu事件处理程序处理上下文菜单事件。

以下示例将在您右键单击元素时显示警告消息。

Right Click on Me Right Click on Me

鼠标悬停事件 (onmouseover)

当用户将鼠标指针移到元素上时，会发生 mouseover 事件。

您可以使用onmouseover事件处理程序处理鼠标悬停事件。以下示例将在您将鼠标悬停在元素上时向您显示一条警报消息。

Place Mouse Over Me Place Mouse Over Me

Mouseout 事件 (onmouseout)

当用户将鼠标指针移到元素外时，会发生 mouseout 事件。

您可以使用onmouseout事件处理程序处理mouseout 事件。以下示例将在发生 mouseout 事件时向您显示警报消息。

Place Mouse Inside Me and Move Out Place Mouse Inside Me and Move Out

键盘事件

当用户按下或释放键盘上的键时会触发键盘事件。下面是一些最重要的键盘事件及其事件处理程序。

Keydown 事件 (onkeydown)

keydown 事件发生在用户按下键盘上的某个键时。

您可以使用onkeydown事件处理程序处理keydown 事件。以下示例将在发生 keydown 事件时向您显示一条警报消息。

Note: Try to enter some text inside input box and textarea.

Keyup 事件 (onkeyup)

keyup 事件在用户释放键盘上的键时发生。

您可以使用onkeyup事件处理程序处理keyup 事件。以下示例将在发生 keyup 事件时向您显示一条警报消息。

Note: Try to enter some text inside input box and textarea.

按键事件 (onkeypress)

当用户按下键盘上具有与其关联的字符值的键时，会发生 keypress 事件。例如，Ctrl、Shift、Alt、Esc、Arrow 键等键不会产生 keypress 事件，但会产生 keydown 和 keyup 事件。

您可以使用onkeypress事件处理程序处理按键事件。以下示例将在发生按键事件时向您显示一条警报消息。

Note: Try to enter some text inside input box and textarea.

表单事件

当表单控件接收或失去焦点时，或者当用户修改表单控件值时触发表单事件，例如通过在文本输入中键入文本、在选择框中选择任何选项等。以下是一些最重要的表单事件和他们的事件处理程序。

焦点事件（onfocus）

当用户将焦点放在网页上的元素上时，就会发生 focus 事件。

您可以使用onfocus事件处理程序处理焦点事件。以下示例将在接收焦点时以黄色突出显示文本输入的背景。

Button

注意：this事件处理程序中关键字的值是指具有处理程序的元素（即当前正在传递事件的位置）。

模糊事件（onblur）

当用户将焦点从表单元素或窗口移开时，会发生模糊事件。

您可以使用onblur事件处理程序处理模糊事件。以下示例将在文本输入元素失去焦点时向您显示警报消息。

Submit

Note: First click inside the text input box then click outside to see how it works.

要将焦点从表单元素上移开，首先单击它的内部，然后按键盘上的 Tab 键，将焦点放在其他东西上，或者单击它的外部。

Change 事件 (onchange)

当用户更改表单元素的值时，就会发生 change 事件。

您可以使用onchange事件处理程序处理更改事件。以下示例将在您更改选择框中的选项时向您显示一条警报消息。

Select Male Female

Note: Select any option in select box to see how it works.

提交事件（onsubmit）

submit 事件仅在用户在网页上提交表单时发生。

您可以使用onsubmit事件处理程序处理提交事件。以下示例将在向服务器提交表单时向您显示一条警报消息。

文档/窗口事件

在页面加载或用户调整浏览器窗口大小等情况下也会触发事件。以下是一些最重要的文档/窗口事件及其事件处理程序。

加载事件（onload）

当网页在 Web 浏览器中完成加载时发生 load 事件。

您可以使用onload事件处理程序处理加载事件。以下示例将在页面加载完成后立即向您显示警报消息。

This is a heading

This is paragraph of text.

卸载事件 (onunload)

unload 事件发生在用户离开当前网页时。

您可以使用onunload事件处理程序处理卸载事件。以下示例将在您尝试离开页面时向您显示一条警告消息。

This is a heading

This is paragraph of text.

Note: This example may not work. The unload event is not supported properly in most of the browsers.

调整大小事件 (onresize)

当用户调整浏览器窗口大小时，会发生 resize 事件。在浏览器窗口最小化或最大化的情况下也会发生调整大小事件。

您可以使用onresize事件处理程序处理调整大小事件。以下示例将在您将浏览器窗口大小调整为新的宽度和高度时向您显示一条警告消息。

JavaScript

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。