JavaScript-Trigger-Ereignis
- Lösen Sie die vordefinierten Ereignisse in JavaScript aus
- Erstellen Sie benutzerdefinierte Ereignisse und Trigger in JavaScript
In JavaScript wurde eine primitive Methode, initEvent(), verwendet, um neue Ereignisse zu erstellen. Das letzte Update hat das Schlüsselwort neu zum Erstellen eines benutzerdefinierten Ereignisses hinzugefügt. Außerdem gibt es eine ereignisreiche Sammlung von Ereignissen im Inventar, das für JavaScript erstellt wurde.
Der folgende Abschnitt zeigt eine Vorschau eines Beispiels für eines der vordefinierten Ereignisse und wie es ausgelöst wird. Und auch ein maßgeschneidertes Ereignis, das Details als Arbeitsmechanismus enthält. Also, lasst uns einsteigen!
Lösen Sie die vordefinierten Ereignisse in JavaScript aus
Hier wählen wir ein input-Textfeld für die Werteingabe aus und verwenden später das onclick-Attribut, um sicherzustellen, dass es einer addEventListener()-Methode entspricht.
Also nehmen wir die Instanz des Eingabe-Felds und setzen es durch einen bedingten Block. Wenn dann das Klick-Ereignis ausgelöst wird, wird die Eingabe abgerufen und entsprechend abgeglichen.
Und damit wird die Funktion der Ereignisse ausgelöst.
Code-Auszug:
<!DOCTYPE html>
<html>
<head>
<title>Trigger event</title>
</head>
<body>
<input type="text" id="vals">
<button onclick="abc()">Submit</button>
<script>
function abc(){
var x = document.getElementById("vals").value;
if(x ==='1'){
console.log("1")}
else{
console.log("No!")
}
}
</script>
</body>
</html>
Ausgang:
Erstellen Sie benutzerdefinierte Ereignisse und Trigger in JavaScript
Wir werden einen Eltern-Kind-Baum in einer Bubble-Event-Fortpflanzung verwenden, um diesen Fall zu demonstrieren. Die Hauptaufgabe besteht darin, die Elemente form und textarea zu erstellen, wobei form das übergeordnete Element ist.
Als nächstes erstellen wir ein Event mit dem new CustomEvent(). Der Name unseres Events ist cool, und es nimmt das Objekt der bubbles als true an, und das Detail wird der Wert des textarea sein.
Später wird das form einen eventListener haben, der besagt, dass das cool-Event beim Auslösen an seinem Inhalt arbeitet. Und zuletzt feuern wir das Event mit dispatchEvent(), und das ist ein eventListener für die textarea.
Sehen wir uns eine Vorschau des Codes und der Ausgabe an.
Code-Auszug:
<!DOCTYPE html>
<html>
<head>
<title>Trigger event</title>
</head>
<body>
<form>
<textarea></textarea>
</form>
<script>
const form = document.querySelector('form');
const textarea = document.querySelector('textarea');
const event = new CustomEvent('cool', {
bubbles: true,
detail: { text: () => textarea.value }
});
form.addEventListener('cool', (e) => console.log(e.detail.text()));
textarea.addEventListener('input', (e) => e.target.dispatchEvent(event));
</script>
</body>
</html>
Ausgang:
Gemäß dem benutzerdefinierten Ereignis sollten wir den Wert der Eingaben textarea drucken. Schließlich zeigt die Konsole, dass die Ausgabe ausgeführt wird.
