nachSeitenereignisse
: In welcher Reihenfolge werden HTML-Seiten geladen?
Antwort: Die Seite wird von oben nach unten in der Reihenfolge geladen, in der der Code geschrieben wurde.
Mögliche Probleme : Wenn JavaScript zum Betrieb von DOM-Elementen verwendet wird, bevor die Seite geladen wird, treten Syntaxfehler auf.
Lösung : Seitenereignisse können den Ausführungszeitpunkt von JavaScript-Code ändern.
Fokusereignisse
In der Webentwicklung werden Fokusereignisse hauptsächlich für Formularvalidierungsfunktionen verwendet und gehören zu den am häufigsten verwendeten Ereignissen.
Ändern Sie beispielsweise den Stil des Textfelds, wenn das Textfeld den Fokus erhält, überprüfen Sie die in das Textfeld eingegebenen Daten, wenn das Textfeld den Fokus verliert usw.
Damit jeder besser versteht, wie Fokusereignisse verwendet werden, finden Sie im Folgenden eine Demonstration, um zu überprüfen, ob der Benutzername und das Kennwort leer sind.
Code-Implementierung
<!DOCTYPE html>
<Kopf>
<meta charset="UTF-8">
<title>Stellen Sie sicher, dass Benutzername und Passwort leer sind</title>
<Stil>
Körper{Hintergrund:#ddd;}
.box{background:#fff;padding:20px 30px;width:400px;margin: 0 auto;text-align:center;}
.btn{width:180px;height:40px;background:#3388ff;border:1px solid #fff;color:#fff;font-size:14px;}
.ipt{width:260px;padding:4px 2px;}
.tips{width:440px;height:30px;margin:5px auto;background:#fff;color:red;border:1px solid #ccc;display:none;line-height:30px;padding-left:20px;font- Größe:13px;}
</style>
</head>
<Körper>
<p id="tips" class="tips"></p>
<p class="box">
<p><label>Benutzername: <input id="user" class="ipt" type="text"></label></p>
<p><label>Passwort: <input id="pass" class="ipt" type="password"></label></p>
<p><button id="login" class="btn">Anmelden</button></p>
</p>
<Skript>
window.onload = function() {
addBlur($('user')); // Prüfe, ob der Wert leer ist, nachdem das Element mit der ID von user den Fokus verliert. addBlur($('pass')); Die Pass-ID verliert den Fokus. Ob der Wert leer ist};
function $(obj) { // Das angegebene Element basierend auf der ID abrufen return document.getElementById(obj);
}
function addBlur(obj) { // Ein Fokusverlustereignis für das angegebene Element hinzufügen obj.onblur = function() {
isEmpty(this);
};
}
function isEmpty(obj) { // Prüfen, ob das Formular leer ist if (obj.value === '') {
$('tips').style.display = 'block';
$('tips').innerHTML = 'Hinweis: Der Eingabeinhalt darf nicht leer sein!'
} anders {
$('tips').style.display = 'none';
}
}
</script>
</body>
</html> Mausereignisse
Mausereignisse sind die am häufigsten verwendeten Ereignisse in der Webentwicklung.
Zum Beispiel das Ändern des in der Tab-Leiste angezeigten Inhalts, wenn die Maus darüber bewegt wird; das Verwenden der Maus zum Ziehen des Statusfelds, um seine Anzeigeposition anzupassen usw. Diese allgemeinen Webseiteneffekte nutzen alle Mausereignisse.
Bei der Projektentwicklung sind häufig einige häufig verwendete Mausattribute beteiligt, mit denen die aktuellen Informationen zur Mausposition abgerufen werden.
Die Attribute pageX und pageY sind in IE6-8-Browsern nicht kompatibel. Daher ist während der Projektentwicklung eine Kompatibilität mit IE6~8-Browsern erforderlich.
Die Koordinaten der Maus im Dokument entsprechen den Koordinaten der Maus im aktuellen Fenster plus der Länge des durch die Bildlaufleiste gerollten Textes.
Damit jeder die Verwendung von Mausereignissen besser verstehen kann, nehmen wir als Beispiel die kreisförmige Anzeige der Mausklickposition.
Code-Implementierung
<!DOCTYPE html>
<Kopf>
<meta charset="UTF-8">
<title>Mausklickposition anzeigen</title>
<Stil>
.mouse{position:absolute;background:#ffd965;width:40px;height:40px;border-radius:20px;}
</style>
</head>
<Körper>
<p id="mouse" class="mouse"></p>
<Skript>
var mouse = document.getElementById('mouse');
//Anforderung: Wenn die Maus auf die Seite klickt, ermitteln Sie die Klickposition und zeigen Sie einen kleinen Punkt an document.onclick = function(event) {
// Holen Sie sich die kompatible Verarbeitung des Ereignisobjekts var event = event ||.
// Die Position der Maus auf der Seite var pageX = event.pageX ||. event.clientX + document.documentElement.scrollLeft;
var pageY = event.pageY ||. event.clientY + document.documentElement.scrollTop;
// Berechne die Position, an der <p> angezeigt werden soll var targetX = pageX - mouse.offsetWidth / 2;
var targetY = pageY - mouse.offsetHeight / 2;
// <p> an der mit der Maus angeklickten Stelle anzeigen
mouse.style.display = 'block';
mouse.style.left = targetX + 'px';
mouse.style.top = targetY + 'px';
};
</script>
</body>
</html> [Fall] Mauszieheffekte
Die Position des Feldes (linke und obere Werte) = die Position der Maus (linke und obere Werte) – der Abstand zwischen der Maus und dem Feld (linke und obere Werte), wenn die Maus gedrückt wird.
Geben Sie ein Beispiel
Ideen zur Code-Implementierung :
① Schreiben Sie HTML und entwerfen Sie Popup-Boxen, um Drag-and-Drop-Effekte zu implementieren.
② Fügen Sie das Mousedown-Ereignis und seinen Handler zur Ziehleiste hinzu.
③ Behandeln Sie Mausbewegungsereignisse, um Mauszieheffekte zu erzielen.
④ Behandeln Sie das Ereignis beim Loslassen der Maustaste so, dass sich das Popup-Feld nach dem Loslassen der Maustaste nicht mehr bewegt.
Code-Implementierung
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="UTF-8">
<title>Mausziehen</title>
<Stil>
Körper{margin:0}
.box{width:400px;height:300px;border:5px solid #eee;box-shadow:2px 2px 2px 2px #666;position:absolute;top:30%;left:30%}
.hd{width:100%;height:25px;background-color:#7c9299;border-bottom:1px solid #369;line-height:25px;color:#fff;cursor:move}
#box_close{float:right;cursor:pointer}
</style>
</head>
<Körper>
<p id="box" class="box">
<p id="drop" class="hd">
Registrierungsinformationen (können per Drag & Drop verschoben werden)
<span id="box_close">【Schließen】</span>
</p>
<p class="bd"></p>
</p>
<Skript>
// Holen Sie sich die gezogene Box und ziehen Sie sie ab var box = document.getElementById('box');
var drop = document.getElementById('drop');
drop.onmousedown = function(event) { // Drücken Sie die Maus auf die Ziehleiste, um das Feld zu ziehen var event = event ||.
// Ermitteln Sie die Position, wenn die Maus gedrückt wird. var pageX = event.pageX ||. event.clientX + document.documentElement.scrollLeft;
var pageY = event.pageY ||. event.clientY + document.documentElement.scrollTop;
// Berechnen Sie die Position der mit der Maus angeklickten Position aus der Box var spaceX = pageX - box.offsetLeft;
var spaceY = pageY - box.offsetTop;
document.onmousemove = function(event) { // Ermittelt die Mausposition, wenn sich die Maus bewegt. Das gesamte Feld folgt der Mausposition. var event = event ||.
// Position der Maus nach der Bewegung ermitteln var pageX = event.pageX ||. event.clientX + document.documentElement.scrollLeft;
var pageY = event.pageY ||. event.clientY + document.documentElement.scrollTop;
// Berechne und setze die Position der Box nach der Bewegung box.style.left = pageX - spaceX + 'px';
box.style.top = pageY - spaceY + 'px';
};
};
document.onmouseup = function() {//Brechen Sie die Bewegung des Felds ab, wenn die Maustaste losgelassen wird document.onmousemove = null;
};
</script>
</body>
</html> Tastaturereignisse
Tastaturereignisse beziehen sich auf Ereignisse, die ausgelöst werden, wenn der Benutzer die Tastatur verwendet.
Beispielsweise drückt der Benutzer die Esc-Taste, um die geöffnete Statusleiste zu schließen, und drückt die Eingabetaste, um den Cursor direkt nach oben und unten zu bewegen usw.
Im Folgenden wird die Verwendung der Eingabetastenumschaltung demonstriert. Die Details sind wie im Beispiel dargestellt.
Code-Implementierung
<!DOCTYPE html>
<Kopf>
<meta charset="UTF-8">
<title>Drücken Sie die Eingabetaste, um zu wechseln</title>
</head>
<Körper>
<p>Benutzername: <input type="text"></p>
<p>E-Mail: <input type="text"></p>
<p>Mobiltelefonnummer: <input type="text"></p>
<p>Persönliche Beschreibung: <input type="text"></p>
<Skript>
var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; ++i) {
inputs[i].onkeydown = function(e) {
// Holen Sie sich die kompatible Verarbeitung des Ereignisobjekts var e = event ||.
// Bestimmen Sie, ob die gedrückte Taste die Eingabetaste ist. Wenn ja, lassen Sie die nächste Eingabe den Fokus erhalten if (e.keyCode === 13) {
// Durchlaufe alle Eingabefelder und finde den Index der aktuellen Eingabe für (var i = 0; i < inputs.length; ++i) {
if (inputs[i] === this) {
// Berechnen Sie den Index des nächsten Eingabeelements var index = i + 1 >= inputs.length 0 : i + 1;
brechen;
}
}
// Wenn die nächste Eingabe immer noch ein Textfeld ist, erhalte den Tastaturfokus if (inputs[index].type === 'text') {
inputs[index].focus(); // Fokusereignis auslösen }
}
};
}
</script>
</body>
</html> Beachten Sie, dass
die im Keypress-Ereignis gespeicherten Schlüsselwerte ASCII-Codes sind und
die in den Keydown- und Keyup-Ereignissen gespeicherten Schlüsselwerte virtuelle Tastencodes sind.
Weitere Informationen finden Sie in Handbüchern wie MDN.
Formularereignisse
beziehen sich auf Ereignisse, die beim Betrieb von Webformularen auftreten.
Zum Beispiel Überprüfung des Formulars vor dem Absenden, Bestätigungsvorgang beim Zurücksetzen des Formulars usw. JavaScript stellt zugehörige Formularereignisse bereit.
Im Folgenden wird beispielhaft gezeigt, ob Formulardaten übermittelt und zurückgesetzt werden sollen. Die Details sind wie im Beispiel dargestellt.
Code-Implementierung
<!DOCTYPE html>
<Kopf>
<meta charset="UTF-8">
<title>Ereignisse bilden</title>
</head>
<Körper>
<form id="register">
<label>Benutzername: <input id="user" type="text"></label>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
<Skript>
// Formular- und Elementobjekte abrufen, die überprüft werden müssen var regist = document.getElementById('register');
var user = document.getElementById('user');
regist.onsubmit = function(event) { // Dem Formular ein Submit-Ereignis hinzufügen // Das Ereignisobjekt abrufen und den aktuellen Ereignistyp ausgeben var event = event ||.
console.log(event.type);
// Bestimmen Sie, ob der Inhalt des Formularelements leer ist. Wenn es leer ist, geben Sie false zurück, andernfalls geben Sie true zurück
return user.value ? true : false;
};
regist.onreset = function (event) { // Ein Reset-Ereignis zum Formular hinzufügen // Das Ereignisobjekt abrufen und den aktuellen Ereignistyp ausgeben var event = event ||.
console.log(event.type);
// Bestimmen Sie, ob das Zurücksetzen bestätigt werden soll. Drücken Sie „OK“, um „true“ zurückzugeben, und drücken Sie „Abbrechen“, um „false“ zurückzugeben
return bestätigen('Bitte bestätigen Sie, ob Sie die Informationen zurücksetzen möchten. Nach dem Zurücksetzen werden alle im Formular ausgefüllten Inhalte gelöscht.');
};
</script>
</body>
</html> Praktische
Analysedes Bildvergrößerungseffekts
So implementieren Sie den Bildvergrößerungseffekt:
① Bereiten Sie zwei identische Bilder vor, ein kleines Bild und ein großes Bild.
② Das Miniaturbild wird im Produktanzeigebereich angezeigt.
③ Das große Bild wird verwendet, um den entsprechenden Bereich im großen Bild proportional anzuzeigen, wenn die Maus über das kleine Bild bewegt wird.
Ideen zur Code-Implementierung :
① Schreiben Sie eine HTML-Seite, um kleine Bilder, Masken, die die Maus verbergen, und große Bilder anzuzeigen.
② Wenn die Maus über das kleine Bild bewegt wird, werden die Mausmaske und das große Bild angezeigt.
③ Wenn Sie die Maus bewegen, lassen Sie die Maske im kleinen Bild wandern.
④ Begrenzen Sie den beweglichen Bereich der Maske im kleinen Bild.
⑤ Zeigen Sie das große Bild proportional zur Abdeckung der Maske im kleinen Bild an.