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.
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.";
}
Nach dem Login kopieren
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.
Inline-Ereignishandler sind eine einfache Möglichkeit, Ereignisse zu verstehen, sollten jedoch im Allgemeinen nicht über Test- und Schulungszwecke hinaus verwendet werden.
Sie können Inline-Ereignishandler mit Inline-CSS-Stilen für HTML-Elemente vergleichen. Das Verwalten eines separaten Klassen-Stylesheets ist praktischer als das Erstellen von Inline-Stilen für jedes Element, genau wie das Verwalten von JavaScript, das vollständig über eine separate Skriptdatei verwaltet wird, anstatt jedem Element Handler hinzuzufügen.
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>
…/
Nach dem Login kopieren
Auch unsere Funktion bleibt ähnlich, nur müssen wir jetzt in JavaScript auf das Schaltflächenelement zugreifen. Wir können einfach auf onclick zugreifen, so wie wir auf style, id oder jedes andere Elementattribut zugreifen würden, und dann die Funktionsreferenz zuweisen.
// 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;
Nach dem Login kopieren
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:
Bitte beachten Sie dies beim Übergeben einer Funktion Bei einem Verweis auf das onclick-Attribut verzichten wir auf die Klammern, da wir die Funktion zu diesem Zeitpunkt nicht aufrufen, sondern nur einen Verweis darauf übergeben.
// 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);
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);
Nach dem Login kopieren
在本例中，这两个事件都将触发，一旦单击退出警告，就向用户提供一个警告和修改后的文本。
通常，将使用匿名函数而不是事件侦听器上的函数引用。匿名函数是没有命名的函数。
// An anonymous function on an event listener
button.addEventListener('click', () = >{
p.textContent = "Will I change?";
});
Nach dem Login kopieren
还可以使用removeEventListener()函数从元素中删除一个或所有事件。
// Remove alert function from button element
button.removeEventListener('click', alertText);
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
Wann Ein Element verliert den Fokus. Wird ausgelöst, wenn
Der Fokus erreicht wird, wenn ein Element ausgewählt wird, z. B. durch Mausklick oder durch Navigieren zu diesem über die TAB-Taste.
JavaScript wird häufig zum Senden von Formularen und zum Senden von Werten an Backend-Sprachen verwendet. Die Vorteile der Verwendung von JavaScript zum Senden eines Formulars bestehen darin, dass für das Absenden des Formulars kein Neuladen der Seite erforderlich ist und die erforderlichen Eingabefelder mithilfe von JavaScript validiert werden können.
Tastaturereignisse
Tastaturereignisse werden verwendet, um Tastaturoperationen wie das Drücken einer Taste, das Anheben einer Taste und das Halten einer Taste zu verarbeiten.
Ereignis
Beschreibung
Taste nach unten
Wird einmal ausgelöst, wenn eine Taste gedrückt wird Drücken Sie
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 wir einen Parameter namens Ereignisobjekt an einen Ereignis-Listener übergeben, können wir auf weitere Informationen über die aufgetretene Aktion zugreifen. Zu den drei Eigenschaften, die sich auf das Tastaturobjekt beziehen, gehören keyCode, key und code.
Wenn der Benutzer beispielsweise die Taste „a“ auf der Tastatur drückt, werden die folgenden Eigenschaften im Zusammenhang mit dieser Taste angezeigt:
Property
Description
Example
keyCode
Die zugeordnete Nummer der Schlüssel. 65
为了展示如何通过JavaScript控制台收集这些信息，我们可以编写以下代码行。
// Test the keyCode, key, and code properties
document.addEventListener('keydown', event = >{
console.log('key: ' + event.keyCode);
console.log('key: ' + event.key);
console.log('code: ' + event.code);
});
// Pass an event through to a listener
document.addEventListener('keydown', event = >{
var element = document.querySelector('p');
// Set variables for keydown codes
var a = 'KeyA';
var s = 'KeyS';
var d = 'KeyD';
var w = 'KeyW';
// Set a direction for each code
switch (event.code) {
case a:
element.textContent = 'Left';
break;
case s:
element.textContent = 'Down';
break;
case d:
element.textContent = 'Right';
break;
case w:
element.textContent = 'Up';
break;
}
});
Das obige ist der detaillierte Inhalt vonTiefes Verständnis von Ereignissen in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Sie können Inline-Ereignishandler mit Inline-CSS-Stilen für HTML-Elemente vergleichen. Das Verwalten eines separaten Klassen-Stylesheets ist praktischer als das Erstellen von Inline-Stilen für jedes Element, genau wie das Verwalten von JavaScript, das vollständig über eine separate Skriptdatei verwaltet wird, anstatt jedem Element Handler hinzuzufügen. 
