Trois éléments de déclenchement d'événement: par qui? Par quel déclencheur, que faire après le déclencheur?
Comment écrire l'événement:
Norme w3c: l'événement est écrit dans la ligne, mais comme la structure et le comportement doivent être séparés, nous utilisons généralement JavaScript pour lier l'événement. Ce n'est que dans de rares cas que l'événement sera écrit dans la ligne.
Méthode de liaison d'événement:
Le nœud (objet) dans le browser.on + événement handle = function () {
Que faire (Placé dans le navigateur, non exécuté et exécuté lorsque l'événement se produit.)
}
例 ： oDiv.onclick = function () {alert （1）}
Résumé de l'événement:
L'événement consiste à définir une fonction de prétraitement pour le navigateur. Lorsque l'événement est déclenché, la fonction est exécutée. Il s'agit de l'événement.
Type d'événement:
Écrivez quand vous écrivez des événements
Événements de souris:
1. Cliquez sur l'événement
oDiv.onclick = fonction））
2. Double-cliquez sur l'événement
oDiv.ondbclick = fonction））
3. Événement du bouton droit de la souris (menu contextuel)
oDiv.oncontextmenu = fonction （） {
// contexte contexte
// menu menu}
4. Événement souris vers le bas
oDiv.onmousedowm = fonction （） {
console.log ('appuyez')}
5. Événement souris vers le haut
oDiv.onmouseup = fonction （） {
console.log ('lift')}
6.1 Entrée souris
oDiv.onmouseover = fonction （） {
console.log ('Survolez')}
6.2 La souris s'est déplacée, mais ne se déclenchera pas lorsqu'elle traversera l'élément enfant
oDiv.onmouseenter = fonction）） {
console.log ('Mouse into enter')}
7.1 Sortie souris
oDiv.onmouseout = fonction）） {
console.log ('Mouse out')}
7.2 La souris sort, mais ne se déclenche pas lorsqu'elle traverse l'élément enfant
oDiv.onmouseleave = fonction）） {
console.log ('Sortir du congé')}
8. Événement de mouvement de souris
oDiv.onmousemove = fonction （） {
console.log ('mobile')}
Événements clavier:
var oInput = document.querySelector ( 'entrée')
1. Appuyez sur le clavier
oInput.onKeydown = fonction （） {
console.log ('appuyez')}
2. Le clavier est relevé
oInput.onKeyup = fonction （） {
console.log ('lift')}
3. Toucher du clavier
oInput.onKeypress = fonction （） {
console.log ('frappe clavier')}
Cet événement de presse sera déclenché même si le clavier est maintenu enfoncé sans lever
Événements de formulaire:
Dans la sélection unique, la sélection multiple, le menu déroulant pour lier ces éléments utilise généralement le changement
Exemple:
Événement Get Focus: Focus
oText.onfocus = function () {console.log ('get the focus')}
Événement de focalisation perdue: onblur
oText.onblur = function () {console.log ('focus perdu')
// Récupère le contenu de la zone de texte en utilisant l'attribut value
console.log （this.value）}
Événement de soumission de formulaire: écrivez sur toute la couche externe du formulaire
例 ： varo Form = document.querySelector （'# form'）
oForm.onsubmit = fonction （） {
// Faites un peu de traitement avant d'envoyer le formulaire
// Par exemple, si la zone de texte n'a pas de contenu, elle ne sera pas soumise
si （oText.value === ''） {
// Ne pas autoriser la soumission du formulaire, renvoyer false peut empêcher
return false}
console.log ('Soumettre')}
événement événement
Lorsque l'événement est déclenché, vous obtenez un message (objet événement), qui contient l'encapsulation de certaines propriétés et méthodes liées à l'événement (telles que: l'élément de l'événement, l'état de la touche du clavier, la position de la souris, l'état du bouton de la souris, etc.) , Uniquement lorsque l'événement est déclenché.
oDiv.onmousedown = fonction (e) {
alerte （e）;}
JS manque de loi de vertu: il y a un problème de compatibilité des objets événementiels;
Rendons-le donc compatible avant d'utiliser l'objet événement:
Si e est valide alors c'est e lui-même, e n'est pas valide est égal à window.event
e = e || window.event;
alert (e.buttons) observe la valeur de retour des .buttons;
Événements et méthodes de la souris;
| Nom d'attribut |
Signification |
| Boutons électroniques |
Retour au bouton de clic de souris (1 bouton gauche, 2 bouton droit, 4 molette de défilement du bouton central) |
| e.offsetX / offsetY |
Obtenez les coordonnées de la boîte (source d'événement) qui a déclenché l'événement Les coordonnées du bord de l'élément avec le plus petit clic |
| e.clientX / clientY |
Obtenez les coordonnées de la zone visible (selon le positionnement du navigateur) Quel que soit l'emplacement, il est fixé au bord de la zone de visualisation du navigateur |
| e.screenX / screenY |
Obtenez les coordonnées de tout l'écran Peu importe la taille du navigateur, il obtient les coordonnées de tout le bord de l'écran |
| e.pageX / e.pageY |
Obtenez les coordonnées du document (y compris la barre de défilement) |
Obtenir le code de la touche du clavier
Chaque touche du clavier a un code unique pour identifier la touche du clavier que l'utilisateur utilise actuellement
Vous avez des problèmes de compatibilité
e.keyCode || e.qui
Code de touche spéciale: s'il faut appuyer sur alt ctrl et shift
e.altKey
e.ctrlKey
e.shiftKey
La valeur de retour est une valeur booléenne;
Peut être utilisé pour juger des combinaisons de touches
si （e.keyCode == 13 && e.altKey） {
alert ('Enter et alt ont été pressés en même temps))}
Comportement par défaut (navigateur)
Il existe certains comportements par défaut des éléments html, comme une balise, il y a une action de saut après avoir cliqué; l'entrée du type d'envoi dans le formulaire a un événement de saut d'envoi par défaut; l'entrée du type reset a le comportement de réinitialisation du formulaire. Cependant, parfois, nous n'avons pas besoin de l'événement par défaut, nous devons donc empêcher l'événement par défaut
retour faux ；
Formulation compatible pour empêcher le comportement par défaut, seuls les événements avec un comportement par défaut doivent écrire ceci
Dans différents incidents, différentes actions sont bloquées, à savoir:
if (e.preventDefault) {
e.preventDefault ();
}autre {
window.event.returnValue = false;
// retourne faux;}
Concentrez-vous sur les erreurs:
Impossible de lire la liste des classes non définie
TypeError non capturé: impossible de lire la propriété 'classList' de undefined