Les gestionnaires d’événements doivent être utilisés de manière correcte, de préférence en ne les écrivant pas directement dans les attributs de balise, mais en installant les gestionnaires d’événements dans les fichiers inclus avec le code JavaScript. Si vous utilisez la bibliothèque jQuery, le nom du gestionnaire doit être écrit sans le préfixe on.
click / onclick
– cliquez sur l’élément ; se produit lorsqu’un élément est cliqué avec le bouton gauche de la souris (sur les appareils à écran tactile, cela se produit lors du toucher).
Options d’enregistrement contextuelles
<input value="Нажми меня" onclick="alert('Клик!')" type="button">
<a href="#" onclick="alert('L'exemple 1 a fonctionné'); return false;">L'exemple 1</a>
Séquence de nombres commençant à 1
<script>
function countRabbits() {
for(let i=1; i<=3; i++) {
alert("Numéro de lapin " + i);
}
}
</script>
<input type="button" onclick="countRabbits()" value="Compter les lapins!">
<input id="elem" type="button" value="Presse-moi!">
<script>
elem.onclick = function() {
alert('Merci');
};
</script>
<input type="button" id="button" value="Bouton">
<script>
button.onclick = function() {
alert('Klik!');
};
</script>
Affiche le contenu du bouton «Cliquez sur moi» dans une fenêtre contextuelle
<button onclick="alert(this.innerHTML)">Presse-moi</button>
Plusieurs gestionnaires d’événements contextuels
<input id="elem" type="button" value="Presse-moi"/>
<script>
function handler1() {
alert('Merci!');
};
function handler2() {
alert('Merci encore!');
}
elem.onclick = () => alert("Bonjour");
elem.addEventListener("click", handler1); // Merci!
elem.addEventListener("click", handler2); // Merci encore!
</script>
Obtenir les coordonnées de la souris à partir d’un objet événement
<input type="button" value="Presse-moi" id="elem">
<script>
elem.onclick = function(event) {
// type d'événement de sortie, élément et coordonnées de clic
alert(event.type + " на " + event.currentTarget);
alert("Coordonnées: " + event.clientX + ":" + event.clientY);
};
</script>
Changer l’arrière-plan d’un objet
<button>Change color</button>
<script>
const btn = document.querySelector("button");
function random(number) {
return Math.floor(Math.random() * (number + 1));
}
btn.onclick = function () {
const rndCol =
"rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";
document.body.style.backgroundColor = rndCol;
};
</script>
<button onclick="bgChange()">Press me</button>
<script>
function bgChange() {
const rndCol =
"rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";
document.body.style.backgroundColor = rndCol;
}
</script>
Changer l’arrière-plan d’un élément div
<div id='myDiv'>Élément de changement de couleur</div>
<button onclick='changeColor()'>Changer de couleur</button>
<script>
function changeColor() {
document.getElementById('myDiv').style.backgroundColor = 'red';
}
</script>
Changer la couleur du lien
<script>
function ChangeColor(Element) {
if (Element.style.color == 'green') Element.style.color = 'red';
else Element.style.color = 'green';
return false;
}
</script>
<a href="#" style="color: green;" onclick="return ChangeColor(this);">Changer de couleur</a>
Validation du formulaire
<form>
<div>
<label for="fname">Nom: </label>
<input id="fname" type="text" />
</div>
<div>
<label for="lname">Nom de famille: </label>
<input id="lname" type="text" />
</div>
<div>
<input id="submit" type="submit" />
</div>
</form>
<p></p>
<script>
var form = document.querySelector("form");
var fname = document.getElementById("fname");
var lname = document.getElementById("lname");
var submit = document.getElementById("submit");
var para = document.querySelector("p");
form.onsubmit = function (e) {
if (fname.value === "" || lname.value === "") {
e.preventDefault();
para.textContent = "Les deux champs doivent être remplis!";
}
};
</script>
Interception des événements CSS dans la vidéo avec la fonction stopPropagation(), qui, lorsqu’elle est appelée dans le gestionnaire d’événements d’un objet, provoque l’exécution du gestionnaire mais l’événement ne remonte pas plus haut dans la chaîne
<button>Display video</button>
<div class="hidden">
<video>
<source src="rabbit320.mp4" type="video/mp4" />
<source src="rabbit320.webm" type="video/webm" />
<p>
Your browser doesn't support HTML5 video. Here is a
<a href="rabbit320.mp4">link to the video</a> instead.
</p>
</video>
</div>
div { position: absolute;
top: 50%;
transform: translate(-50%,-50%);
... }
.hidden {
left: -50%;
}
.showing {
left: 50%;
}
<script>
var videoBox = document.querySelector("div");
var video = document.querySelector("video");
videoBox.onclick = function () {
videoBox.setAttribute("class", "hidden");
};
video.onclick = function () {
video.play();
};
video.onclick = function (e) {
e.stopPropagation();
video.play();
};
</script>
<p style="text-align: justify;">Afficher et masquer le texte</p>
<button onclick='toggleVisibility()'>Afficher/Masquer</button>
<div id='hiddenDiv' style='display:none'>Texte masqué</div>
<script>
function toggleVisibility() {
let element = document.getElementById('hiddenDiv');
if (element.style.display === 'none') {
element.style.display = 'block';
} else {
element.style.display = 'none';
}
}
</script>
Chargement de données via AJAX, pour charger des données depuis le serveur sans recharger la page
function fetchData() {
// Voici votre code pour la requête AJAX
}
<onclick="fetchData()">Télécharger les données</button>
Changer le nom du lien de On à Off
<script>
//nous attendons que la page soit complètement chargée
window.onload = function () {
//obtenir l'identifiant de l'élément
var a = document.getElementById('switch');
//nous y accrochons un événement
a.onclick = function() {
//nous effectuons certaines actions
if (this.innerHTML=='On') this.innerHTML = 'Off';
else this.innerHTML = 'On';
//Empêcher les clics sur les liens href
return false;
}
}
</script>
<a id="switch" href="#">On</a>
onabort
– interruption de la lecture. L’événement onabort se produit lorsque le chargement de l’audio ou de la vidéo est interrompu. L’événement onabort se produit uniquement lorsqu’un téléchargement est interrompu, et non lorsqu’une erreur se produit. S’applique aux éléments audio, embed, img, object, video.
Notification indiquant que le téléchargement de la vidéo a été interrompu
<video id="myVideo" onabort="alert('Video load aborted')">
Alerte indiquant que le chargement de l’image a été interrompu
<img id="myImage" src="example.jpg" onabort="imageAborted()">
<script>
function imageAborted() {
alert("Image load was aborted by the user.");
}
</script>
Notification indiquant que la soumission du formulaire a été interrompue
<form id="myForm">
<input type="text" placeholder="Enter your name">
<input type="submit" value="Submit">
</form>
<script>
var form = document.getElementById("myForm");
form.addEventListener("abort", formAborted);
function formAborted() {
alert("Form submission was aborted by the user.");
}
</script>
onafterprint – impression terminée
L’événement onafterprint se produit lorsqu’une page commence à s’imprimer. L’événement onafterprint se produit lorsque la boîte de dialogue d’impression se ferme. Le navigateur s’exécute sur afterprint et onbeforeprint afin que des notes, des explications et des commentaires puissent être ajoutés au processus d’impression. Applicable pour body.
<body onafterprint="myFunction()">
onautocomplete – formulaire de remplissage automatique complété
Un attribut qui vous permet de remplir un formulaire en un clic – le navigateur insérera des valeurs dans les champs correspondants.
<form> <label for="name">Nom:</label> <input type="text" id="name" name="name" autocomplete="on"> </form>
onautocompleteerror – erreur lors du remplissage automatique du formulaire
onbeforeprint – préparation à l’impression
onbeforeunload – document téléchargé
Lorsqu’un utilisateur quitte une page, nous pouvons lui demander s’il souhaite vraiment partir. La gestion des événements beforeunload est responsable de cela. L’événement se produit avant l’événement de déchargement de la page unload. Cet événement permet à une page Web de déclencher une boîte de dialogue de confirmation demandant à l’utilisateur s’il souhaite vraiment quitter la page. Si l’utilisateur confirme, le navigateur navigue vers une nouvelle page, sinon il annule la navigation. Selon la spécification, pour afficher une boîte de dialogue de confirmation, le gestionnaire d’événements doit appeler preventDefault() sur l’événement. Applicable pour body.
<body onbeforeunload="return myFunction()">
<script>
function myFunction() {
return "Êtes-vous sûr de vouloir fermer cette page?...";
}
</script>
onblur – perte de concentration
L’événement de focus est appelé au moment de la mise au point, et blur – lorsque l’élément perd le focus. soutien focus/blur garanti pour les éléments avec lesquels le visiteur peut interagir: button, input, select, a etc. D’autre part, les éléments de formatage div, span, table – ne peut pas recevoir le focus par défaut. La méthode elem.focus() ne fonctionne pas pour eux, et les événements focus/blur ne travaille jamais. Cela peut être modifié avec un attribut HTML tabindex.
Validation (vérification) des données saisies avec l’inscription sous le formulaire
<style>
.invalid { border-color: red; }
#error { color: red }
</style>
<script>
input.onblur = function() {
if (!input.value.includes('@')) { // не email
input.classList.add('invalid');
error.innerHTML = 'Veuillez saisir une adresse e-mail valide.'
}
};
input.onfocus = function() {
if (this.classList.contains('invalid')) {
// nous supprimons l'indicateur d'erreur, car l'utilisateur souhaite ressaisir les données
this.classList.remove('invalid');
error.innerHTML = "";
}
};
</script>
Ваш email: <input type="email" id="input">
<div id="error"></div>
Validation (vérification) des données saisies avec remplissage en couleur du formulaire
<style>
.error {
background: red;
}
</style>
<script>
input.onblur = function() {
if (!this.value.includes('@')) { // pas d'e-mail
// afficher l'erreur
this.classList.add("error");
// ...et revenez au focus
input.focus();
} else {
this.classList.remove("error");
}
};
</script>
Votre email: <input type="email" id="input">
<input type="text" style="width:280px" placeholder="entrez une adresse e-mail invalide et cliquez ici">
Modification du texte du formulaire CLICK HERE
<input type="text" value="CLICK HERE" />
<script>
let input = document.querySelector("input");
input.onblur = inputBlur;
input.onfocus = inputFocus;
function inputBlur() {
input.value = "Focus has been lost";
}
function inputFocus() {
input.value = "Focus is here";
}
</script>
Vérification de la forme avec un contour de cadre
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Événement onblur</title>
<style>
.warning {
background-color: #ffe;
outline: 1px solid #dc143c;
}
</style>
<script>
function warning(field) {
if (field.value == '') field.classList.add('warning');
else field.classList.remove('warning');
}
</script>
</head>
<body>
<form>
<p><input placeholder="Nom" onblur="warning(this)"></p>
<p><input placeholder="Nom de famille" onblur="warning(this)"></p>
<p><input placeholder="Adresse" onblur="warning(this)"></p>
</form>
</body>
</html>
Éclairage de mise au point sans onblur
<style>
*!*input:focus*/!* {
background: #FA6;
outline: none; /* supprimer le cadre */
}
</style>
<input type="text">
<p>Sélecteur focus mettra en évidence l'élément lorsque vous vous concentrez dessus et supprimera la bordure que le navigateur utilise pour mettre en évidence l'élément par défaut.</p>
Espace réservé – une valeur d’indice à l’intérieur de INPUT qui disparaît automatiquement lorsqu’elle est focalisée et existe jusqu’à ce que le visiteur commence à taper, sans onblur
<style>
.my*!*::-webkit-input-placeholder*/!* {
color: red;
font-style: italic;
}
.my*!*::-moz-input-placeholder*/!* {
color: red;
font-style: italic;
}
.my*!*::-ms-input-placeholder*/!* {
color: red;
font-style: italic;
}
</style>
<input class="my" type="text" placeholder="E-mail">
oncancel – annuler l’action
Annuler l’opération en cours sur l’appareil. Utilisé pour le contrôle asynchrone de l’appareil. Si vous exécutez cette fonction avant le début d’une opération, l’opération sera annulée.
Device.Cancel ();
oncanplay
– vous pouvez commencer à lire le fichier multimédia spécifié
L’événement oncanplay se produit lorsque le navigateur peut commencer à lire l’audio/vidéo spécifié (lorsqu’il est suffisamment mis en mémoire tampon pour démarrer). Pendant le processus de chargement audio/vidéo, les événements suivants se produisent dans cet ordre: onloadstart, ondurationchange, onloadedmetadata, onloadeddata, onprogress, oncanplay, oncanplaythrough
Exécutez JavaScript lorsque la vidéo est prête à être lue:
<video oncanplay="myFunction()">
oncanplaythrough
– Vous pouvez démarrer la lecture du fichier multimédia spécifié sans avoir à l’arrêter pour la mise en mémoire tampon. L’événement oncanplaythrough se produit lorsque le navigateur évalue qu’il peut lire le média spécifié sans avoir à s’arrêter pour la mise en mémoire tampon.
Exécuter JavaScript lorsque la vidéo peut être lue dans son intégralité sans pause:
<video oncanplaythrough="myFunction()">
onchange – changer la valeur
L’événement onchange se produit lorsque la valeur d’un élément a changé. Pour les boutons radio et les cases à cocher, l’événement onchange se produit lorsque l’état change checked. Cet événement est similaire à l’événement oninput. La différence est que l’événement oninput se produit immédiatement après que la valeur de l’élément change, tandis que onchange se produit lorsque l’élément perd le focus, après que le contenu a changé. Une autre différence est que l’événement onchange fonctionne également sur l’élément select. Un gestionnaire d’événements onchange qui se déclenche lorsque la valeur de l’élément a changé et qu’il perd le focus. Pour les objets AudioTrackList, VideoTrackList et TextTrackList, cet événement se produit lorsqu’une ou plusieurs pistes sont activées/désactivées. Exécute le code JavaScript lorsqu’un événement se produit change; c’est-à-dire si le champ Select, Text ou Textarea perd sa concentration et sa valeur a été modifiée.
type – Indique le type d’événement.
target – Spécifie l’objet auquel l’événement a été envoyé à l’origine
Exécuter un JavaScript lorsque l’utilisateur modifie l’option sélectionnée d’un élément select:
<select onchange="myFunction()">
Ici, userName est un champ de texte. Si l’utilisateur modifie le texte et quitte le champ, le gestionnaire onChange appelle la fonction checkValue pour garantir que la valeur est correcte userName:
<INPUT TYPE="text" VALUE="" NAME="userName" onChange="checkValue(this.value)">
onclose – fermer quelque chose
Gestionnaire d’événements pour les événements de fermeture, envoyé à la fenêtre. L’événement OnClose se produit lorsque la boîte de dialogue est fermée. Vous pouvez créer un gestionnaire d’événements pour l’événement OnClose afin d’effectuer des actions spécifiques lorsque la boîte de dialogue se ferme. Gestionnaire d’événements close, qui est appelé sur les éléments de dialogue lorsqu’ils sont fermés, et également sur les éléments WebSocket lorsque la connexion est terminée.
oncontextmenu – ouvrir le menu contextuel
L’événement oncontextmenu se produit lorsque l’utilisateur clique avec le bouton droit sur un élément HTML pour ouvrir un menu contextuel. Propriété du gestionnaire d’événements pour l’événement de clic droit de la souris à l’intérieur de l’élément window. Si le comportement par défaut n’est pas empêché, le menu contextuel du navigateur sera activé (IE8 a un bug où le menu contextuel ne sera pas activé si le gestionnaire d’événements contextmenu est défini). L’événement aura lieu en même temps que d’autres événements right-click et ne dépend pas de l’attribut «contextmenu» de l’élément.
Exécuter JavaScript lorsque l’utilisateur clique avec le bouton droit sur div avec le menu contextuel:
<div oncontextmenu="myFunction()" contextmenu="mymenu">
Le code de cet exemple modifie le comportement par défaut du navigateur en désactivant le clic droit.
document.oncontextmenu = function () {
// Utiliser un objet "document" au lieu de "window" pour la compatibilité avec IE8.
return false;
};
window.addEventListener(
"contextmenu",
function (e) {
// Non compatible avec IE inférieur à la version 9
e.preventDefault();
},
false,
);
oncopy – copie effectuée
L’événement oncopy se produit lorsque l’utilisateur copie le contenu d’un élément. L’événement oncopy se déclenche également lorsque l’utilisateur copie un élément, tel qu’une image créée avec l’élément img. L’événement oncopy est principalement utilisé pour les éléments « input » avec type= »text ». Déclenché lors de l’insertion/copie/suppression de texte. Si vous annulez l’action du navigateur dans leurs gestionnaires, le collage/copie/suppression ne se produira pas. La valeur insérée ne peut pas être récupérée : au moment où l’événement est déclenché, l’élément a toujours l’ancienne valeur et la nouvelle n’est pas disponible.
Exécuter JavaScript lorsqu’un texte d’élément est copié input:
<input type="text" oncopy="myFunction()" value="Essayez de copier ce texte">
oncuechange – changer l’étiquette dans l’élément track
Gestionnaire de l’événement cuechange qui se déclenche lorsque l’élément TextTrack modifie les repères actuellement affichés.
oncut – suppression du contenu terminée
L’événement oncut se produit lorsque l’utilisateur coupe le contenu d’un élément. Bien que l’événement oncut soit pris en charge par tous les éléments HTML, il n’est pas réellement possible de couper le contenu, par exemple, d’un élément p, À MOINS que l’élément n’ait défini contenteditable sur « true ». L’événement oncut est principalement utilisé pour les éléments input avec type= »text ».
Exécuter JavaScript lorsqu’une partie du texte d’un élément est coupée input:
<input type="text" oncut="myFunction()" value="Essayez de raccourcir ce texte">
ondblclick – double-cliquez sur l’élément
Gestionnaire pour l’événement dblclick, qui se produit lorsque le bouton gauche de la souris est double-cliqué. L’événement ondblclick se produit lorsque l’utilisateur double-clique sur un élément HTML; c’est-à-dire lorsque l’utilisateur double-clique sur un élément de formulaire ou un lien hypertexte.
type – Indique le type d’événement.
target – Spécifie l’objet auquel l’événement a été initialement envoyé.
layerX, layerY, pageX, pageY, screenX, screenY – Représente l’emplacement du curseur lorsque l’événement se produit.
which – Représente 1 pour le clic gauche de la souris et 3 pour le clic droit de la souris.
modifiers – Contient une liste des touches de modification enfoncées lorsque l’événement s’est produit.
Exécuter JavaScript lorsque l’élément p est double-cliqué:
<p ondblclick="myFunction()">Double-cliquez sur moi</p>
Voici le dialogue alert s’affiche si l’utilisateur double-clique sur le bouton:
<form>
<INPUT Type="button" Value="Double Click Me!" onDblClick="alert('You just double clicked me!')">
</form>
ondrag – glisser-déposer l’élément
L’événement ondrag se produit lorsqu’un élément ou un texte sélectionné est déplacé. Le glisser-déposer est une fonctionnalité très courante dans HTML5. C’est lorsque vous «saisissez» un objet et le faites glisser vers un autre emplacement.
type – Indique le type d’événement.
target – Spécifie l’objet auquel l’événement a été initialement envoyé.
data – Renvoie un tableau de chaînes contenant les URL des objets publiés.
modifiers – Contient une liste de touches de modification enfoncées lorsque l’événement s’est produit.
screenX, screenY – Représente l’emplacement du curseur lorsque l’événement se produit.
Exécuter JavaScript lorsque l’élément p est déplacé:
<p draggable="true" ondrag="myFunction(event)">Traîne-moi!</p>
ondragend – glisser-déposer de l’élément terminé
L’événement ondragend se produit lorsque l’utilisateur a fini de faire glisser un élément ou de sélectionner du texte.
Exécutez un JavaScript lorsque l’utilisateur a fini de faire glisser l’élément p:
<p draggable="true" ondragend="myFunction(event)">Traîne-moi!</p>
ondragenter
– l’élément est glissé dans une zone cible valide. L’événement ondragenter se produit lorsqu’un élément glissé ou un texte sélectionné entre dans une cible de dépôt valide. Les événements ondragenter et ondragleave peuvent aider l’utilisateur à comprendre que l’élément déplacé est sur le point d’entrer ou de quitter la cible de dépôt. Cela peut être fait, par exemple, en définissant la couleur d’arrière-plan lorsque l’élément déplacé entre dans la cible de dépôt et en supprimant la couleur lorsque l’élément s’éloigne de la cible.
Exécuter JavaScript lorsqu’un élément déplaçable entre dans la cible de dépôt:
<div ondragenter="myFunction(event)"></div>
ondragexit
– quitter le mode glisser-déposer. Gestionnaire de l’événement dragexit qui se produit lorsque l’élément n’est plus la cible d’un élément qui peut l’accepter.
ondragleave
– l’élément quitte une cible valide. L’événement ondragleave se produit lorsqu’un élément glissé ou une sélection de texte quitte une cible de dépôt valide.
Exécuter JavaScript lorsqu’un élément glissé sort de la cible de dépôt:
<div ondragleave="myFunction(event)"></div>
ondragover
– l’élément est déplacé vers un point cible valide. L’événement ondragover se produit lorsqu’un élément déplaçable ou un texte sélectionné est glissé sur une cible de dépôt valide. Par défaut, les données/éléments ne peuvent pas être supprimés d’autres éléments. Pour permettre la suppression, nous devons désactiver la gestion par défaut de l’élément. Cela se fait en appelant la méthode event.preventDefault() sur l’événement ondragover.
Exécuter JavaScript lorsqu’un élément est glissé sur une cible de dépôt:
<div ondragover="myFunction(event)"></div>
ondragstart
– début de l’opération glisser-déposer. L’événement ondragstart se produit lorsque l’utilisateur commence à faire glisser un élément ou un texte sélectionné.
Exécuter JavaScript lorsque l’utilisateur commence à faire glisser l’élément p:
<p draggable="true" ondragstart="myFunction(event)">Traîne-moi!</p>
ondrop
– L’élément déplacé est relâché. L’événement ondrop se produit lorsqu’un élément glissé ou un texte sélectionné est déposé sur une cible de dépôt valide.
Exécuter JavaScript lorsqu’un élément déplaçable est déposé dans un div:
<div ondrop="myFunction(event)"></div>
ondurationchange
– changement de longueur du support. L’événement ondurationchange est déclenché lorsque la durée de l’audio/vidéo change. Lors du chargement de l’audio/vidéo, la durée passera de «NaN» à la durée réelle de l’audio/vidéo. Pendant le processus de chargement audio/vidéo, les événements suivants se produisent dans cet ordre: onloadstart, ondurationchange, onloadedmetadata, onloadeddata, onprogress, oncanplay, oncanplaythrough
Exécuter JavaScript lorsque la durée de la vidéo change:
<video ondurationchange="myFunction()">
onemptied
– Le fichier est soudainement devenu indisponible. Gestionnaire de l’événement onemptied qui se produit lorsque la liste de lecture actuelle d’un élément audio ou vidéo est vide. Le plus souvent en raison d’une panne de connexion.
onended
– Lecture terminée. L’événement onended terminé se produit lorsque l’audio/vidéo atteint la fin. Cet événement est utile pour les messages tels que «merci d’avoir écouté», «merci d’avoir regardé», etc.
Exécuter JavaScript à la fin de l’audio:
<audio onended="myFunction()">
onerror
– une erreur s’est produite. L’événement onerror est déclenché lorsqu’une erreur se produit lors du chargement d’un fichier externe (tel qu’un document ou une image). Lorsqu’il est utilisé sur des supports audio/vidéo, les événements associés qui se produisent en cas d’interruption du processus de chargement du support sont les suivants: onabort, onemptied, onstalled, onsuspend.
L’événement onerror se déclenche uniquement lorsqu’une erreur de syntaxe JavaScript ou une erreur d’exécution se produit, et non lorsqu’une erreur de navigateur se produit. Par exemple, si vous essayez de définir window.location.href=’notThere.html’ et que le fichier notThere.html n’existe pas, le message d’erreur résultant sera le message du navigateur; par conséquent, onError n’attrapera pas ce message. Cependant, l’événement error sera inclus par une URL non valide dans la balise IMG ou des données d’image non valides.
window.onerror s’applique uniquement aux erreurs qui se produisent dans la fenêtre contenant window.onerror, et non aux erreurs dans d’autres fenêtres.
onError peut avoir les valeurs suivantes:
– null pour supprimer toutes les boîtes de dialogue d’erreur JavaScript. Définition de window.onerror sur null signifie que vos utilisateurs ne verront pas les erreurs JavaScript causées par votre code.
– Le nom de la fonction qui gère les erreurs (les arguments sont le texte du message, l’URL et le numéro de ligne contenant l’erreur). Pour supprimer la boîte de dialogue d’erreur JavaScript standard, cette fonction doit renvoyer true. Voir l’exemple 3 ci-dessous.
– Une variable ou une propriété qui contient null ou une référence de fonction valide.
Si vous écrivez une fonction de gestion des erreurs, vous disposez de trois options pour signaler les erreurs :
– Suivre les erreurs, mais permettre leur signalement via une boîte de dialogue JavaScript standard (utiliser une fonction de gestion des erreurs qui renvoie false ou ne renvoie pas de valeur).
– Signaler les erreurs manuellement et désactiver la boîte de dialogue standard (utiliser la fonction de gestion des erreurs qui renvoie true).
– Désactiver tous les messages d’erreur (définir null dans le gestionnaire onError).
type – Indique le type d’événement.
target – Spécifie l’objet auquel l’événement a été envoyé à l’origine
Exécuter JavaScript si une erreur se produit lors du chargement d’une image:
<img src="image.gif" onerror="myFunction()">
Exemple 1: Gestionnaire avec valeur Null. Dans cette balise IMG, le code onError= »null » supprime les messages d’erreur si une erreur se produit lors du chargement de l’image.
<IMG NAME="imageBad1" SRC="corrupt.gif" ALIGN="left" BORDER="2" onError="null">
Exemple 2 : gestionnaire nul pour une fenêtre. Le gestionnaire onError pour une fenêtre ne peut pas être exprimé via HTML. Vous devez donc saisir tout ce qui est requis, en minuscules, dans la balise SCRIPT. Le code suivant attribue null gestionnaire onError pour la fenêtre entière, pas seulement pour l’objet Image. Cela supprime tous les messages d’erreur JavaScript, y compris les messages pour l’objet Image.
<SCRIPT> window.onerror=null </SCRIPT> <IMG NAME="imageBad1" SRC="corrupt.gif" ALIGN="left" BORDER="2">
Cependant, si l’objet Image possède son propre gestionnaire onError personnalisé, ce gestionnaire sera exécuté lorsqu’une erreur se produit avec l’image. Cela se produit parce que window.onerror=null supprime les messages d’erreur JavaScript, pas les gestionnaires onError.
<SCRIPT>
window.onerror=null
function myErrorFunc() {
alert("The image had a nasty error.")
}
</SCRIPT>
<IMG NAME="imageBad1" SRC="corrupt.gif" ALIGN="left" BORDER="2" onError="myErrorFunc()">
Dans l’exemple suivant, window.onerror=null supprime tous les messages d’erreur. Sans onerror=null, le code provoquera une erreur de dépassement de pile car il y a une récursivité infinie.
<SCRIPT>
window.onerror = null;
function testErrorFunction() {
testErrorFunction();
}
</SCRIPT>
<BODY onload="testErrorFunction()">
test message
</BODY>
Exemple 3: Fonction de gestion des erreurs. Ici est définie une fonction myOnError qui détecte les erreurs JavaScript. Cette fonction utilise trois tableaux pour stocker le message, l’URL et la chaîne incriminée pour chaque erreur. Si l’utilisateur clique sur le bouton Afficher le rapport d’erreur, la fonction displayErrors ouvre une fenêtre et crée un message d’erreur dans celle-ci. Notez que cette fonction renvoie true pour supprimer la boîte de dialogue d’erreur JavaScript standard.
<SCRIPT>
window.onerror = myOnError
msgArray = new Array()
urlArray = new Array()
lnoArray = new Array()
function myOnError(msg, url, lno) {
msgArray[msgArray.length]
= msg
urlArray[urlArray.length] = url
lnoArray[lnoArray.length]
= lno
return true
}
function displayErrors() {
win2=window.open('','window2','scrollbars=yes')
win2.document.writeln('<B>Error Report</B><P>')
for (var i=0; i < msgArray.length; i++) {
win2.document.writeln('<B>Error in file:</B> '
+ urlArray[i] + '<BR>')
win2.document.writeln('<B>Line
number:</B> ' + lnoArray[i] + '<BR>')
win2.document.writeln('<B>Message:</B> '
+ msgArray[i] + '<P>')
}
win2.document.close()
}
</SCRIPT>
<BODY onload="noSuchFunction()">
<FORM>
<BR><INPUT TYPE="button" VALUE="This button has a syntax error" onClick="alert('unterminated string')">
<P><INPUT TYPE="button" VALUE="Display Error Report" onClick="displayErrors()">
</FORM>
Cet exemple donnera la sortie:
Error Report Error in file: file:///c%7C/temp/onerror.html Line number: 34 Message: unterminated string literal Error in file: file:///c%7C/temp/onerror.html Line number: 34 Message: missing ) after argument list Error in file: file:///c%7C/temp/onerror.html Line number: 30 Message: noSuchFunction is not defined
Exemple 4 : un gestionnaire d’événements appelle une fonction. Dans la balise IMG, le gestionnaire onError appelle la fonction badImage lorsque des erreurs se produisent lors du chargement de l’image.
<SCRIPT>
function badImage(theImage) {
alert('Error: ' + theImage.name + ' did not load properly.')
}
</SCRIPT>
<FORM>
<IMG NAME="imageBad2" SRC="orca.gif" ALIGN="left" BORDER="2" onError="badImage(this)">
</FORM>
onfocus
– mettre l’accent sur un élément. Exécute le code JavaScript lorsqu’un événement se produit focus; c’est-à-dire si une fenêtre, un cadre ou un ensemble de cadres reçoit le focus, ou si un élément de formulaire reçoit le focus. L’événement onfocus se produit lorsqu’un élément reçoit le focus. L’événement onfocus est souvent utilisé dans les champs de saisie. Tous les éléments HTML SAUF: base, bdo, br, head, html, iframe, meta, param, script, style, et title
Exécuter JavaScript lorsqu’un champ de saisie reçoit le focus:
<input type="text" onfocus="myFunction()">
Ici, le gestionnaire onFocus est utilisé dans l’objet valueField Textarea pour appeler la fonction valueCheck.
<INPUT TYPE="textarea" VALUE="" NAME="valueField" onFocus="valueCheck()">
onfocusin
L’événement onfocusin se produit lorsqu’un élément reçoit le focus. L’événement onfocusin est souvent utilisé dans les champs de saisie. Tous les éléments HTML SAUF: base, bdo, br, head, html, iframe, meta, param, script, style, et title
Exécuter JavaScript lorsqu’un champ de saisie est sur le point de recevoir le focus:
<input type="text" onfocusin="myFunction()">
onfocusout
L’événement onfocusout se produit lorsqu’un élément perd le focus. L’événement onfocusout est souvent utilisé dans les champs de saisie. L’événement onfocusout est souvent utilisé lors de la validation du formulaire (lorsque l’utilisateur quitte un champ de formulaire). Tous les éléments HTML SAUF: base, bdo, br, head, html, iframe, meta, param, script, style, et title
Exécuter JavaScript lorsqu’un champ de saisie est sur le point de perdre le focus:
<input type="text" onfocusout="myFunction()">
onfullscreenchange
L’événement fullscreenchange se produit lorsqu’un élément est affiché en mode plein écran. Utilisez la méthode element.requestFullscreen() pour afficher un élément en mode plein écran. Utilisez la méthode element.exitFullscreen() pour annuler le mode plein écran. Chaque navigateur nécessite un préfixe spécifique (voir parenthèses) : 45.0 (webkit), 11.0 (ms), 47.0 (moz), 5.1 (webkit), 15.0 (webkit)
Afficher du texte lors de l’affichage d’une page en mode plein écran:
document.addEventListener("fullscreenchange", function() {
output.innerHTML = "fullscreenchange event fired!";
});
Utiliser des préfixes pour le code multi-navigateur:
/* Стандартный синтаксис */
document.addEventListener("fullscreenchange", function() {
...
});
/* Firefox */
document.addEventListener("mozfullscreenchange", function() {
...
});
/* Chrome, Safari and Opera */
document.addEventListener("webkitfullscreenchange", function() {
...
});
/* IE / Edge */
document.addEventListener("msfullscreenchange", function() {
...
});
onfullscreenerror
L’événement fullscreenerror se produit lorsqu’un élément ne peut pas être affiché en mode plein écran, même s’il a été demandé. Utilisez la méthode element.requestFullscreen() pour afficher un élément en mode plein écran. Utilisez la méthode element.exitFullscreen() pour annuler le mode plein écran.
Texte d’avertissement si l’élément ne peut pas être affiché en mode plein écran:
document.addEventListener("fullscreenerror", function() {
alert("Fullscreen denied")
});
Utiliser des préfixes pour le code multi-navigateur:
/* Стандартный синтаксис */
document.addEventListener("fullscreenerror", function() {
...
});
/* Firefox */
document.addEventListener("mozfullscreenerror", function() {
...
});
/* Chrome, Safari and Opera */
document.addEventListener("webkitfullscreenerror", function() {
...
});
/* IE / Edge */
document.addEventListener("msfullscreenerror", function() {
...
});
onhashchange
– modifier la liaison d’une partie de l’adresse. Prise en charge des balises HTML: body. L’événement onhashchange se produit lorsqu’une modification a été apportée à la partie ancre (commence par le caractère « # ») de l’URL actuelle. Un exemple de ce qu’est réellement une partie d’ancrage: disons que l’URL actuelle est http://www.example.com/test.htm#part2 – La partie d’ancrage de cette URL sera #part2.
Pour déclencher cet événement, vous pouvez:
Modifiez la partie de liaison en définissant la propriété location.hash ou location.href de l’objet Location
.
Accéder à la page actuelle avec un autre signet (utiliser les boutons Précédent ou Suivant)
Cliquez sur le lien d’ancrage du signet
Exécuter JavaScript lorsqu’une partie de la liaison a changé:
<body onhashchange="myFunction()">
Comment attribuer l’événement «onhashchange» à un objet window:
window.onhashchange = myFunction;
oninput
– début de la saisie des données. L’événement oninput se produit lorsqu’un élément reçoit une entrée utilisateur. Cet événement se produit lorsque la valeur d’un élément change input ou textarea. Cet événement est similaire à l’événement onchange. La différence est que l’événement oninput se produit immédiatement après que la valeur de l’élément change, tandis que onchange se produit lorsque l’élément perd le focus, après que le contenu a changé. Une autre différence est que l’événement onchange fonctionne également sur certains éléments. Prise en charge des balises HTML: input type= »color », input type= »date », input type= »datetime », input type= »email », input type= »month », input type= »number », input type= »password », input type= »range », input type= »search », input type= »tel », input type= »text », input type= »time », input type= »url », input type= »week » et textarea
Exécuter JavaScript lorsque l’utilisateur tape quelque chose dans le champ input:
<input type="text" oninput="myFunction()">
Curseur de plage: comment mettre à jour dynamiquement la valeur du curseur:
<input type="range" oninput="myFunction(this.value)">
oninvalid
– l’article est endommagé. L’événement oninvalid se produit lorsqu’un élément est soumis input яest inacceptable. Par exemple, un champ de saisie n’est pas valide si l’attribut required est défini et que le champ est vide (l’attribut required indique que le champ de saisie doit être rempli avant que le formulaire puisse être soumis). Prise en charge des balises HTML: input
Avertir concernant un texte si le champ de saisie n’est pas valide:
<input type="text" oninvalid="alert('Vous devez remplir le formulaire!');" required>
Texte d’avertissement si le champ de saisie contient moins de 6 caractères:
Имя: <input type="text" id="myInput" name="fname" pattern=".{6,}" required>
<script>
document.getElementById("myInput").addEventListener("invalid", myFunction);
function myFunction() {
alert("Doit contenir 6 caractères ou plus");
}
</script>
Texte d’avertissement si le champ de saisie contient un nombre inférieur à 2 ou supérieur à 5:
Номер: <input type="number" id="myInput" name="quantity" min="2" max="5" required>
<script>
document.getElementById("myInput").addEventListener("invalid", myFunction);
function myFunction() {
alert("Vous devez choisir un numéro entre 2 et 5. Vous avez choisi: " + this.value);
}
</script>
onkeydown
– la touche est enfoncée. L’événement onkeydown se produit lorsque l’utilisateur appuie sur une touche (du clavier). L’ordre des événements associés à un événement onkeydown: onkeydown, onkeypress, onkeyup. Tous les éléments HTML SAUF: base, bdo, br, head, html, iframe, meta, param, script, style, et title. L’événement KeyDown se produit toujours avant l’événement KeyPress. Si onKeyDown renvoie false, l’événement KeyPress ne se produit pas. Cela empêche les événements KeyPress d’être déclenchés pendant que l’utilisateur maintient une touche enfoncée.
type – Indique le type d’événement.
target – Spécifie l’objet auquel l’événement a été initialement envoyé.
layerX, layerY, pageX, pageY, screenX, screenY – Pour un événement de superposition, représente l’emplacement du curseur lorsque l’événement s’est produit. Pour un événement de formulaire, représente la position de l’élément de formulaire.
which – La valeur ASCII de la touche enfoncée. Pour obtenir la lettre, le chiffre ou le symbole réel de la touche enfoncée, utilisez la méthode String.fromCharCode. Pour définir cette propriété lorsque la valeur ASCII est inconnue, utilisez le String.charCodeAt.
modifiers – Contient une liste des touches de modification enfoncées lorsque l’événement s’est produit.
Exécuter JavaScript lorsque l’utilisateur appuie sur une touche:
<input type="text" onkeydown="myFunction()">
Utiliser «onkeydown» avec l’événement « onkeyup »:
<input type="text" onkeydown="keydownFunction()" onkeyup="keyupFunction()">
Ici, la fonction blockA est utilisée pour évaluer les caractères saisis au clavier dans la zone de texte textentry. Si l’utilisateur entre «a» ou «A», la fonction renvoie false et la zone de texte n’affiche pas la valeur. Dans cette fonction, la propriété which L’événement attribue la valeur ASCII de la touche appuyée par l’utilisateur à la variable keyChar. Opérateur if évalue keyChar et renvoie false pour les caractères spécifiés:
<form name="main">
<input name="textentry"
type=text size=10 maxlength=10>
</form>
<script>
function blockA(e) {
var keyChar = String.fromCharCode(e.which);
if (keyChar == 'A' || keyChar == 'a')
return false;
}
document.main.textentry.onkeydown = blockA;
</script>
onkeypress
– la touche est enfoncée puis relâchée. Exécute le code JavaScript lorsqu’un événement KeyPress se produit ; c’est-à-dire si l’utilisateur maintient la touche enfoncée. L’événement onkeypress se produit lorsque l’utilisateur appuie sur une touche (du clavier). L’événement onkeypress n’est pas déclenché pour toutes les touches (par exemple ALT, CTRL, MAJ, ÉCHAP) dans tous les navigateurs. Pour déterminer uniquement si l’utilisateur a appuyé sur une touche, utilisez plutôt l’événement onkeydown, car il fonctionne pour toutes les touches. L’ordre des événements associés à un événement onkeydown: onkeydown, onkeypress, onkeyup. Tous les éléments HTML SAUF: base, bdo, br, head, html, iframe, meta, param, script, style, et title. L’événement KeyPress se produit immédiatement après l’événement KeyDown uniquement lorsque onKeyDown renvoie autre chose que false. L’événement KeyPress se produit de manière répétée jusqu’à ce que l’utilisateur relâche la touche. Vous pouvez annuler des événements KeyPress individuels.
type – Indique le type d’événement.
target – Spécifie l’objet auquel l’événement a été initialement envoyé.
layerX, layerY, pageX, pageY, screenX, screenY – Pour un événement de superposition, représente l’emplacement du curseur lorsque l’événement s’est produit. Pour un événement de formulaire, représente la position de l’élément de formulaire.
which – La valeur ASCII de la touche enfoncée. Pour obtenir la lettre, le chiffre ou le symbole réel de la touche enfoncée, utilisez la méthode String.fromCharCode. Pour définir cette propriété lorsque la valeur ASCII est inconnue, utilisez la méthode String.charCodeAt.
modifiers – Contient une liste des touches de modification enfoncées lorsque l’événement s’est produit.
Exécuter JavaScript lorsque l’utilisateur appuie sur une touche:
<input type="text" onkeypress="myFunction()">
Ici, la méthode captureEvents capture les entrées au clavier et le gestionnaire onKeyPress appelle la fonction blockA pour vérifier les pressions sur les touches. Si les touches «a» ou «z» sont enfoncées, la fonction fait défiler la fenêtre du navigateur.
function blockA(e) {
var keyChar = String.fromCharCode(e.which);
if (keyChar == 'A' || keyChar == 'a')
self.scrollBy(10,10);
else if(keyChar == 'Z' || keyChar == 'z')
self.scrollBy(-10,-10);
else return false;
}
document.captureEvents(Event.KEYPRESS);
document.onkeypress = blockA;
onkeyup
– touche relâchée L’événement onkeyup se produit lorsque l’utilisateur relâche une touche (sur le clavier). L’ordre des événements associés à l’événement onkeydown: onkeydown, onkeypress, onkeyup. Tous les éléments HTML SAUF: base, bdo, br, head, html, iframe, meta, param, script, style, et title.
type – Indique le type d’événement.
target – Spécifie l’objet auquel l’événement a été initialement envoyé.
layerX, layerY, pageX, pageY, screenX, screenY – Pour un événement de superposition, représente l’emplacement du curseur lorsque l’événement s’est produit. Pour un événement de formulaire, représente la position de l’élément de formulaire.
which – La valeur ASCII de la touche enfoncée. Pour obtenir la lettre, le chiffre ou le symbole réel de la touche enfoncée, utilisez la méthode String.fromCharCode. Pour définir cette propriété lorsque la valeur ASCII est inconnue, utilisez le String.charCodeAt.
modifiers – Contient une liste des touches de modification enfoncées lorsque l’événement s’est produit.
Exécuter JavaScript lorsque l’utilisateur relâche la touche:
<input type="text" onkeyup="myFunction()">
Utilisez «onkeydown» avec l’événement «onkeyup»:
<input type="text" onkeydown="keydownFunction()" onkeyup="keyupFunction()">
Affichez la clé réelle qui a été émise dans le champ de texte:
Введите свое имя: <input type="text" id="fname" onkeyup="myFunction()">
<script>
function myFunction() {
var x = document.getElementById("fname").value;
document.getElementById("demo").innerHTML = x;
}
</script>
Ici, la méthode captureEvents capture la saisie au clavier et le gestionnaire onKeyUp appelle la fonction Key_Up. La méthode alert de la fonction ouvre une boîte de dialogue pour afficher la valeur de la touche enfoncée:
function Key_Up(e) {
var keyChar = String.fromCharCode(e.which);
alert("Hold '" + keyChar +"' again for me, okay?");
}
document.onkeyup=Key_Up;
document.captureEvents(Event.KEYUP);
onload
– article chargé. L’événement onload se produit lorsqu’un objet a été chargé. L’événement onload est le plus souvent utilisé dans l’élément body exécuter un script après qu’une page Web a complètement chargé tout son contenu (y compris les images, les fichiers de script, les fichiers CSS, etc.). L’événement onload peut être utilisé pour vérifier le type de navigateur et la version du navigateur du visiteur et charger la version appropriée de la page Web en fonction des informations reçues. L’événement onload peut également être utilisé pour gérer des fichiers cookie.
Le gestionnaire onLoad est utilisé dans la balise BODY ou FRAMESET, par exemple, BODY onLoad= »… ». Pour les balises FRAMESET et FRAME: l’événement du gestionnaire onLoad dans le cadre (placé dans la balise BODY) se produit avant le onLoad de la balise FRAMESET (placée dans la balise FRAMESET). Pour les images, le gestionnaire onLoad spécifie un script à exécuter lorsque l’image est affichée. Ne confondez pas la sortie d’image avec le chargement d’image. Vous pouvez télécharger plusieurs images, puis les afficher une par une dans le même objet Image en définissant la propriété src de l’objet. Si vous modifiez l’image affichée de cette manière, onLoad est exécuté à chaque fois que l’image est affichée, pas seulement lorsque les images sont chargées en mémoire.
Si vous spécifiez un gestionnaire onLoad pour un objet Image qui affiche un GIF multi-images, chaque cycle d’animation inclut le gestionnaire onLoad et le gestionnaire est exécuté une fois pour chaque cycle. Vous pouvez utiliser le gestionnaire onLoad pour créer une animation JavaScript en définissant à plusieurs reprises la propriété src d’un objet Image.
type – Indique le type d’événement.
target – Spécifie l’objet auquel l’événement a été initialement envoyé.
width, height – Pour l’événement au-dessus de la fenêtre mais pas au-dessus du calque/layer, Ces propriétés représentent la largeur et la hauteur de la fenêtre.
Exécuter JavaScript immédiatement après le chargement de la page:
<body onload="myFunction()">
En JavaScript, utilisez la méthode addEventListener():
object.addEventListener("load", myScript);
Afficher un message lors du chargement de la page. Ici, le gestionnaire onLoad affiche un message d’accueil une fois la page chargée.
<BODY onLoad="window.alert("Welcome to the Brave New World home page!")>
Afficher un message lorsqu’une image est chargée. Ici, deux objets Image sont créés : l’un par le constructeur Image et l’autre par la balise IMG. Chaque objet Image possède un gestionnaire onLoad qui appelle la fonction displayAlert pour afficher un message. Pour une image créée avec une balise IMG, la boîte de dialogue d’alerte affiche le nom de l’image. Pour une image créée par le constructeur Image, alert affiche un message sans le nom de l’image. Cela se produit parce que le gestionnaire onLoad d’un objet créé par le constructeur Image doit être un nom de fonction et il ne peut pas spécifier de paramètres pour la fonction displayAlert.
<SCRIPT>
imageA = new Image(50,50)
imageA.onload=displayAlert
imageA.src="cyanball.gif"
function displayAlert(theImage) {
if (theImage==null) {
alert('An image loaded')
}
else alert(theImage.name + ' has been loaded.')
}
</SCRIPT>
<IMG NAME="imageB" SRC="greenball.gif" ALIGN="top" onLoad=displayAlert(this)><BR>
Sortie d’animation GIF en boucle. Cela affiche l’image birdie.gif, qui est une image GIF animée. Le gestionnaire onLoad incrémente la variable cycles, qui garde une trace du nombre de cycles d’animation. Pour voir la valeur cycles, l’utilisateur clique sur le bouton Count Loops.
<SCRIPT>
var cycles=0
</SCRIPT>
<IMG ALIGN="top" SRC="birdie.gif" BORDER=0 onLoad="++cycles">
<INPUT TYPE="button" VALUE="Count Loops" onClick="alert('The animation has looped ' + cycles + ' times.')">
Modifier l’animation GIF affichée. Cet exemple utilise le gestionnaire onLoad pour faire pivoter six animations GIF. Chaque animation est présentée comme une séquence d’objets Image individuels. Lorsque le document se charge, !anim0.html s’affiche. Lorsque cette animation est terminée, le gestionnaire onLoad provoque le chargement du fichier suivant, !anim1.html, à la place du premier fichier. Une fois la dernière animation, !anim5.html, terminée, le premier fichier s’affiche à nouveau. Notez que la fonction changeAnimation ne s’appelle pas elle-même après les modifications de la propriété src de l’objet Image. Cela se produit parce que la propriété src change, le gestionnaire onLoad de l’image est déclenché et la fonction est appelée changeAnimation.
<SCRIPT>
var whichImage=0
var maxImages=5
function changeAnimation(theImage) {
++whichImage
if (whichImage <= maxImages) {
var imageName="!anim" + whichImage + ".gif"
theImage.src=imageName
} else {
whichImage=-1
return
}
}
</SCRIPT>
<IMG NAME="changingAnimation" SRC="!anim0.gif" BORDER=0 ALIGN="top" onLoad="changeAnimation(this)">
Utilisez l’événement onload pour l’élément img. Notification «Image chargée» immédiatement après le chargement de l’image:
<img src="javascriptw3.gif" onload="loadImage()" width="100" height="132">
<script>
function loadImage() {
alert("Image is loaded");
}
</script>
Utiliser l’événement onload pour traiter les fichiers cookie:
<body onload="checkCookies()">
<script>
function checkCookies() {
var text = "";
if (navigator.cookieEnabled == true) {
text = "Cookies activés.";
} else {
text = "Les cookies ne sont pas activés.";
}
document.getElementById("demo").innerHTML = text;
}
</script>
onloadeddata
– données du fichier chargées. Gestionnaire pour l’événement loadeddata, qui est déclenché lorsque l’audio/la vidéo ne peut plus être lue à la position actuelle, mais que les données multimédias continuent de se charger. L’événement onloadeddata se produit lorsque la trame multimédia est chargée, mais ne garantit pas que suffisamment de données sont disponibles pour commencer la lecture. L’événement onloadeddata se produit après onloadedmetadata et avant oncanplay.
Lors du chargement d’un média, 7 événements se produisent dans l’ordre suivant:
1. onloadstart
2. ondurationchange
3. onloadedmetadata
4. onloadeddata
5. onprogress
6. oncanplay
7. oncanplaythrough
Exécuter JavaScript lorsque les données sont disponibles pour l’image actuelle (par video):
<video onloadeddata="myFunction()">
Exécuter JavaScript lorsque les données sont disponibles pour l’image actuelle (par audio):
<audio onloadeddata="myFunction()">
onloadedmetadata
– Métadonnées du fichier chargées. Gestionnaire pour l’événement loadedmetadata qui est déclenché lorsque les métadonnées (durée, dimensions de l’image (pour la vidéo) et texte de la piste) pour le fichier audio/vidéo spécifié ont été chargées. L’événement onloadedmetadata se produit lorsque les métadonnées du média ont été chargées.
Les métadonnées pour l’audio ou la vidéo se composent de:
Durée
Dimensions (vidéo)
Pistes
Exécuter JavaScript lorsque les métadonnées de la vidéo sont chargées:
<video onloadedmetadata="myFunction()">
En Javascript:
object.onloadedmetadata = function(){myScript};
En JavaScript, utilisez la méthode addEventListener():
object.addEventListener("loadedmetadata", myScript);
onloadstart
– commencer à charger l’élément. Gestionnaire de l’événement loadstart, qui est déclenché lorsque le processus de chargement d’un fichier audio/vidéo commence.
onmessage
– un message apparaît. L’événement onmessage est déclenché lorsqu’un message est reçu via la source de l’événement. L’objet événement pour l’événement onmessage prend en charge les propriétés suivantes:
données – Contient le message réel
origin — L’URL du document qui a déclenché l’événement.
LastEventId – L’identifiant du dernier message vu dans le flux d’événements.
Événements connexes :
onopen – se produit lorsqu’une connexion au serveur est ouverte.
onerror – Se produit lorsqu’un problème survient
Créez un nouvel objet EventSource et spécifiez l’URL de la page qui envoie les mises à jour. Chaque fois qu’une mise à jour est reçue, l’événement onmessage se produit. Lorsque l’événement onmessage se produit, placez les données reçues dans un élément div avec id= »myDIV »:
var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
document.getElementById("myDIV").innerHTML += event.data + "<br>";
};
onmousedown
– le bouton de la souris est enfoncé. Gestionnaire de l’événement mousedown, qui se produit lorsque le bouton gauche de la souris est enfoncé. La différence avec l’événement onclick est que onclick est une combinaison des événements mousedown et mouseup. Exécute le code JavaScript lorsqu’un événement MouseDown se produit; c’est-à-dire lorsque l’utilisateur appuie sur un bouton de la souris. Si onMouseDown renvoie false, l’action par défaut (entrer en mode drag, entrer en mode selection ou l’activation d’un lien hypertexte) est annulée. L’activation est déclenchée par l’événement MouseDown sur l’hyperlien. Lorsqu’un lien est activé, il change de couleur pour indiquer son nouvel état. L’action par défaut varie : lancer le glissement, la sélection de texte, le défilement ou le zoom (en combinaison avec l’appui sur la molette si pris en charge)
L’événement onmousedown se produit lorsque l’utilisateur appuie sur le bouton de la souris sur un élément HTML. Ordre des événements pour les boutons gauche et central de la souris:
onmousedown
onmouseup
по клику
Ordre des événements du bouton droit de la souris:
onmousedown
onmouseup
oncontextmenu
type – Indique le type d’événement.
target – Spécifie l’objet auquel l’événement a été initialement envoyé.
layerX, layerY, pageX, pageY, screenX, screenY- L’emplacement du curseur lorsque l’événement s’est produit MouseDown.
which – Représente 1 pour le clic gauche de la souris et 3 pour le clic droit de la souris.
modifiers – Contient une liste de touches de modification qui ont été enfoncées lorsque l’événement MouseDown s’est produit.
Appeler une fonction lorsque le bouton de la souris est enfoncé sur un paragraphe:
<p onmousedown="myFunction()">Click the text!</p>
Ici, l’utilisateur peut déplacer l’image sur la page HTML en la faisant glisser avec la souris. Votre code HTML définit une image et la positionne dans un calque appelé container1. Dans le code JavaScript, les gestionnaires d’événements définissent les propriétés de positionnement de container1 lorsque l’utilisateur fait glisser l’image, créant ainsi une animation. L’attribut ID de l’élément P qui contient l’image est défini sur container1 , faisant de container1 un identifiant unique pour le paragraphe et l’image. La balise STYLE crée un calque pour container1 et le positionne. Le code JavaScript ci-dessous définit les gestionnaires onMouseDown, onMouseUp et onMouseMove. Utiliser des feuilles de style/style sheets, l’image est initialement définie et positionnée comme suit:
<HEAD>
<STYLE type="text/css">
#container1 {
position:absolute; left:200; top:200}
</STYLE>
</HEAD>
<BODY>
<P ID="container1">
<img src="backgrnd.gif" name="myImage" width=96 height=96>
</P>
</BODY>
Dans ce code, la méthode captureEvents capture les événements MouseUp et MouseDown. Les fonctions DRAG_begindrag et DRAG_enddrag sont appelées respectivement pour gérer ces événements. Si l’utilisateur appuie sur le bouton gauche de la souris, la fonction DRAG_begindrag démarre, capturant les événements MouseMove et indiquant à la fonction DRAG_drag de les gérer. Il attribue ensuite la valeur de la propriété pageX de l’événement MouseDown à la propriété DRAG_lastX, la valeur de la propriété pageY à la propriété DRAG_lastY et true à la propriété DRAG_dragging. La fonction DRAG_drag évalue DRAG_dragging pour s’assurer que l’événement MouseMove a été capturé par la fonction DRAG_begindrag, puis utilise la méthode moveBy pour positionner l’objet et attribue des valeurs aux propriétés DRAG_lastX et DRAG_lastY. Lorsque l’utilisateur relâche le bouton gauche de la souris, la fonction DRAG_enddrag arrête de capturer les événements MouseMove. DRAG_enddrag garantit ensuite qu’aucune autre fonction n’est appelée en définissant onmousemove sur Null et DRAG_dragging sur false.
<SCRIPT>
container1.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);
container1.onmousedown=DRAG_begindrag;
container1.onmouseup=DRAG_enddrag;
var DRAG_lastX, DRAG_lastY, DRAG_dragging;
function DRAG_begindrag(e) {
if (e.which == 1) {
window.captureEvents(Event.MOUSEMOVE);
window.onmousemove=DRAG_drag;
DRAG_lastX=e.pageX;
DRAG_lastY=e.pageY;
DRAG_dragging=true;
return false;
}
else {
/*Voici quelques travaux sur la gestion du clic droit de la souris*/
return true;
}
}
function DRAG_enddrag(e) {
if (e.which == 1) {
window.releaseEvents(Event.MOUSEMOVE);
window.onmousemove=null
DRAG_dragging=false;
return false;
}
else {
/*Voici quelques travaux sur la gestion du clic droit de la souris*/
return true;
}
}
function DRAG_drag(e) {
if (DRAG_dragging) {
/*Cette fonction est appelée uniquement si elle est capturée MOUSEMOVE*/
moveBy(e.pageX-DRAG_lastX, e.pageY-DRAG_lastY);
DRAG_lastX = e.pageX;
DRAG_lastY = e.pageY;
return false;
}
else {
return true;
}
}
</SCRIPT>
onmouseenter
– le pointeur de la souris survole l’élément. Gestionnaire de l’événement mouseenter, qui se produit lorsque le curseur de la souris entre dans la zone de l’élément. Contrairement au survol de la souris, l’événement mouseenter ne se propage pas, c’est-à-dire qu’il ne se produit pas si le curseur de la souris entre dans un élément enfant de l’élément spécifié. L’événement onmouseenter se produit lorsque le pointeur de la souris entre dans un élément. L’événement onmouseenter est souvent utilisé avec l’événement onmouseleave, qui se produit lorsque le pointeur de la souris quitte un élément. L’événement onmouseenter est similaire à l’événement onmouseover. La différence est que l’événement onmouseenter ne se propage pas (ne se propage pas dans la hiérarchie du document).
Un événement mouseenter est envoyé à chaque élément de la hiérarchie lorsqu’ils sont saisis. Ici, 4 événements sont envoyés à 4 éléments de la hiérarchie lorsque le pointeur atteint le texte. Un seul événement de survol de la souris est envoyé à l’élément le plus profond de l’arborescence DOM, puis remonte la hiérarchie jusqu’à ce qu’il soit annulé par un gestionnaire ou atteigne la racine. Avec une hiérarchie profonde, le nombre d’événements de survol de souris envoyés peut être assez important et entraîner des problèmes de performances importants. Dans de tels cas, il est préférable de gérer les événements mouseenter. Lorsqu’il est combiné avec l’événement mouseleave correspondant (qui se déclenche sur un élément lorsque la souris quitte la zone de contenu), l’événement mouseenter agit de manière très similaire à la pseudo-classe CSS :hover.
Appeler une fonction lorsque le pointeur de la souris survole une image:
<img onmouseenter="bigImg(this)" src="smiley.gif" alt="Smiley">
JavaScript:
object.onmouseenter = function(){myScript};
JavaScript, using the addEventListener() method:
object.addEventListener("mouseenter", myScript);
Cet exemple démontre la différence entre les événements onmousemove, onmouseenter et mouseover:
<div onmousemove="myMoveFunction()"> <p id="demo1">I will demonstrate onmousemove!</p> </div> <div onmouseenter="myEnterFunction()"> <p id="demo2">I will demonstrate onmouseenter!</p> </div> <div onmouseover="myOverFunction()"> <p id="demo3">I will demonstrate onmouseover!</p> </div>
L’exemple trivial suivant utilise l’événement mouseenter pour modifier la bordure d’un élément div lorsque la souris entre dans l’espace qui lui est alloué. Il ajoute ensuite l’élément à la liste lors de l’événement mouseenter ou mouseleave.
<SCRIPT>
var enterEventCount = 0;
var leaveEventCount = 0;
const mouseTarget = document.getElementById("mouseTarget");
const unorderedList = document.getElementById("unorderedList");
mouseTarget.addEventListener("mouseenter", (e) => {
mouseTarget.style.border = "5px dotted orange";
enterEventCount++;
addListItem("This is mouseenter event " + enterEventCount + ".");
});
mouseTarget.addEventListener("mouseleave", (e) => {
mouseTarget.style.border = "1px solid #333";
leaveEventCount++;
addListItem("This is mouseleave event " + leaveEventCount + ".");
});
function addListItem(text) {
// Créez un nouveau nœud de texte en utilisant le texte fourni
var newTextNode = document.createTextNode(text);
// Créer un nouvel élément li
var newListItem = document.createElement("li");
// Ajouter un nœud de texte à un élément li
newListItem.appendChild(newTextNode);
// Ajouter l'élément de liste nouvellement créé à la liste
unorderedList.appendChild(newListItem);
}
<SCRIPT>
<style>
#mouseTarget {
box-sizing: border-box;
width: 15rem;
border: 1px solid #333;
}
</style>
<div id="mouseTarget">
<ul id="unorderedList">
<li>No events yet!</li>
</ul>
</div>
onmouseleave
– le pointeur de la souris a quitté l’élément. Gestionnaire de l’événement mouseleave qui se produit lorsque le curseur de la souris quitte la zone de l’élément. Contrairement à mouseout, l’événement mouseenter ne bouillonne pas, c’est-à-dire qu’il ne se produit pas si le curseur de la souris entre dans un élément enfant de l’élément spécifié. L’événement onmouseleave se produit lorsque le pointeur de la souris quitte un élément. L’événement onmouseleave est souvent utilisé avec l’événement onmouseenter, qui se produit lorsque le pointeur de la souris entre dans un élément. L’événement onmouseleave est similaire à l’événement onmouseout. La différence est que l’événement onmouseleave ne se propage pas (ne se propage pas dans la hiérarchie du document).
L’événement mouseleave est déclenché lorsque le curseur du manipulateur (généralement la souris) se déplace en dehors des limites d’un élément. mouseleave et mouseout sont similaires, mais diffèrent en ce que mouseleave ne flotte pas, tandis que mouseout le fait. Cela signifie que mouseleave se déclenche lorsque le curseur quitte les limites de l’élément et de tous ses éléments enfants, tandis que mouseout se déclenche lorsque le curseur quitte les limites de l’élément ou de l’un de ses éléments enfants (même si le curseur est toujours dans l’élément).
Appeler une fonction lorsque le pointeur de la souris se déplace en dehors de l’image:
<img onmouseleave="normalImg(this)" src="smiley.gif" alt="Smiley">
JavaScript:
object.onmouseleave = function(){myScript};
JavaScript, using the addEventListener() method:
object.addEventListener("mouseleave", myScript);
Cet exemple démontre la différence entre les événements onmousemove, onmouseleave et onmouseout:
<div onmousemove="myMoveFunction()"> <p id="demo1">I will demonstrate onmousemove!</p> </div> <div onmouseleave="myLeaveFunction()"> <p id="demo2">I will demonstrate onmouseleave!</p> </div> <div onmouseout="myOutFunction()"> <p id="demo3">I will demonstrate onmouseout!</p> </div>
La documentation mouseout contient un exemple illustrant la différence entre mouseout et mouseleave. L’exemple suivant montre comment utiliser mouseout pour imiter le principe de délégation d’événement mouseleave.
<ul id="test">
<li>
<ul class="leave-sensitive">
<li>item 1-1</li>
<li>item 1-2</li>
</ul>
</li>
<li>
<ul class="leave-sensitive">
<li>item 2-1</li>
<li>item 2-2</li>
</ul>
</li>
</ul>
<script>
var delegationSelector = ".leave-sensitive";
document.getElementById("test").addEventListener(
"mouseout",
function (event) {
var target = event.target,
related = event.relatedTarget,
match;
// search for a parent node matching the delegation selector
while (
target &&
target != document &&
!(match = matches(target, delegationSelector))
) {
target = target.parentNode;
}
// exit if no matching node has been found
if (!match) {
return;
}
// loop through the parent of the related target to make sure that it's not a child of the target
while (related && related != target && related != document) {
related = related.parentNode;
}
// exit if this is the case
if (related == target) {
return;
}
// the "delegated mouseleave" handler can now be executed
// change the color of the text
target.style.color = "orange";
// reset the color after a small amount of time
setTimeout(function () {
target.style.color = "";
}, 500);
},
false,
);
// function used to check if a DOM element matches a given selector
// the following code can be replaced by this IE8 compatible function: https://gist.github.com/2851541
function matches(elem, selector) {
// the matchesSelector is prefixed in most (if not all) browsers
return elem.matchesSelector(selector);
}
</script>
onmousemove
– le pointeur de la souris est déplacé sur l’élément. Gestionnaire de l’événement mousemove qui se produit lorsque le pointeur de la souris se déplace sur un élément.
type – Indique le type d’événement.
target – Spécifie l’objet auquel l’événement a été initialement envoyé.
layerX, layerY, pageX, pageY, screenX, screenY – L’emplacement du curseur lorsque l’événement s’est produit MouseMove.
JavaScript:
object.onmousemove = function(){myScript};
JavaScript, using the addEventListener() method:
object.addEventListener("mousemove", myScript);
Appeler une fonction lorsque la souris survole un élément div:
<div onmousemove="myFunction()">Move the cursor over me</div>
L’exemple suivant utilise les événements mousedown, mousemove et mouseup pour permettre à l’utilisateur de dessiner sur un canevas HTML. Son fonctionnement est simple: l’épaisseur de la ligne est fixée à 1 et la couleur est toujours noire. Lorsque la page se charge, les constantes myPics et context sont créées pour stocker une référence au canevas et au contexte 2D que nous utiliserons pour le dessin. Le dessin commence lorsque l’événement mousedown est déclenché. Nous stockons d’abord les coordonnées x et y du pointeur de la souris dans les variables x et y, puis nous définissons isDrawing sur true. Lorsque le pointeur de la souris se déplace sur la page, l’événement mousemove est déclenché. Si isDrawing est vrai, le gestionnaire d’événements appelle la fonction drawLine pour tracer une ligne à partir des valeurs x et y stockées jusqu’à l’emplacement actuel. Lorsque la fonction drawLine() revient, nous ajustons les coordonnées puis les stockons dans les coordonnées x et y. L’événement mouseup dessine le dernier segment de ligne, définit x et y sur 0 et arrête le dessin ultérieur en définissant isDrawing sur false.
<script>
// When true, moving the mouse draws on the canvas
let isDrawing = false;
let x = 0;
let y = 0;
const myPics = document.getElementById("myPics");
const context = myPics.getContext("2d");
// event.offsetX, event.offsetY gives the (x,y) offset from the edge of the canvas.
// Add the event listeners for mousedown, mousemove, and mouseup
myPics.addEventListener("mousedown", (e) => {
x = e.offsetX;
y = e.offsetY;
isDrawing = true;
});
myPics.addEventListener("mousemove", (e) => {
if (isDrawing) {
drawLine(context, x, y, e.offsetX, e.offsetY);
x = e.offsetX;
y = e.offsetY;
}
});
window.addEventListener("mouseup", (e) => {
if (isDrawing) {
drawLine(context, x, y, e.offsetX, e.offsetY);
x = 0;
y = 0;
isDrawing = false;
}
});
function drawLine(context, x1, y1, x2, y2) {
context.beginPath();
context.strokeStyle = "black";
context.lineWidth = 1;
context.moveTo(x1, y1);
context.lineTo(x2, y2);
context.stroke();
context.closePath();
}
</script>
<style>
canvas {
border: 1px solid black;
width: 560px;
height: 360px;
}
</style>
<h1>Drawing with mouse events</h1>
<canvas id="myPics" width="560" height="360"></canvas>
onmouseout
– le pointeur de la souris s’éloigne de l’élément. Gestionnaire de l’événement mouseout qui se produit lorsque le pointeur de la souris quitte l’élément. Exécute le code JavaScript lorsqu’un événement MouseOut se produit; c’est-à-dire chaque fois que le pointeur de la souris sort de la zone (dans l’image cliquable du client) ou du lien hypertexte. Si le pointeur de la souris se déplace d’une zone de la carte d’image client à une autre, vous recevrez d’abord onMouseOut pour la première zone, puis onMouseOver pour la deuxième zone. Les balises de zone qui utilisent onMouseOut doivent avoir un attribut HREF dans la balise AREA. Vous devez renvoyer true dans le gestionnaire d’événements si vous souhaitez définir les propriétés status ou defaultStatus à l’aide de onMouseOver.
Voir aussi... Les scientifiques nourrissent de grands espoirs concernant les grottes lunaires Étude des organes sensoriels en conditions de microgravité: méthodes et résultats en 2026 |
L’événement onmouseout se produit lorsque le pointeur de la souris quitte les limites d’un élément. L’événement onmouseout est souvent utilisé en conjonction avec l’événement onmouseover, qui se produit lorsque le pointeur survole un élément. L’événement onmouseout est similaire à l’événement onmouseleave. La différence est que l’événement onmouseleave ne se propage pas (ne se propage pas dans la hiérarchie du document).
type – Indique le type d’événement.
target – Spécifie l’objet auquel l’événement a été initialement envoyé.
layerX, layerY, pageX, pageY, screenX, screenY – L’emplacement du curseur lorsque l’événement MouseOut se produit
Appeler une fonction lorsque le pointeur de la souris se déplace en dehors de l’image:
<img onmouseout="normalImg(this)" src="smiley.gif" alt="Smiley">
L’exemple suivant illustre la différence entre les événements mouseout et mouseleave. Un événement mouseleave est ajouté à l’ul pour colorer la liste en violet chaque fois que la souris quitte l’ul. mouseout est ajouté à la liste pour colorer l’élément cible en orange lorsque la souris le quitte. Lorsque vous essayez ceci, vous constaterez que mouseout est transmis aux éléments de liste individuels, tandis que mouseleave est transmis à la liste entière, grâce à la hiérarchie des éléments et au fait que les éléments de la liste masquent l’ul sous-jacent.
<script>
const test = document.getElementById("test");
// Briefly make the list purple when the mouse moves off the
// <ul> element
test.addEventListener(
"mouseleave",
(event) => {
// highlight the mouseleave target
event.target.style.color = "purple";
// reset the color after a short delay
setTimeout(() => {
event.target.style.color = "";
}, 1000);
},
false,
);
// Briefly make an <li> orange when the mouse moves off of it
test.addEventListener(
"mouseout",
(event) => {
// highlight the mouseout target
event.target.style.color = "orange";
// reset the color after a short delay
setTimeout(() => {
event.target.style.color = "";
}, 500);
},
false,
);
</script>
<ul id="test">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
onmouseover
– le pointeur de la souris se déplace sur l’élément. Gestionnaire pour l’événement mouseover, qui se produit lorsque le curseur de la souris survole un élément. L’événement onmouseover se produit lorsque le pointeur de la souris entre dans un élément. L’événement onmouseover est souvent utilisé en conjonction avec l’événement onmouseout, qui se produit lorsque le pointeur de la souris quitte un élément. L’événement onmouseover est similaire à l’événement onmouseenter. La différence est que l’événement onmouseenter ne se propage pas (ne se propage pas dans la hiérarchie du document). L’événement mouseover est déclenché sur un élément lorsqu’un périphérique de pointage (tel qu’une souris ou un pavé tactile) est utilisé pour déplacer le curseur sur l’élément ou l’un de ses éléments enfants.
Appeler une fonction lorsque le pointeur de la souris survole une image:
<img onmouseover="bigImg(this)" src="smiley.gif" alt="Smiley">
Par défaut, la valeur HREF d’une ancre s’affiche dans la barre d’état en bas du navigateur lorsque l’utilisateur passe le pointeur de la souris sur l’ancre. Dans l’exemple suivant, onMouseOver affiche un message personnalisé « Click this if you dare. »
<A HREF="http://home.netscape.com/" onMouseOver="window.status='Click this if you dare!'; return true">Click me</A>
onmouseup
– le bouton de la souris est relâché sur l’élément. Gestionnaire de l’événement mouseup qui se produit lorsque le bouton de la souris est relâché sur un élément. Si onMouseUp renvoie false, l’action par défaut est annulée. Par exemple, si onMouseUp renvoie false lorsqu’un lien hypertexte est actif, le lien n’est pas activé. Ainsi, si MouseUp se produit lorsque le lien hypertexte n’est pas actif (éventuellement lorsque onMouseDown renvoie false), le lien n’est pas activé. L’activation est déclenchée par l’événement MouseDown sur le lien. Lorsqu’un lien est actif, il change de couleur pour refléter le nouvel état. L’événement onmouseup se produit lorsque le bouton de la souris est relâché sur un élément.
L’événement mouseup est déclenché sur un élément lorsqu’un bouton d’un périphérique de pointage (tel qu’une souris ou un trackpad) est relâché alors que le pointeur est à l’intérieur. Les événements mouseup sont l’opposé des événements mousedown.
Ordre des événements pour les boutons gauche et central de la souris:
onmousedown
onmouseup
по клику
Ordre des événements du bouton droit de la souris:
onmousedown
onmouseup
oncontextmenu
type – Indique le type d’événement.
target – Spécifie l’objet auquel l’événement a été initialement envoyé.
layerX, layerY, pageX, pageY, screenX, screenY – L’emplacement du curseur lorsque l’événement s’est produit MouseUp.
which -Représente 1 pour le bouton gauche de la souris et 3 pour le bouton droit de la souris.
modifiers – Contient une liste de touches de modification qui ont été enfoncées lorsque l’événement MouseUp s’est produit.
Appeler une fonction lorsque le bouton de la souris est relâché sur un paragraphe:
<p onmouseup="mouseUp()">Click the text!</p>
onmousewheel (onwheel)
– molette de la souris utilisée. Gestionnaire d’événements wheel, qui se produit lorsque la molette de la souris est déplacée vers l’avant ou vers l’arrière sur un élément. L’événement onwheel se produit lorsque la molette de la souris survole un élément. L’événement onwheel se produit également lorsque l’utilisateur fait défiler une page à l’aide d’un pavé tactile. Cet événement remplace l’événement de molette de souris hérité non standard. Ne confondez pas l’événement de roue avec l’événement de défilement. L’événement wheel ne déclenche pas nécessairement un événement scroll. Par exemple, un élément peut ne pas être du tout défilable. Les actions de zoom utilisant la molette ou le pavé tactile déclenchent également des événements de molette. L’événement de défilement n’est pas nécessairement déclenché par l’événement de roue. Les éléments peuvent également être parcourus à l’aide du clavier, en faisant glisser la barre de défilement ou en utilisant JavaScript.
Même si un événement de roue déclenche le défilement, les valeurs delta* dans l’événement de roue ne reflètent pas nécessairement la direction dans laquelle le contenu défile. Par conséquent, ne vous fiez pas aux propriétés delta* de l’événement wheel pour obtenir la direction de défilement. Au lieu de cela, détectez les modifications apportées aux valeurs ScrollLeft et ScrollTop de la cible dans l’événement de défilement.
L’événement Wheel peut être annulé. Si l’événement est annulé, aucun défilement ni zoom ne se produit. Cela peut entraîner des problèmes de performances car le navigateur doit attendre que chaque événement de roue soit traité avant de faire défiler réellement le contenu. Cela peut être évité en définissant passive: true lors de l’appel de addEventListener(), ce qui peut amener le navigateur à générer des événements de roue non annulables.
Lorsqu’un utilisateur fait défiler la molette de sa souris sur un div, modifiez sa taille de police:
document.getElementById("myDIV").addEventListener("wheel", myFunction);
function myFunction() {
this.style.fontSize = "35px";
}
Cet exemple montre comment mettre à l’échelle un élément à l’aide de la molette de la souris (ou d’un autre périphérique de pointage).
<script>
function zoom(event) {
event.preventDefault();
scale += event.deltaY * -0.01;
// Restrict scale
scale = Math.min(Math.max(0.125, scale), 4);
// Apply scale transform
el.style.transform = `scale(${scale})`;
}
let scale = 1;
const el = document.querySelector("div");
el.onwheel = zoom;
</script>
<style>
body {
min-height: 100vh;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
div {
width: 105px;
height: 105px;
background: #cdf;
padding: 5px;
}
</style>
<div>Scale me with your mouse wheel.</div>
onoffline
– Le navigateur fonctionne en mode hors ligne. L’événement onoffline se produit lorsque le navigateur commence à fonctionner hors ligne. L’événement onoffline est l’opposé de l’événement ononline.
Appeler une fonction lorsque le navigateur est hors ligne:
<body onoffline="myFunction()">
ononline
– Le navigateur est lancé en mode en ligne. L’événement ononline se produit lorsque le navigateur se connecte. L’événement en ligne est l’opposé de l’événement hors ligne.
Appeler une fonction lorsque le navigateur est en ligne:
<body ononline="myFunction()">
onpagehide
– l’utilisateur quitte la page. L’événement onpagehide se produit lorsque l’utilisateur quitte une page Web. Il existe plusieurs façons de quitter la page. Par exemple. cliquer sur un lien, actualiser la page, soumettre un formulaire, fermer la fenêtre du navigateur, etc. L’événement onpagehide est parfois utilisé à la place de l’événement onunload, car l’événement onunload empêche la page d’être mise en cache. Pour savoir si une page est chargée directement depuis le serveur ou mise en cache, vous pouvez utiliser la propriété persisted Objet PageTransitionEvent. Cette propriété renvoie true si la page est mise en cache par le navigateur, et false dans le cas contraire.
Appeler une fonction lorsque l’utilisateur quitte la page Web:
<body onpagehide="myFunction()">
onpageshow
– l’utilisateur accède à la page. L’événement onpageshow se produit lorsqu’un utilisateur accède à une page Web. L’événement onpageshow est similaire à l’événement onload, sauf qu’il se produit après l’événement onload lors du premier chargement de la page. De plus, l’événement onpageshow se déclenche à chaque fois que la page est chargée, tandis que l’événement onload ne se déclenche pas lors du chargement de la page à partir du cache.Pour savoir si une page a été chargée directement depuis le serveur ou mise en cache, vous pouvez utiliser la propriété persisted de l’objet PageTransitionEvent. Cette propriété renvoie true si la page est mise en cache par le navigateur, et false sinon
Appeler une fonction lorsque l’utilisateur accède à une page Web:
<body onpageshow="myFunction()">
onpaste
– insertion de contenu terminée. L’événement onpaste se produit lorsque l’utilisateur colle du contenu dans un élément. L’événement onpaste est le plus souvent utilisé pour les éléments input avec type= »text ». L’événement de collage de l’API Presse-papiers est déclenché lorsque l’utilisateur lance une action de collage via l’interface utilisateur du navigateur. Si le curseur se trouve dans un contexte modifiable (tel qu’une zone de texte ou un élément avec l’attribut contenteditable défini sur true), l’action par défaut consiste à coller le contenu du presse-papiers dans le document à la position du curseur. Le gestionnaire de cet événement peut accéder au contenu du presse-papiers en appelant la méthode getData() sur la propriété clipboardData de l’événement. Pour remplacer le comportement par défaut (par exemple, pour coller des données différentes ou transformer le contenu du presse-papiers), le gestionnaire d’événements doit annuler l’action par défaut avec event.preventDefault(), puis coller les données souhaitées manuellement. Vous pouvez créer et envoyer un événement de collage synthétique, mais cela n’affectera pas le contenu du document. Cet événement apparaît, il peut être annulé et il est composé. Utilisé uniquement pour les champs de saisie.
Appeler une fonction lorsque du texte est inséré dans un élément input:
<input type="text" onpaste="myFunction()" value="Paste something here">
Appelez une fonction lorsque du texte est inséré dans l’élément p. (Notez que contenteditable est défini sur «true»):
<p contenteditable="true" onpaste="myFunction()">Try to paste something inside this paragraph.</p>
Exemple
<script>
const target = document.querySelector("div.target");
target.addEventListener("paste", (event) => {
event.preventDefault();
let paste = (event.clipboardData || window.clipboardData).getData("text");
paste = paste.toUpperCase();
const selection = window.getSelection();
if (!selection.rangeCount) return;
selection.deleteFromDocument();
selection.getRangeAt(0).insertNode(document.createTextNode(paste));
selection.collapseToEnd();
});
<script>
<div class="source" contenteditable="true">Copy text from this box.</div>
<div class="target" contenteditable="true">And paste it into this one.</div>
onpause
– mettre la lecture en pause. Gestionnaire de l’événement onpause, qui se produit lorsque la lecture audio/vidéo est interrompue par l’utilisateur ou par programmation. L’événement onpause se produit lorsque l’audio/la vidéo est mis en pause. L’événement onpause se produit également lorsque l’audio/vidéo a atteint la fin.
Appeler une fonction lorsque la vidéo est en pause:
<video onpause="myFunction()">
onplay
– démarrer la lecture. Gestionnaire de l’événement onplay, qui est déclenché lorsque la lecture d’un fichier audio/vidéo a commencé.
Appeler une fonction lorsque la lecture de la vidéo commence:
<video onplay="myFunction()">
onplaying
– lecture de fichiers. Gestionnaire pour l’événement onplaying, qui est déclenché lorsque la lecture d’un fichier audio/vidéo a commencé. L’événement onplaying se produit lorsque la lecture audio/vidéo commence. L’événement onplaying se produit également lorsque l’audio/la vidéo reprend après avoir été mis en pause ou mis en mémoire tampon.
Appeler la fonction au démarrage de la vidéo:
<video onplaying="myFunction()">
onprogress
– obtenir les métadonnées du fichier. Gestionnaire de l’événement onprogress qui se produit lorsque le fichier audio/vidéo spécifié est chargé à partir du serveur. L’événement onprogress se produit lorsque le navigateur charge de l’audio ou de la vidéo.
Appeler la fonction lors du chargement de la vidéo:
<video onprogress="myFunction()">
onratechange
– modifier la vitesse de lecture. Gestionnaire de l’événement onratechange, qui est déclenché lorsque la vitesse de lecture audio/vidéo change (par exemple, lorsque l’utilisateur passe en mode de lecture lente ou rapide). L’événement onratechange se produit lorsque la vitesse de lecture du média change (par exemple, lorsque l’utilisateur passe en mode de lecture lente ou rapide). Cet événement est déclenché par la propriété de lecture Rate de l’objet Audio/Vidéo, qui définit ou renvoie la vitesse de lecture audio/vidéo actuelle.
Appeler une fonction lorsque la vitesse de lecture de la vidéo change:
<video onratechange="myFunction()">
onreset
– Réinitialisation des données terminée. Gestionnaire de l’événement onreset qui se produit lorsque le formulaire est effacé, ce qui se produit lorsque le bouton Reset est cliqué. Exécute le code JavaScript lorsque l’événement onreset se produit; c’est-à-dire lorsque l’utilisateur restaure les valeurs des éléments du formulaire (en cliquant sur le bouton Reset).
Appeler une fonction lorsque le formulaire est réinitialisé:
<form onreset="myFunction()"> Enter name: <input type="text"> <input type="reset"> </form>
L’exemple suivant affiche un objet Texte avec une valeur par défaut de «CA» et un bouton «Reset». Si l’utilisateur entre une abréviation d’état dans l’objet Texte et clique sur le bouton «Reset», la valeur d’origine de «CA» est restaurée. Le gestionnaire onReset du formulaire affiche un message indiquant que les valeurs par défaut ont été restaurées.
<FORM NAME="form1" onReset="alert('Defaults have been restored.')">
State:
<INPUT TYPE="text" NAME="state" VALUE="CA" SIZE="2"><P>
<INPUT TYPE="reset" VALUE="Clear Form" NAME="reset1">
</FORM>
onresize
– redimensionner un élément. Exécute le code JavaScript lorsque l’événement onresize se produit; c’est-à-dire lorsque l’utilisateur ou le script a modifié la taille de la fenêtre ou du cadre. L’événement onresize se produit lorsque la fenêtre du navigateur a été redimensionnée. Astuce: Pour obtenir la taille d’un élément, utilisez les propriétés clientWidth, clientHeight, InnerWidth, InnerHeight, OuterWidth, OuterHeight, OffsetWidth et/ou OffsetHeight. Ce gestionnaire est envoyé une fois le rendu HTML avec les nouvelles dimensions de la fenêtre intérieure terminé. Cela permet aux éléments et aux ancres nommées d’être positionnés de manière à ce qu’ils aient les dimensions et emplacements finaux demandés, les propriétés SRC de l’image peuvent être restaurées dynamiquement, etc.
Appeler une fonction lorsque la fenêtre du navigateur est redimensionnée:
<body onresize="myFunction()">
Utilisation de la méthode addEventListener() pour attacher un événement «redimensionnement» à l’objet fenêtre.
window.addEventListener("resize", myFunction);
Ici, la fonction open_now crée la fenêtre myWin et capture les événements onResize. Le gestionnaire onResize appelle la fonction alert_me, qui affiche un message si l’utilisateur redimensionne la fenêtre myWin.
function open_now(){
var myWin;
myWin=window.open("","displayWin","width=400,height=300,resizable=yes,
menubar=no,location=no,alwaysRaised=yes");
var text="<html><head><title>Test</title></head>"
+"<body bgcolor=white><h1>Please resize me</h1></body>"
+"</html>";
myWin.document.write(text);
myWin.captureEvents(Event.RESIZE);
myWin.onresize=alert_me;
}
function alert_me(){
alert("You resized me! \nNow my outer width: " + this.outerWidth +
"\n and my outer height: " +this.outerHeight);
this.focus();
}
onscroll
– faire défiler le contenu d’un élément. L’événement onscroll se produit lorsque la barre de défilement d’un élément défile. Astuce : utilisez la propriété de style de débordement CSS pour créer une barre de défilement pour un élément. L’événement de défilement est déclenché lorsqu’un élément défile. Pour déterminer quand le défilement est terminé, observez l’événement de défilement de l’élément.
Appeler une fonction lorsqu’un élément div défile:
<div onscroll="myFunction()">
Basculez entre les noms de classe à différentes positions de défilement. Lorsque l’utilisateur fait défiler la page de 50 px vers le bas, le nom de classe «test» est ajouté à l’élément (et supprimé lorsque l’utilisateur fait défiler la page vers le haut).
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
document.getElementById("myP").className = "test";
} else {
document.getElementById("myP").className = "";
}
}
Insérer un élément lorsque l’utilisateur a fait défiler la page de 350 px (ajouter la classe slideUp):
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
document.getElementById("myImg").className = "slideUp";
}
}
L’exemple suivant montre comment utiliser l’événement de défilement pour détecter quand l’utilisateur fait défiler un élément:
<script>
const element = document.querySelector("div#scroll-box");
const output = document.querySelector("p#output");
element.addEventListener("scroll", (event) => {
output.textContent = "Scroll event fired!";
setTimeout(() => {
output.textContent = "Waiting on scroll events...";
}, 1000);
});
</script>
<div id="scroll-box" style="overflow: scroll; height: 100px; width: 100px; float: left;">
<p style="height: 200px; width: 200px;">Scroll me!</p>
</div>
<p style="text-align: center;" id="output">Waiting on scroll events...</p>
L’exemple suivant montre comment utiliser la propriété du gestionnaire d’événements onscroll pour détecter le moment où l’utilisateur fait défiler:
<script>
const element = document.querySelector("div#scroll-box");
const output = document.querySelector("p#output");
element.onscroll = (event) => {
output.textContent = "Element scroll event fired!";
setTimeout(() => {
output.textContent = "Waiting on scroll events...";
}, 1000);
};
</script>
<div id="scroll-box" style="overflow: scroll; height: 100px; width: 100px; float: left;">
<p style="height: 200px; width: 200px;">Scroll me!</p>
</div>
<p id="output" style="text-align: center;">Waiting on scroll events...</p>
onsearch
– recherche terminée. L’événement onsearch se produit lorsque l’utilisateur appuie sur la touche ENTRÉE ou sur le bouton x sur un élément input avec type= »search ».
Appel d’une fonction lorsqu’une recherche est soumise:
<input type="search" onsearch="myFunction()">
onseeked
– la recherche est terminée. Gestionnaire pour l’événement onseeked, qui est déclenché lorsque l’utilisateur a terminé de se déplacer vers une nouvelle position de lecture audio/vidéo. L’événement onseeked se produit lorsque l’utilisateur recherche une nouvelle position dans les médias.
Appeler une fonction lorsque l’utilisateur recherche une nouvelle position dans la vidéo:
<video onseeked="myFunction()">
Cet exemple démontre la différence entre l’événement onseeking et l’événement onseeked:
<video onseeking="myFunction()" onseeked="mySecondFunction()">
Utilisation de la propriété currentTime d’un objet vidéo pour afficher la position actuelle pendant la lecture lorsque l’utilisateur a terminé de se déplacer/d’avancer vers une nouvelle position:
// Get the video element:
const video = document.getElementById("myVideo");
// Attach a seeked event to the video element:
video.addEventListener("seeked", myFunction);
// Function to display the time position of the playback:
function myFunction() {
document.getElementById("demo").innerHTML = video.currentTime;
}
onseeking
– la recherche est active. Gestionnaire de l’événement onseeking, qui se produit lorsque l’utilisateur commence à naviguer vers une nouvelle position de lecture audio/vidéo. L’événement de recherche se produit lorsque l’utilisateur commence à rechercher une nouvelle position dans les médias.
Appeler une fonction lorsque l’utilisateur commence à se déplacer/se déplacer vers une nouvelle position dans la vidéo:
<video onseeking="myFunction()">
onselect
– sélection d’un texte ou d’une valeur. Un gestionnaire d’événements onselect qui se produit lorsque l’utilisateur sélectionne du texte à l’intérieur d’un élément à l’aide de la souris ou du clavier. L’événement onselect se produit après la sélection d’un texte dans un élément. L’événement onselect est le plus souvent utilisé pour les éléments de type input= »text » ou textarea.
Voir aussi... |
Ici, onSelect est utilisé dans l’objet texte valueField pour appeler la fonction selectState.
<INPUT TYPE="text" VALUE="" NAME="valueField" onSelect="selectState()">
Appeler une fonction lorsqu’un texte est sélectionné:
<input type="text" onselect="myFunction()">
En utilisant la méthode select() saisissez un objet texte HTML DOM pour sélectionner le contenu d’un champ de texte. Lorsque cela se produit, l’événement onselect est déclenché, ce qui déclenche la fonction d’alerte.
// Select the contents of a text field
function mySelectFunction() {
document.getElementById("myText").select();
}
// Alert some text when the text in the text field has been selected
function myAlertFunction() {
alert("You selected some text!");
}
onshow
– affichage des articles. Gestionnaire de l’événement onshow qui se produit lorsque l’élément de menu est affiché sous forme de menu contextuel. L’événement onshow se produit lorsqu’un élément de menu est affiché sous forme de menu contextuel.
Appeler une fonction lorsque l’élément de menu est affiché sous forme de menu contextuel:
<div contextmenu="mymenu">
<p>Right-click inside this box to see the context menu!
<menu type="context" id="mymenu" onshow="myFunction()">
<menuitem label="Refresh" onclick="window.location.reload();"></menuitem>
</menu>
</div>
onstalled
– Le navigateur ne peut pas récupérer les données multimédias pour quelque raison que ce soit. Gestionnaire pour l’événement onstalled, qui se produit lorsque le navigateur tente de récupérer des données multimédias mais qu’elles ne sont pas disponibles. L’événement onstalled se produit lorsque le navigateur tente de récupérer un média qui n’est pas disponible.
Appeler une fonction lorsque le navigateur tente d’obtenir un média indisponible:
<video onstalled="myFunction()">
onsubmit
– confirmation de la soumission des données du formulaire. Gestionnaire de l’événement onsubmit qui se produit lorsque le formulaire est soumis. Exécute le code JavaScript lorsque l’événement onsubmit se produit; c’est-à-dire lorsque l’utilisateur soumet le formulaire au serveur. Vous pouvez utiliser onSubmit pour empêcher la soumission du formulaire; Pour ce faire, placez une instruction de retour qui renvoie false dans ce gestionnaire d’événements. Toutes autres valeurs permettent de soumettre le formulaire. En l’absence d’opérateur return le formulaire sera soumis.
Ici, onSubmit appelle la fonction validate pour calculer les données envoyées. Si les données sont correctes, le formulaire est soumis; sinon le formulaire n’est pas envoyé.
<FORM onSubmit="return validate(this)"> ... </FORM>
Appel d’une fonction lors de la soumission d’un formulaire:
<form onsubmit="myFunction()"> Enter name: <input type="text"> <input type="submit"> </form>
onsuspend
– Arrêt de l’extraction des métadonnées. Gestionnaire de l’événement onsuspend, qui est déclenché lorsque le téléchargement des données du fichier multimédia est interrompu avant qu’elles ne soient complètement chargées pour une raison quelconque. L’événement onsuspend se produit lorsque le navigateur ne reçoit pas de données multimédias. L’événement onsuspend se produit lorsqu’un téléchargement est empêché ou suspendu.
Appeler une fonction lorsque le navigateur ne reçoit pas de média:
<video onsuspend="myFunction()">
ontimeupdate
– modifier la position (temps) de lecture du fichier, c’est-à-dire rembobiner le fichier. Gestionnaire de l’événement ontimeupdate, qui est déclenché lorsque la position de lecture audio/vidéo a changé (par exemple, lorsque l’utilisateur a sélectionné une position de lecture beaucoup plus éloignée de la position actuelle). L’événement ontimeupdate se produit lorsque l’heure de lecture du média change. L’événement ontimeupdate se produit pendant la lecture multimédia. L’événement ontimeupdate se produit lorsque l’utilisateur déplace la position de lecture.
Appeler une fonction lorsque le temps de lecture a changé:
<video ontimeupdate="myFunction()">
Utilisation de la propriété currentTime pour définir la position de lecture actuelle sur 5 secondes:
document.getElementById("myVideo").currentTime = 5;
ontoggle
– l’utilisateur ouvre ou ferme l’élément details Gestionnaire de l’événement ontoggle, qui se produit lorsque l’utilisateur ouvre ou ferme l’élément details. L’élément details spécifie des informations supplémentaires que l’utilisateur peut afficher ou masquer sur demande.
Appeler une fonction lorsque l’élément est ouvert ou fermé details:
<details ontoggle="myFunction()">
onunload
– le téléchargement est terminé, après quoi le document est fermé. L’événement onunload se produit après le déchargement de la page (ou la fermeture de la fenêtre du navigateur). onunload se produit lorsque l’utilisateur quitte la page (en cliquant sur un lien, en soumettant un formulaire, en fermant la fenêtre du navigateur, etc.). Note. L’événement onunload est également déclenché lorsque l’utilisateur recharge la page (et l’événement onload). Utilisez onUnload avec les balises BODY ou FRAMESET, par exemple CORPS onUnload= »… ». En ce qui concerne les cadres et les ensembles de cadres, le gestionnaire onUnload d’un cadre (placé dans la balise BODY) apparaît avant que le gestionnaire onUnload d’un ensemble de cadres (placé dans la balise FRAMESET) n’apparaisse.
Appeler une fonction lorsque l’utilisateur télécharge un document:
<body onunload="myFunction()">
Ici, onUnload appelle la fonction cleanUp pour effectuer un traitement à la fin du travail lorsque l’utilisateur quitte la page (la ferme):
<BODY onUnload="cleanUp()">
onvolumechange
– le volume a changé. Gestionnaire pour l’événement onvolumechange, qui est déclenché lorsque la valeur du volume d’un son change (y compris en le coupant complètement). L’événement onvolumechange se produit lorsqu’un volume de stockage change. L’événement onvolumechange se produit lorsque le volume augmente ou diminue. L’événement onvolumechange se produit lorsque le volume est coupé ou activé.
Appeler une fonction lorsque le volume de la vidéo change:
<video onvolumechange="myFunction()">
Utiliser la propriété Volume pour régler le volume:
document.getElementById("myVideo").volume = 0.2;
onwaiting
– En attente de reprise de la lecture. Gestionnaire de l’événement onwaiting, qui se produit lorsque le fichier multimédia s’est arrêté mais devrait reprendre sa lecture (par exemple, lorsque le fichier s’arrête pour mettre en mémoire tampon les données restantes). L’événement onwaiting se produit lorsque le média doit attendre la trame suivante.
Appelez une fonction lorsque la vidéo s’arrête car l’image suivante doit être mise en mémoire tampon:
<video onwaiting="myFunction()">
Related Posts
Liste complète des attributs HTML globaux avec exemples
Des attributs globaux peuvent être spécifiés pour n’importe quel élément…
Métadonnées HTML avec exemples et contenu HEAD
La balise méta contient des métadonnées sur le document HTML.…
Méthodes pushState() et replaceState() pour ajouter et modifier des entrées d’historique en combinaison avec l’événement onpopstate
pushState() vous permet de modifier le référent utilisé dans l’en-tête…
