JavaScript事件入门

JavaScript事件是指当用户与特定网页交互时发生的任何操作。这些事件可以用来为用户提供与特定网站的动态交互。通过JavaScript事件，浏览变得无缝和令人愉快。

正是因为有了JavaScript事件，才使得网站具有互动性。你可能在这个页面上流畅地滚动，并可能点击一两个链接，这是因为用于构建这个页面的基础JavaScript事件。因此，让我们来看看这些事件以及如何使用它们。

目标

在这篇文章中，我们将介绍JavaScript事件的主要类型，如何监听它们，并将它们传递给事件处理程序，这些事件处理程序指定在处理特定事件时执行的任务。

前提条件

本文要求读者对HTML和JavaScript有一个基本的了解。这些代码片段对于初学者和网络专家来说都很简单，易于理解。

项目设置

我们将创建一个名为JavaScript events 的新文件夹。在这个文件夹中，创建一个名为index.htm 的新文件和另一个名为main.js 的JavaScript文件。我们将使用这两个文件来演示JavaScript事件的概念。你的文件夹结构应该是这样的。

|-- index.html
|-- main.js
|-- main.css

JavaScript事件的例子

在网页中发生的事件有很多类型，例如。

选择一个元素。
悬停在一个按钮上。
使用键盘滚动。
调整大小或关闭浏览器窗口。
加载一个新的网页。
在填写完细节后提交一个表格。
播放一个音频或视频文件。

事件处理程序

对于上面提到的每个事件，通常都有一个事件处理程序，这是一个由程序员创建的代码片段，当事件发生时运行。事件处理程序听从前端发射的事件，并在后端处理它们。

JavaScript事件的类型

在网页上使用的JavaScript事件可以分为以下几种。

1.鼠标事件

这种事件发生在用户使用鼠标或触控板等指向性设备与我们的网页进行交互时。常见的鼠标事件包括：single-click,double click,mouse up, 和mouse down 。

鼠标事件的一个例子是点击一个按钮，在一个HTML元素上悬停，或在一个网页上拖动一个元素。

鼠标点击事件。这类事件发生在鼠标点击一个元素的时候。下面的代码片断演示了如何使用mouseClick() 事件。

在你的index.html 文件中，添加下面的代码片段。

<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/main.css">
    <title>JavaScript Events</title>
</head>
<body>
    <!-- container -->
    <div class="container">
        <!-- heading -->
        <h1>Section Engineering Education</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis officiis numquam, 
            cum necessitatibus, reprehenderit tempora pariatur ab maiores aut deleniti, 
            a voluptas sed minus inventore quod ipsam dolores velit animi.
        </p>
    </div>
    <button id="button">Click me</button>
       <!-- close container -->
    <script src="main.js"></script>
</body>
</html>

鼠标点击事件由onClick 事件处理程序来处理。我们将使用该事件处理程序来向用户显示按钮被点击，如下所示。

/**
 * Getting the button id
 */
const button = document.getElementById("button");

/**
 * Adding the event Listener
 */
button.addEventListener('click', handleClickEvent)

/**
 * FUnction triggered when the button is clicked
 */
function handleClickEvent(){
    alert("The button was clicked!")
}

鼠标移动事件。当鼠标光标在一个元素上移动时，这些事件被触发。

例如，我们可以将鼠标悬停在按钮上，用下面的片段来改变页面主题。

/**
 * mouseover event
 */
button.addEventListener('mouseover', () =>{
    document.documentElement.setAttribute("data-theme", "light")
})

鼠标离开事件。当鼠标光标从一个HTML元素上移开时，这类事件被触发。就像我们使用mouseover 事件，来改变页面的背景一样，我们可以使用mouseout 事件来返回初始主题，使用下面的片段。

/**
 * Mouseout event
 */
button.addEventListener('mouseout', () =>{
    document.documentElement.setAttribute("data-theme", "dark")
})

Mousedown和Mouseup事件。Mousedown是一种事件，当鼠标按在一个元素上时被触发。Mouseup 与mousedown 完全相反。它在你释放鼠标按钮时被触发。

下面的片段演示了mouseup 和mousedown 事件是如何操作的。

在测试这两个鼠标事件时，记住要对其他函数进行注释，因为我们使用的是相同的文件和元素。

/**
 * Mousedown event
 */
button.addEventListener('mousedown', () =>{
    document.documentElement.setAttribute("data-theme", "dark")
})

/**
 * Mouseup event
 */
button.addEventListener('mouseup', () =>{
    document.documentElement.setAttribute("data-theme", "dark")
})

2.键盘事件

键盘事件发生在键盘上的一个键被按下时。这些种类的事件属于键盘事件对象。就像这里讨论的那样，在JavaScript中有三种不同类型的键盘事件，即keydown events ，keypress events ，和keyup events.

这些事件分别在按键被按下时、任何字母数字键被按下时和按键被按下时发生。键盘上的每个按钮都有一个名称和一个值，可以通过下面的代码片断来证明。

/**
 * Keydwon event
 */
document.addEventListener('keydown', (e) => {
    var keyName = e.key;
    var keyCode = e.code;
    alert(`Key pressed ${keyName} \r\n Key code value: ${keyCode}`);
}, false);

/**
 * Keyup
 */
document.addEventListener('keydown', (e) => {
    var keyName = e.key;
    var keyCode = e.code;
    alert(`Key pressed ${keyName} and  Key code value: ${keyCode}`);
}, false);

/**
 * Keypress event
 */
document.addEventListener('keypress', (e) => {
    var keyName = e.key;
    var keyCode = e.code;
    alert(`Key pressed ${keyName} and  Key code value: ${keyCode}`);
}, false);

3.窗口事件

窗口代表网站脚本运行的界面。例如，手机、PC或MacBook上的浏览器屏幕。在一个浏览器窗口上可以触发几个事件。

下面是几个窗口事件的例子。

Onload 窗口事件。这个事件通常在一个页面刚要完成加载、网站上的所有资产和脚本时触发。大多数开发人员使用这个事件来调用其他依赖于窗口元素的功能。所以你必须等到窗口加载完毕后再调用该功能。
Onresize窗口事件。当浏览器的大小发生变化时，该事件被调用。浏览器可以通过放大或缩小它在屏幕上覆盖的尺寸来调整大小。
OnUnload 窗口事件。这通常发生在浏览器窗口关闭时，因此所有其他组件都被卸载。
Onerror 窗口事件。当窗口加载过程中发生错误时，该事件被触发。

4.表单事件

当你处理表单时发生表单事件。通常，当你打开、关闭、悬停或向应用程序的后台提交表单数据时，会发生表单事件。

下面是一个表单事件及其事件处理程序的列表。

提交表单事件。这个事件是在用户提交表单数据时触发的。通常情况下，表单数据在所有字段都填写完毕后提交。

/**
 * Handling submit. WE first fetch the form and the submit button
 */
const form = document.getElementById('form');
const submitButton = document.getElementById('form-btn');
form.addEventListener('submit', () =>{
    alert("The from was succesfully submitted")
});

焦点表单事件。这个事件通常在你关注表单上的一个特定元素时发生。

**
 * Handling focus event to change the text to upper 
 * case
 */
let btn = document.getElementById('button')

/**
 * pass the function to the onfocus event
 */
btn.onfocus = containerFocusFunction;

/**
 * Function to handle the focus event
 */
function containerFocusFunction(){
    document.documentElement.setAttribute("case", "upper")
    btn.innerHTML =" FOCUS FUNCTION ACTIVATED"
}

模糊窗体事件。这个事件与onfocus 。当你把焦点从一个特定的元素上移开时，它就会被触发。

/**
 * Handling focus event to change the text to lowercase
 */
let btn = document.getElementById('button')

/**
 * pass the function to the blur event
 */
btn.onblur = containerBlurFunction;
 
/**
 * Function to handle the blur event
 */
function containerBlurFunction(){
    document.documentElement.setAttribute("case", "lower")
    btn.innerHTML =" FOCUS FUNCTION DE-ACTIVATED"
 }
}

大写和小写转换的CSS代码如下。

/* code for uppercase */
html[case = 'upper']{
    text-transform: uppercase;
}

/* code for lowercase */
html[lower='lower']{
    text-transform: lowercase;
}

改变表单事件。当用户改变一个表单元素的值时，这个表单事件将被触发。值的改变可能是删除已输入的数据或改变一个选项的值。

让我们通过在输入字段有值时立即打印用户的输入来证明这一点。


 /**
 * Handling form change event
 */

let text = document.getElementById('text')
let result = document.getElementById('result')
/**
 * Adding the event listener
 */
text.addEventListener('change', (e) =>{
    result.innerHTML = e.target.value
});

总结

JavaScript中的事件除了对程序员有用以外，还使浏览变得非常舒适。每个程序员都必须对JavaScript事件有一个清晰的认识，以便更直观地浏览。

正如上面所讨论的，有各种JavaScript事件，以及它们如何在不同的环境中发挥作用，从鼠标、键盘、窗体和窗口事件等都是如此。熟悉这些概念能够使开发人员使用JavaScript来制作事件更好的网站。

如何使用JavaScript事件