événements de page
: dans quel ordre les pages HTML sont-elles chargées ?
Réponse : La page est chargée de haut en bas dans l'ordre dans lequel le code est écrit.
Problèmes pouvant survenir : Si JavaScript est utilisé pour faire fonctionner des éléments DOM avant le chargement de la page, des erreurs de syntaxe se produiront.
Solution : les événements de page peuvent modifier le timing d'exécution du code JavaScript.
Événements de focus
Dans le développement Web, les événements de focus sont principalement utilisés pour les fonctions de validation de formulaire et sont l'un des événements les plus couramment utilisés.
Par exemple, changer le style de la zone de texte lorsque la zone de texte obtient le focus, valider les données saisies dans la zone de texte lorsque la zone de texte perd le focus, etc.
Afin de permettre à chacun de mieux comprendre comment utiliser les événements focus, voici une démonstration permettant de vérifier si le nom d'utilisateur et le mot de passe sont vides.
Implémentation du code
<!DOCTYPEhtml>
<tête>
<méta charset="UTF-8">
<title>Vérifiez que le nom d'utilisateur et le mot de passe sont vides</title>
<style>
corps{arrière-plan :#ddd;}
.box{background:#fff;padding:20px 30px;width:400px;margin: 0 auto;text-align:center;}
.btn{largeur : 180 px ; hauteur : 40 px ; arrière-plan : #3388ff; bordure : 1px solide #fff ; couleur : #fff ; taille de police : 14px ;}
.ipt{largeur :260px;remplissage: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- taille : 13 px ;}
</style>
</tête>
<corps>
<p id="tips" class="tips"></p>
<p class="boîte">
<p><label>Nom d'utilisateur : <input id="user" class="ipt" type="text"></label></p>
<p><label>Mot de passe : <input id="pass" class="ipt" type="password"></label></p>
<p><button id="login" class="btn">Connexion</button></p>
</p>
<script>
window.onload = fonction() {
addBlur($('user')); // Vérifiez si la valeur est vide après que l'élément avec l'identifiant de l'utilisateur perd le focus. $('pass')); l'identifiant du passage perd le focus. Si la valeur est vide} ;
function $(obj) { // Récupère l'élément spécifié en fonction de l'identifiant return document.getElementById(obj);
}
function addBlur(obj) { // Ajoute un événement de perte de focus pour l'élément spécifié obj.onblur = function() {
estEmpty(this);
} ;
}
function isEmpty(obj) { // Vérifiez si le formulaire est vide if (obj.value === '') {
$('tips').style.display = 'bloc';
$('tips').innerHTML = 'Remarque : le contenu d'entrée ne peut pas être vide ';
} autre {
$('tips').style.display = 'aucun';
}
}
</script>
</corps>
</html> Événements de souris
Les événements de souris sont les événements les plus couramment utilisés dans le développement Web.
Par exemple, changer le contenu affiché dans la barre d'onglets lorsque la souris passe dessus ; utiliser la souris pour faire glisser la zone d'état pour ajuster sa position d'affichage, etc. Ces effets de page Web courants utilisent tous des événements de souris.
Dans le développement de projets, certains attributs de souris couramment utilisés sont souvent impliqués, qui sont utilisés pour obtenir les informations sur la position actuelle de la souris.
Les attributs pageX et pageY ne sont pas compatibles dans les navigateurs IE6-8. Par conséquent, la compatibilité avec les navigateurs IE6~8 est requise lors du développement du projet.
Les coordonnées de la souris dans le document sont égales aux coordonnées de la souris dans la fenêtre actuelle plus la longueur du texte déroulé par la barre de défilement.
Afin de permettre à chacun de mieux comprendre l'utilisation des événements de souris, prenons comme exemple l'affichage circulaire de la position du clic de la souris.
Implémentation du code
<!DOCTYPEhtml>
<tête>
<méta charset="UTF-8">
<title>Afficher la position du clic de la souris</title>
<style>
.mouse{position :absolue;arrière-plan :#ffd965;largeur:40px;hauteur:40px;border-radius:20px;}
</style>
</tête>
<corps>
<p id="mouse" class="mouse"></p>
<script>
var souris = document.getElementById('mouse');
//Exigence : Lorsque la souris clique sur la page, obtenez la position du clic et affichez un petit point document.onclick = function(event) {
// Récupère le traitement compatible de l'objet événement var event = event ||
// La position de la souris sur la page var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
// Calcule la position où <p> doit être affiché var targetX = pageX - mouse.offsetWidth / 2;
var targetY = pageY - mouse.offsetHeight / 2;
// Afficher <p> à l'endroit cliqué par la souris
mouse.style.display = 'bloc';
mouse.style.left = targetX + 'px';
mouse.style.top = cibleY + 'px';
} ;
</script>
</corps>
</html> [Case] Effets de glissement de la souris
La position de la boîte (valeurs gauche et supérieure) = la position de la souris (valeurs gauche et supérieure) - la distance entre la souris et la boîte (valeurs gauche et supérieure) lorsque la souris est enfoncée.
Donnez un exemple
Idées d'implémentation de code :
① Écrivez du HTML et concevez des boîtes contextuelles pour implémenter des effets de glisser-déposer.
② Ajoutez l'événement mousedown et son gestionnaire à la barre de déplacement.
③ Gérez les événements de mouvement de la souris pour obtenir des effets de glissement de la souris.
④ Gérez l'événement de relâchement du bouton de la souris afin que la boîte contextuelle ne bouge plus après le relâchement du bouton de la souris.
Implémentation du code
<!DOCTYPEhtml>
<html>
<tête>
<méta charset="UTF-8">
<title>Glisser la souris</title>
<style>
corps{marge:0}
.box{width:400px;height:300px;border:5px solid #eee;box-shadow:2px 2px 2px 2px #666;position:absolute;top:30%;left:30%}
.hd{largeur : 100 % ; hauteur : 25 px ; couleur d'arrière-plan : #7c9299 ; bordure-bottom : 1px solide #369 ; hauteur de ligne : 25 px ; couleur : #fff ; curseur : déplacer}
#box_close{float:right;cursor:pointer}
</style>
</tête>
<corps>
<p id="box" class="box">
<p id="drop" class="hd">
Informations d'inscription (peuvent être glissées et déposées)
<span id="box_close">【Fermer】</span>
</p>
<p class="bd"></p>
</p>
<script>
// Récupère la boîte et la bande déplacées var box = document.getElementById('box');
var drop = document.getElementById('drop');
drop.onmousedown = function(event) { // Appuyez la souris sur la barre de déplacement pour faire glisser la boîte var event = event ||
// Récupère la position lorsque la souris est enfoncée var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
// Calcule la position du clic de souris à partir de la boîte var spaceX = pageX - box.offsetLeft;
var spaceY = pageY - box.offsetTop;
document.onmousemove = function(event) { // Obtenez la position de la souris lorsque la souris bouge. La boîte entière suit la position de la souris var event = event ||
// Récupère la position de la souris après le mouvement var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
// Calcule et définit la position de la boîte après le mouvement box.style.left = pageX - spaceX + 'px';
box.style.top = pageY - espaceY + 'px';
} ;
} ;
document.onmouseup = function() {//Annule le mouvement de la boîte lorsque le bouton de la souris est relâché document.onmousemove = null;
} ;
</script>
</corps>
</html> Événements de clavier
Les événements de clavier font référence aux événements déclenchés lorsque l'utilisateur utilise le clavier.
Par exemple, l'utilisateur appuie sur la touche Échap pour fermer la barre d'état ouverte et appuie sur la touche Entrée pour faire basculer directement le curseur de haut en bas, etc.
Ce qui suit montre l'utilisation de la commutation par touche Entrée. Les détails sont comme indiqué dans l'exemple.
Implémentation du code
<!DOCTYPEhtml>
<tête>
<méta charset="UTF-8">
<title>Appuyez sur Entrée pour changer</title>
</tête>
<corps>
<p>Nom d'utilisateur : <input type="text"></p>
<p>E-mail : <input type="text"></p>
<p>Numéro de téléphone portable : <input type="text"></p>
<p>Description personnelle : <input type="text"></p>
<script>
var inputs = document.getElementsByTagName('input');
pour (var i = 0; i < inputs.length; ++i) {
entrées[i].onkeydown = fonction(e) {
// Récupère le traitement compatible de l'objet événement var e = event ||
// Déterminez si la touche enfoncée est Entrée. Si tel est le cas, laissez l'entrée suivante prendre le focus if (e.keyCode === 13) {
// Parcourez toutes les zones de saisie et recherchez l'indice de l'entrée actuelle pour (var i = 0; i < inputs.length; ++i) {
if (entrées[i] === this) {
// Calcule l'index de l'élément d'entrée suivant var index = i + 1 >= inputs.length 0 : i + 1;
casser;
}
}
// Si l'entrée suivante est toujours une zone de texte, obtient le focus clavier if (inputs[index].type === 'text') {
inputs[index].focus(); // Déclencher un événement de focus }
}
} ;
}
</script>
</corps>
</html> Notez que
les valeurs de clé enregistrées dans l'événement keypress sont des codes ASCII et que
les valeurs de clé enregistrées dans les événements keydown et keyup sont des codes de clé virtuelle.
Pour plus de détails, veuillez vous référer à des manuels tels que MDN.
Les événements deformulaire
font référence aux événements qui se produisent lors de l'utilisation de formulaires Web.
Par exemple, vérification du formulaire avant soumission, opération de confirmation lors de la réinitialisation du formulaire, etc. JavaScript fournit des événements de formulaire associés.
Ce qui suit montre s'il faut soumettre et réinitialiser les données du formulaire à titre d'exemple. Les détails sont comme indiqué dans l'exemple.
Implémentation du code
<!DOCTYPEhtml>
<tête>
<méta charset="UTF-8">
<title>Événements de formulaire</title>
</tête>
<corps>
<form id="s'inscrire">
<label>Nom d'utilisateur : <input id="user" type="text"></label>
<input type="submit" value="Soumettre">
<input type="reset" value="Réinitialiser">
</form>
<script>
// Récupère les objets formulaire et élément qui doivent être vérifiés var regist = document.getElementById('register');
var utilisateur = document.getElementById('user');
regist.onsubmit = function(event) { // Ajouter un événement de soumission au formulaire // Récupère l'objet événement et affiche le type d'événement actuel var event = event ||
console.log(event.type);
// Détermine si le contenu de l'élément de formulaire est vide. S'il est vide, renvoie false, sinon renvoie true.
return user.value ? vrai : faux ;
} ;
regist.onreset = function (event) { // Ajouter un événement de réinitialisation au formulaire // Récupère l'objet événement et affiche le type d'événement actuel var event = event ||
console.log(event.type);
// Déterminez s'il faut confirmer la réinitialisation, appuyez sur "OK" pour renvoyer vrai, appuyez sur "Annuler" pour renvoyer faux
return confirm('Veuillez confirmer si vous souhaitez réinitialiser les informations. Après la réinitialisation, tout le contenu rempli dans le formulaire sera effacé');
} ;
</script>
</corps>
</html> Analyse pratique
de l'effet d'agrandissement d'image
Comment mettre en œuvre l'effet d'agrandissement d'image :
① Préparez deux images identiques, une petite image et une grande image.
② La vignette s'affiche dans la zone d'affichage du produit.
③ La grande image permet d'afficher la zone correspondante dans la grande image proportionnellement lorsque la souris se déplace sur la petite image.
Idées d'implémentation de code :
① Écrivez une page HTML pour afficher des petites images, des masques qui cachent la souris et de grandes images.
② Lorsque la souris se déplace sur la petite image, le masque de la souris et la grande image s'affichent.
③ Lorsque la souris bouge, laissez le masque bouger dans la petite image.
④ Limitez la plage mobile du masque dans la petite image.
⑤ Affichez la grande image proportionnellement en fonction de la couverture du masque dans la petite image.