In diesem Artikel besprechen wir Event-Handler, Event-Listener und Event-Objekte. Wir behandeln außerdem drei verschiedene Möglichkeiten, mit Ereignissen umzugehen, sowie einige der gebräuchlichsten. Durch das Verständnis von Ereignissen können Sie Benutzern ein interaktiveres Web-Erlebnis bieten.
Ereignisse sind Aktionen, die im Browser stattfinden und vom Benutzer oder vom Browser selbst initiiert werden können. Hier sind einige gängige Ereignisse, die auf Websites stattfinden:
Seite beendet das Laden
Benutzer klicken auf eine Schaltfläche
Der Benutzer schwebt über einen Dropdown
Der Benutzer reicht ein Formular ein. auf der Tastatur
Durch die Codierung von JavaScript-Antworten, die bei Ereignissen ausgeführt werden, können Entwickler dem Benutzer Nachrichten anzeigen, Daten validieren, auf Schaltflächenklicks reagieren und viele andere Aktionen ausführen.
Event-Handler und Event-Listener
Wenn der Benutzer auf eine Schaltfläche klickt oder eine Taste drückt, wird ein Ereignis ausgelöst. Diese werden als Klickereignisse bzw. Tastenereignisse bezeichnet. Ein Event-Handler ist eine JavaScript-Funktion, die ausgeführt wird, wenn ein Ereignis ausgelöst wird.
Ein Ereignis-Listener ist an ein reaktionsfähiges Schnittstellenelement angehängt, das es einem bestimmten Element ermöglicht, auf die Auslösung eines bestimmten Ereignisses zu warten und zu „lauschen“.
Es gibt drei Möglichkeiten, Ereignisse Elementen zuzuweisen:
Inline-Ereignishandler
Ereignishandlereigenschaften
Ereignis-Listener
Wir werden diese drei Methoden im Detail behandeln, um sicherzustellen, dass Sie sich damit vertraut machen Machen Sie sich mit jeder Methode zum Auslösen eines Ereignisses vertraut und besprechen Sie dann die Vor- und Nachteile jeder Methode.
Inline-Event-Handler-Eigenschaften
Um etwas über Event-Handler zu lernen, betrachten wir zunächst Inline-Event-Handler. Beginnen wir mit einem sehr einfachen Beispiel, das aus einem Button-Element und einem p-Element besteht. Wir möchten, dass der Benutzer auf eine Schaltfläche klickt, um den Textinhalt von p zu ändern.
Beginnen wir mit einer HTML-Seite mit Schaltflächen. Wir verweisen auf eine JavaScript-Datei, zu der wir später Code hinzufügen. <!DOCTYPE html>
<html>
<head>
<title>Events</title></head>
<body>
<!-- Add button -->
<button>Click me</button>
<p>Try to change me.</p>
</body>
<!-- Reference JavaScript file -->
<script src="js/events.js"></script>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Events</title></head>
<body>
<button onclick="changeText()">Click me</button>
<p>Try to change me.</p>
</body>
<script src="js/events.js"></script>
</html>Lassen Sie uns die Datei events.js erstellen, die sich hier im js/-Verzeichnis befindet. Darin erstellen wir die Funktion changeText(), die den textContent des p-Elements ändert.
// Function to modify the text content of the paragraph
const changeText = () = >{
const p = document.querySelector('p');
p.textContent = "I changed because of an inline event handler.";
}Wenn Sie events.html zum ersten Mal laden, sehen Sie eine Seite, die so aussieht:
Wenn Sie oder ein anderer Benutzer jedoch auf die Schaltfläche klicken, ändert sich der Text des p-Tags von Try um mich zu ändern. Ich habe es wegen Inline-Ereignishandlern geändert.
Event-Handler-Eigenschaften
Der nächste Schritt bei Inline-Event-Handlern sind die Event-Handler-Eigenschaften. Dies ist einem Inline-Handler sehr ähnlich, außer dass wir das Attribut des Elements in JavaScript und nicht in HTML festlegen.
Der Aufbau hier ist derselbe, außer dass wir onclick="changeText()" nicht mehr in das Markup aufnehmen: … < body >
<button > Click me < /button>
<p>I will change.</p >
</body>
…/
// Function to modify the text content of the paragraph
const changeText = () = >{
const p = document.querySelector('p');
p.textContent = "I changed because of an event handler property.";
}
// Add event handler as a property of the button element
const button = document.querySelector('button');
button.onclick = changeText;HINWEIS: Event-Handler folgen nicht der camelCase-Konvention, der der meiste JavaScript-Code folgt. Beachten Sie, dass der Code onclick und nicht onclick ist.
Wenn Sie zum ersten Mal eine Webseite laden, zeigt Ihr Browser Folgendes an:
Wenn Sie nun auf diese Schaltfläche klicken, hat dies einen ähnlichen Effekt:
事件处理程序属性的可维护性略好于内联处理程序，但它仍然存在一些相同的障碍。例如，尝试设置多个单独的onclick属性将导致覆盖除最后一个外的所有属性，如下所示。
const p = document.querySelector('p');
const button = document.querySelector('button');
const changeText = () = >{
p.textContent = "Will I change?";
}
const alertText = () = >{
alert('Will I alert?');
}
// Events can be overwritten
button.onclick = changeText;
button.onclick = alertText;在上面的例子中，单击按钮只会显示一个警告，而不会更改p文本，因为alert()代码是最后添加到属性的代码。
了解了内联事件处理程序和事件处理程序属性之后，让我们转向事件侦听器。
事件监听器
JavaScript事件处理程序的最新添加是事件侦听器。事件侦听器监视元素上的事件。我们将使用addEventListener()方法侦听事件，而不是直接将事件分配给元素上的属性。
addEventListener()接受两个强制参数——要侦听的事件和侦听器回调函数。
事件监听器的HTML与前面的示例相同。
… < button > Click me < /button>
<p>I will change.</p > …我们仍然将使用与以前相同的changeText()函数。我们将把addEventListener()方法附加到按钮上。
// Function to modify the text content of the paragraph
const changeText = () = >{
const p = document.querySelector('p');
p.textContent = "I changed because of an event listener.";
}
// Listen for click event
const button = document.querySelector('button');
button.addEventListener('click', changeText);注意，对于前两个方法，click事件被称为onclick，但是对于事件监听器，它被称为click。每个事件监听器都会从单词中删除这个词。在下一节中，我们将查看更多其他类型事件的示例。
当您用上面的JavaScript代码重新加载页面时，您将收到以下输出:
初看起来，事件监听器看起来与事件处理程序属性非常相似，但它们有一些优点。我们可以在同一个元素上设置多个事件侦听器，如下例所示。
const p = document.querySelector('p');
const button = document.querySelector('button');
const changeText = () = >{
p.textContent = "Will I change?";
}
const alertText = () = >{
alert('Will I alert?');
}
// Multiple listeners can be added to the same event and element
button.addEventListener('click', changeText);
button.addEventListener('click', alertText);在本例中，这两个事件都将触发，一旦单击退出警告，就向用户提供一个警告和修改后的文本。
通常，将使用匿名函数而不是事件侦听器上的函数引用。匿名函数是没有命名的函数。
// An anonymous function on an event listener
button.addEventListener('click', () = >{
p.textContent = "Will I change?";
});还可以使用removeEventListener()函数从元素中删除一个或所有事件。
// Remove alert function from button element button.removeEventListener('click', alertText);
此外，您可以在文档和窗口对象上使用addEventListener()。
事件监听器是当前在JavaScript中处理事件的最常见和首选的方法。
常见的事件
我们已经了解了使用click事件的内联事件处理程序、事件处理程序属性和事件侦听器，但是JavaScript中还有更多的事件。下面我们将讨论一些最常见的事件。
鼠标事件
鼠标事件是最常用的事件之一。它们指的是涉及单击鼠标上的按钮或悬停并移动鼠标指针的事件。这些事件还对应于触摸设备上的等效操作。
| 事件 | 描述 |
|---|---|
| click | 当鼠标被按下并释放到元素上时触发 |
| dblclick | 当元素被单击两次时触发 |
| mouseenter | 当指针进入元素时触发 |
| mouseleave | 当指针离开一个元素时触发 |
| mousemove | 每当指针在元素中移动时触发 |
Click ist ein zusammengesetztes Ereignis, das aus den kombinierten Mousedown- und Mouseup-Ereignissen besteht, die ausgelöst werden, wenn die Maustaste gedrückt bzw. angehoben wird.
Verwenden Sie MouseEnter und MouseLeave gleichzeitig, um einen Hover-Effekt zu erzeugen, der so lange anhält, wie der Mauszeiger auf dem Element bleibt.
Formularereignisse
Formularereignisse sind formularbezogene Aktionen, z. B. das Auswählen oder Aufheben der Auswahl von Eingabeelementen und das Absenden von Formularen.
| Ereignis | Beschreibung |
|---|---|
| Senden | Wird ausgelöst, wenn das Formular gesendet wird. |
| Fokus. | Wird ausgelöst, wenn ein Element (z. B. eine Eingabe) den Fokus erhält | Unschärfe
Tastaturereignisse
Tastaturereignisse werden verwendet, um Tastaturoperationen wie das Drücken einer Taste, das Anheben einer Taste und das Halten einer Taste zu verarbeiten.
| Kontinuierliches Feuern, wenn Sie drücken key | |
| Obwohl sie ähnlich aussehen, greifen die Ereignisse „keydown“ und „keypress“ nicht auf genau dieselben Tasten zu. Mit „keydown“ wird jede gedrückte Taste bestätigt, während mit „keypress“ Tasten weggelassen werden, die keine Zeichen erzeugen, wie etwa SHIFT, ALT oder DELETE. | Tastaturereignisse haben spezielle Eigenschaften für den Zugriff auf einzelne Tasten. |
| Wenn der Benutzer beispielsweise die Taste „a“ auf der Tastatur drückt, werden die folgenden Eigenschaften im Zusammenhang mit dieser Taste angezeigt: |
Description
Example
keyCode
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
