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!
Erklärung dieser 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
Verwenden Sie bei der Funktionsvererbung „Basisklassenzeiger“ und „abgeleitete Klassenzeiger“, um den Vererbungsmechanismus zu verstehen: Wenn der Basisklassenzeiger auf das abgeleitete Klassenobjekt zeigt, wird eine Aufwärtstransformation durchgeführt und nur auf die Mitglieder der Basisklasse zugegriffen. Wenn ein abgeleiteter Klassenzeiger auf ein Basisklassenobjekt zeigt, wird eine Abwärtsumwandlung durchgeführt (unsicher) und muss mit Vorsicht verwendet werden.
Tipps zum Debuggen von Vererbungsfehlern: Stellen Sie sicher, dass die Vererbungsbeziehungen korrekt sind. Verwenden Sie den Debugger, um den Code schrittweise durchzugehen und Variablenwerte zu untersuchen. Stellen Sie sicher, dass Sie den virtuellen Modifikator richtig verwenden. Untersuchen Sie das Problem der Vererbungsdiamanten, das durch versteckte Vererbung verursacht wird. Suchen Sie nach nicht implementierten rein virtuellen Funktionen in abstrakten Klassen.
Detaillierte Erläuterung der C++-Funktionsvererbung: Beherrschen Sie die Beziehung zwischen „is-a“ und „has-a“ Was ist Funktionsvererbung? Funktionsvererbung ist eine Technik in C++, die in einer abgeleiteten Klasse definierte Methoden mit in einer Basisklasse definierten Methoden verknüpft. Es ermöglicht abgeleiteten Klassen, auf Methoden der Basisklasse zuzugreifen und diese zu überschreiben, wodurch die Funktionalität der Basisklasse erweitert wird. „Ist-ein“- und „Hat-ein“-Beziehungen Bei der Funktionsvererbung bedeutet die „Ist-ein“-Beziehung, dass die abgeleitete Klasse ein Untertyp der Basisklasse ist, d. h. die abgeleitete Klasse „erbt“ die Merkmale und das Verhalten von die Basisklasse. Die „has-a“-Beziehung bedeutet, dass die abgeleitete Klasse einen Verweis oder Zeiger auf das Basisklassenobjekt enthält, d. h. die abgeleitete Klasse „besitzt“ das Basisklassenobjekt. SyntaxDas Folgende ist die Syntax für die Implementierung der Funktionsvererbung: classDerivedClass:pu
Vererbung und Polymorphismus wirken sich auf die Kopplung von Klassen aus: Vererbung erhöht die Kopplung, da die abgeleitete Klasse von der Basisklasse abhängt. Polymorphismus reduziert die Kopplung, da Objekte über virtuelle Funktionen und Basisklassenzeiger konsistent auf Nachrichten reagieren können. Zu den Best Practices gehören der sparsame Umgang mit der Vererbung, die Definition öffentlicher Schnittstellen, das Vermeiden des Hinzufügens von Datenelementen zu Basisklassen und die Entkopplung von Klassen durch Abhängigkeitsinjektion. Ein praktisches Beispiel, das zeigt, wie Polymorphismus und Abhängigkeitsinjektion verwendet werden, um die Kopplung in einer Bankkontoanwendung zu reduzieren.
Mit der Einführung der neuen Karte von Genshin Impact Version 4.4. Freunde, die Version 4.4 von Genshin Impact läutete auch das Sea Lantern Festival in Liyue ein. Gleichzeitig wird in Version 4.4 ein neuer Kartenbereich namens Shen Yu Valley eingeführt. Den bereitgestellten Informationen zufolge ist Shen Yugu tatsächlich Teil des Dorfes Qiaoying, die Spieler sind jedoch eher daran gewöhnt, es Shen Yugu zu nennen. Lassen Sie mich Ihnen nun die neue Karte vorstellen. Einführung in die neue Karte von Genshin Impact Version 4.4. Version 4.4 öffnet „Chenyu Valley·Shanggu“, „Chenyu Valley·Nanling“ und „Laixin Mountain“ im Norden von Liyue Tal·Shanggu" . ※Nach Abschluss des Prologs der Dämonengott-Quest · Akt 3: Der Drache und das Lied der Freiheit wird der Teleportationsankerpunkt automatisch freigeschaltet. 2. Qiaoyingzhuang Als die warme Frühlingsbrise erneut die Berge und Felder von Chenyu streichelte, duftend
Was ist objektorientierte Programmierung? Objektorientierte Programmierung (OOP) ist ein Programmierparadigma, das reale Entitäten in Klassen abstrahiert und Objekte zur Darstellung dieser Entitäten verwendet. Klassen definieren die Eigenschaften und das Verhalten von Objekten und Objekte instanziieren Klassen. Der Hauptvorteil von OOP besteht darin, dass Code einfacher zu verstehen, zu warten und wiederzuverwenden ist. Grundkonzepte von OOP Zu den Hauptkonzepten von OOP gehören Klassen, Objekte, Eigenschaften und Methoden. Eine Klasse ist der Bauplan eines Objekts, der seine Eigenschaften und sein Verhalten definiert. Ein Objekt ist eine Instanz einer Klasse und verfügt über alle Eigenschaften und Verhaltensweisen der Klasse. Eigenschaften sind Merkmale eines Objekts, das Daten speichern kann. Methoden sind Funktionen eines Objekts, die mit den Daten des Objekts arbeiten können. Vorteile von OOP Zu den Hauptvorteilen von OOP gehören: Wiederverwendbarkeit: OOP kann den Code erweitern
Schnittstelle: Eine implementierte Vertragsschnittstelle definiert eine Reihe von Methodensignaturen in Java, stellt jedoch keine konkrete Implementierung bereit. Es fungiert als Vertrag, der Klassen, die die Schnittstelle implementieren, dazu zwingt, ihre angegebenen Methoden zu implementieren. Die Methoden in der Schnittstelle sind abstrakte Methoden und haben keinen Methodenkörper. Codebeispiel: publicinterfaceAnimal{voideat();voidsleep();} Abstrakte Klasse: Teilweise implementierter Entwurf Eine abstrakte Klasse ist eine übergeordnete Klasse, die eine teilweise Implementierung bereitstellt, die von ihren Unterklassen geerbt werden kann. Im Gegensatz zu Schnittstellen können abstrakte Klassen konkrete Implementierungen und abstrakte Methoden enthalten. Abstrakte Methoden werden mit dem Schlüsselwort abstract deklariert und müssen von Unterklassen überschrieben werden. Codebeispiel: publicabstractcla
Durch die Funktionsvererbung können abgeleitete Klassen Methoden von Basisklassen erben und so die Wiederverwendung von Code und Polymorphismus ermöglichen. Durch den Entwurf einer guten Vererbungshierarchie, die den Prinzipien der Einzelverantwortung, der Offen-Geschlossen-Struktur und der Rees-Substitution folgt, können Codekopplungs- und Rautenprobleme vermieden werden.
