JavaScript事件

举报
坚果的博客 发表于 2022/03/09 10:02:40 2022/03/09
【摘要】 JavaScript事件作者：坚果公众号："大前端之旅"华为云享专家，InfoQ签约作者，阿里云专家博主，51CTO博客首席体验官，开源项目GVA成员之一，专注于大前端技术的分享，包括Flutter,小程序,安卓，VUE，JavaScript。在本文中，您将学习如何在 JavaScript 中处理事件。了解事件和事件处理程序事件是当用户与网页交互时发生的事情，例如当他单击链接或按钮、在输入框...

JavaScript事件

作者：坚果

公众号："大前端之旅"

华为云享专家，InfoQ签约作者，阿里云专家博主，51CTO博客首席体验官，开源项目GVA成员之一，专注于大前端技术的分享，包括Flutter,小程序,安卓，VUE，JavaScript。

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

了解事件和事件处理程序

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

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

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

例子


<button type="button" onclick="alert('Hello World!')">Click Me</button>

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

例子

<button type="button" id="myBtn">Click Me</button>
<script>
    function sayHello() {
        alert('Hello World!');
    }
    document.getElementById("myBtn").onclick = sayHello;
</script>

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

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

鼠标事件

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

点击事件（onclick）

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

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

例子


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Handling the Click Event</title>
</head>
<body>
    <button type="button" onclick="alert('You have clicked a button!');">Click Me</button>
    <a href="#" onclick="alert('You have clicked a link!');">Click Me</a>
</body>
</html>

上下文菜单事件 (oncontextmenu)

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

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

例子


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Handling the Contextmenu Event</title>
</head>
<body>
    <button type="button" oncontextmenu="alert('You have right-clicked a button!');">Right Click on Me</button>
    <a href="#" oncontextmenu="alert('You have right-clicked a link!');">Right Click on Me</a>
</body>
</html>

鼠标悬停事件 (onmouseover)

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

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

例子


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Handling the Mouseover Event</title>
</head>
<body>
    <button type="button" onmouseover="alert('You have placed mouse pointer over a button!');">Place Mouse Over Me</button>
    <a href="#" onmouseover="alert('You have placed mouse pointer over a link!');">Place Mouse Over Me</a>
</body>
</html>

Mouseout 事件 (onmouseout)

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

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

例子


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Handling the Mouseout Event</title>
</head>
<body>
    <button type="button" onmouseout="alert('You have moved out of the button!');">Place Mouse Inside Me and Move Out</button>
    <a href="#" onmouseout="alert('You have moved out of the link!');">Place Mouse Inside Me and Move Out</a>
</body>
</html>

键盘事件

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

Keydown 事件 (onkeydown)

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

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

例子


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Handling the Keydown Event</title>
</head>
<body>
    <input type="text" onkeydown="alert('You have pressed a key inside text input!')">
    <hr>
    <textarea cols="30" onkeydown="alert('You have pressed a key inside textarea!')"></textarea>
    <p><strong>Note:</strong> Try to enter some text inside input box and textarea.</p>
</body>
</html>

Keyup 事件 (onkeyup)

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

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

例子


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Handling the Keyup Event</title>
</head>
<body>
    <input type="text" onkeyup="alert('You have released a key inside text input!')">
    <hr>
    <textarea cols="30" onkeyup="alert('You have released a key inside textarea!')"></textarea>
    <p><strong>Note:</strong> Try to enter some text inside input box and textarea.</p>
</body>
</html>

按键事件 (onkeypress)

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

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

例子


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Handling the Keypress Event</title>
</head>
<body>
    <input type="text" onkeypress="alert('You have pressed a key inside text input!')">
    <hr>
    <textarea cols="30" onkeypress="alert('You have pressed a key inside textarea!')"></textarea>
    <p><strong>Note:</strong> Try to enter some text inside input box and textarea.</p>
</body>
</html>

表单事件

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

焦点事件（onfocus）

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

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

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Handling the Focus Event</title>
</head>
<body>
    <script>
        function highlightInput(elm){
            elm.style.background = "yellow";
        }    
    </script>
    <input type="text" onfocus="highlightInput(this)">
    <button type="button">Button</button>
</body>
</html>

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

模糊事件（onblur）

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

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

例子


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Handling the Blur Event</title>
</head>
<body>
    <input type="text" onblur="alert('Text input loses focus!')">
    <button type="button">Submit</button>
    <p><strong>Note:</strong> First click inside the text input box then click outside to see how it works.</p>
</body>
</html>

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

Change 事件 (onchange)

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

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

例子


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Handling the Change Event</title>
</head>
<body>
    <select onchange="alert('You have changed the selection!');">
        <option>Select</option>
        <option>Male</option>
        <option>Female</option>
    </select>
    <p><strong>Note:</strong> Select any option in select box to see how it works.</p>
</body>
</html>

提交事件（onsubmit）

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

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

例子


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Handling the Submit Event</title>
</head>
<body>
    <form action="/examples/html/action.php" method="post" onsubmit="alert('Form data will be submitted to the server!');">
        <label>First Name:</label>
        <input type="text" name="first-name" required>
        <input type="submit" value="Submit">
    </form>
</body>
</html>

文档/窗口事件

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

加载事件（onload）

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

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

例子


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Handling the Load Event</title>
</head>
<body onload="window.alert('Page is loaded successfully!');">
    <h1>This is a heading</h1>
    <p>This is paragraph of text.</p>
</body>
</html>

卸载事件 (onunload)

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

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

例子


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Handling the Unload Event</title>
</head>
<body onunload="alert('Are you sure you want to leave this page?');">
    <h1>This is a heading</h1>
    <p>This is paragraph of text.</p>
    <p><strong>Note:</strong> This example may not work. The unload event is not supported properly in most of the browsers.</p>
</body>
</html>

调整大小事件 (onresize)

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

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

例子


<p id="result"></p>
<script>
    function displayWindowSize() {
        var w = window.outerWidth;
        var h = window.outerHeight;
        var txt = "Window size: width=" + w + ", height=" + h;
        document.getElementById("result").innerHTML = txt;
    }
    window.onresize = displayWindowSize;
</script>
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
JavaScript
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入