jQuery: Lösen Sie dieselbe Funktion von mehreren Ereignissen aus
- jQuery Multiple Events: Verfolgen Sie die Benutzerinteraktion im HTML-Formular
- jQuery Multiple Events: Hintergrundfarbe ändern
In diesem Artikel erfahren Sie, wie Sie dieselbe Funktion von mehreren Ereignissen in jQuery auslösen. Wir zeigen zwei Beispiele dafür, wie man dies mit der jQuery .on() API macht.
Das erste Beispiel verfolgt Benutzerbewegungen in HTML-Formulareingaben. Während die zweite die Hintergrundfarbe eines HTML-Elements ändert.
jQuery Multiple Events: Verfolgen Sie die Benutzerinteraktion im HTML-Formular
In diesem Beispiel richten wir eine anonyme Funktion ein, die zwei Benutzerinteraktionen verfolgt. Das erste ist onblur und das zweite onmouseleave.
Wir müssen dies an einem normalen Tag an zwei Stellen schreiben, aber wir können es gleichzeitig mit der .on()-API tun. Zuerst wählen wir ein Element für die mehreren Ereignisse aus.
Dann verwenden wir .on(), um die Ereignisse onblur und onmouseleave zu überwachen.
Dadurch kann nachverfolgt werden, wann ein Benutzer zwischen Formulareingaben wechselt. Wenn Sie möchten, können Sie die Formularvalidierung in den Prozess implementieren.
Im Folgenden haben wir ein HTML-Formular mit zwei HTML-Eingaben. Dann haben wir die jQuery .on()-API, die auf onblur- und onmouseleave-Ereignisse wartet.
Während dieses Vorgangs protokollieren wir Nachrichten an die Konsole des Webbrowsers.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Multiple Events: Basic Form Validation</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
body { display: grid; justify-content: center; align-items: center; height: 100vh;}
form { border: 2px solid #1560bd; font-size: 2em; padding: 1.2em; }
</style>
</head>
<body>
<main>
<form id="html_form">
<label for="first_name">First name</label>
<input id="first_name" type="text" name="first_name">
<label for="last_name">Last name</label>
<input id="last_name" type="text" name="last_name">
<input type="submit" name="submit" value="Submit form">
</form>
</main>
<script>
$("document").ready(function() {
// Use the "on" API to attach anonymous functions
// to the focus, blur, and mouseleave events. Although
// we only show console.log messages; you can implement
// form validation routines.
$("#first_name, #last_name").on({
focus: function() {
$(this).css("outline", "3px solid #1a1a1a");
},
blur: function() {
$(this).removeAttr("style");
console.log("Blur left");
},
mouseleave: function() {
$(this).removeAttr("style");
console.log("Mouse left");
},
})
});
// Prevent form submission
$("#html_form").submit(function(e) {
return false;
})
</script>
</body>
</html>
Ausgang:
jQuery Multiple Events: Hintergrundfarbe ändern
Sie können die Hintergrundfarbe eines Elements basierend auf Mausbewegungen ändern. Sie können onmouseenter und onmouseleave in Vanilla JavaScript verwenden.
Aber mit der jQuery .on() API können Sie alles in einer Zeile erledigen, aber Sie können es für eine bessere Lesbarkeit aufteilen. Wenn Sie im Folgenden mit der Maus über das main-Element fahren, ändert sich dessen Hintergrundfarbe.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Multiple Events: Change page background color</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
body { display: grid; justify-content: center; align-items: center; height: 100vh;}
main { font-size: 2em; padding: 1em; border: 5px solid #1a1a1a; display: block;}
</style>
</head>
<body>
<main id="main">
<p>This is a big text. Move your mouse and see what happens.</p>
</main>
<script type="text/javascript">
$("document").ready(function() {
// Change the background color of the main
// element when the user moves their mouse over
// it.
$("#main").on({
mouseenter: function() {
$(this).css("background", "#aaa");
},
mouseleave: function() {
$(this).css("background", "#fafafa");
},
})
});
</script>
</body>
</html>
Ausgang:
Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.
LinkedIn