\u2013 cliquez sur l’\u00e9l\u00e9ment ; se produit lorsqu’un \u00e9l\u00e9ment est cliqu\u00e9 avec le bouton gauche de la souris (sur les appareils \u00e0 \u00e9cran tactile, cela se produit lors du toucher).<\/p>\n
![](\"https:\/\/planeta21vek.ru\/elina732\/wp-content\/uploads\/2024\/11\/sobytiya251124.jpg\")
<\/p>\n
Options d’enregistrement contextuelles<\/p>\n
\r\n<input value="\u041d\u0430\u0436\u043c\u0438 \u043c\u0435\u043d\u044f" onclick="alert('\u041a\u043b\u0438\u043a!')" type="button">\r\n<a href="#" onclick="alert('L'exemple 1 a fonctionn\u00e9'); return false;">L'exemple 1<\/a>\r\n<\/pre>\nS\u00e9quence de nombres commen\u00e7ant \u00e0 1<\/p>\n
\r\n<script>\r\n function countRabbits() {\r\n for(let i=1; i<=3; i++) {\r\n alert("Num\u00e9ro de lapin " + i);\r\n }\r\n }\r\n<\/script>\r\n<input type="button" onclick="countRabbits()" value="Compter les lapins!">\r\n<input id="elem" type="button" value="Presse-moi!">\r\n<script>\r\n elem.onclick = function() {\r\n alert('Merci');\r\n };\r\n<\/script>\r\n<input type="button" id="button" value="Bouton">\r\n<script>\r\n button.onclick = function() {\r\n alert('Klik!');\r\n };\r\n<\/script>\r\n<\/pre>\nAffiche le contenu du bouton \u00abCliquez sur moi\u00bb dans une fen\u00eatre contextuelle<\/p>\n
\r\n<button onclick="alert(this.innerHTML)">Presse-moi<\/button>\r\n<\/pre>\nPlusieurs gestionnaires d’\u00e9v\u00e9nements contextuels<\/p>\n
\r\n<input id="elem" type="button" value="Presse-moi"\/>\r\n<script>\r\n function handler1() {\r\n alert('Merci!');\r\n };\r\n function handler2() {\r\n alert('Merci encore!');\r\n }\r\n elem.onclick = () => alert("Bonjour");\r\n elem.addEventListener("click", handler1); \/\/ Merci!\r\n elem.addEventListener("click", handler2); \/\/ Merci encore!\r\n<\/script>\r\n<\/pre>\nObtenir les coordonn\u00e9es de la souris \u00e0 partir d’un objet \u00e9v\u00e9nement<\/p>\n
\r\n<input type="button" value="Presse-moi" id="elem">\r\n<script>\r\n elem.onclick = function(event) {\r\n \/\/ type d'\u00e9v\u00e9nement de sortie, \u00e9l\u00e9ment et coordonn\u00e9es de clic\r\n alert(event.type + " \u043d\u0430 " + event.currentTarget);\r\n alert("Coordonn\u00e9es: " + event.clientX + ":" + event.clientY);\r\n };\r\n<\/script>\r\n<\/pre>\nChanger l’arri\u00e8re-plan d’un objet<\/p>\n
\r\n<button>Change color<\/button>\r\n<script>\r\nconst btn = document.querySelector("button");\r\nfunction random(number) {\r\n return Math.floor(Math.random() * (number + 1));\r\n}\r\nbtn.onclick = function () {\r\n const rndCol =\r\n "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";\r\n document.body.style.backgroundColor = rndCol;\r\n};\r\n<\/script>\r\n<button onclick="bgChange()">Press me<\/button>\r\n<script>\r\nfunction bgChange() {\r\n const rndCol =\r\n "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";\r\n document.body.style.backgroundColor = rndCol;\r\n}\r\n<\/script>\r\n<\/pre>\nChanger l’arri\u00e8re-plan d’un \u00e9l\u00e9ment div<\/p>\n
\r\n<div id='myDiv'>\u00c9l\u00e9ment de changement de couleur<\/div>\r\n<button onclick='changeColor()'>Changer de couleur<\/button>\r\n<script>\r\nfunction changeColor() {\r\n document.getElementById('myDiv').style.backgroundColor = 'red';\r\n}\r\n<\/script>\r\n<\/pre>\nChanger la couleur du lien<\/p>\n
\r\n<script>\r\nfunction ChangeColor(Element) {\r\n\tif (Element.style.color == 'green') Element.style.color = 'red';\r\n\telse Element.style.color = 'green';\r\n\treturn false;\r\n}\r\n<\/script>\r\n<a href="#" style="color: green;" onclick="return ChangeColor(this);">Changer de couleur<\/a>\r\n<\/pre>\nValidation du formulaire<\/p>\n
\r\n<form>\r\n <div>\r\n <label for="fname">Nom: <\/label>\r\n <input id="fname" type="text" \/>\r\n <\/div>\r\n <div>\r\n <label for="lname">Nom de famille: <\/label>\r\n <input id="lname" type="text" \/>\r\n <\/div>\r\n <div>\r\n <input id="submit" type="submit" \/>\r\n <\/div>\r\n<\/form>\r\n<p><\/p>\r\n<script>\r\nvar form = document.querySelector("form");\r\nvar fname = document.getElementById("fname");\r\nvar lname = document.getElementById("lname");\r\nvar submit = document.getElementById("submit");\r\nvar para = document.querySelector("p");\r\n\r\nform.onsubmit = function (e) {\r\n if (fname.value === "" || lname.value === "") {\r\n e.preventDefault();\r\n para.textContent = "Les deux champs doivent \u00eatre remplis!";\r\n }\r\n};\r\n<\/script>\r\n<\/pre>\nInterception des \u00e9v\u00e9nements CSS dans la vid\u00e9o avec la fonction stopPropagation(), qui, lorsqu’elle est appel\u00e9e dans le gestionnaire d’\u00e9v\u00e9nements d’un objet, provoque l’ex\u00e9cution du gestionnaire mais l’\u00e9v\u00e9nement ne remonte pas plus haut dans la cha\u00eene<\/p>\n
\r\n<button>Display video<\/button>\r\n<div class="hidden">\r\n <video>\r\n <source src="rabbit320.mp4" type="video\/mp4" \/>\r\n <source src="rabbit320.webm" type="video\/webm" \/>\r\n <p>\r\n Your browser doesn't support HTML5 video. Here is a\r\n <a href="rabbit320.mp4">link to the video<\/a> instead.\r\n <\/p>\r\n <\/video>\r\n<\/div>\r\ndiv { position: absolute;\r\n top: 50%;\r\n transform: translate(-50%,-50%);\r\n ... }\r\n.hidden {\r\n left: -50%;\r\n }\r\n.showing {\r\n left: 50%;\r\n }\r\n<script>\r\nvar videoBox = document.querySelector("div");\r\nvar video = document.querySelector("video");\r\nvideoBox.onclick = function () {\r\n videoBox.setAttribute("class", "hidden");\r\n};\r\nvideo.onclick = function () {\r\n video.play();\r\n};\r\nvideo.onclick = function (e) {\r\n e.stopPropagation();\r\n video.play();\r\n};\r\n<\/script>\r\n<p style="text-align: justify;">Afficher et masquer le texte<\/p>\r\n<button onclick='toggleVisibility()'>Afficher\/Masquer<\/button>\r\n<div id='hiddenDiv' style='display:none'>Texte masqu\u00e9<\/div>\r\n<script>\r\nfunction toggleVisibility() {\r\n let element = document.getElementById('hiddenDiv');\r\n if (element.style.display === 'none') {\r\n element.style.display = 'block';\r\n } else {\r\n element.style.display = 'none';\r\n }\r\n}\r\n<\/script>\r\n<\/pre>\nChargement de donn\u00e9es via AJAX, pour charger des donn\u00e9es depuis le serveur sans recharger la page<\/p>\n
\r\nfunction fetchData() {\r\n \/\/ Voici votre code pour la requ\u00eate AJAX\r\n}\r\n<onclick="fetchData()">T\u00e9l\u00e9charger les donn\u00e9es<\/button>\r\n<\/pre>\nChanger le nom du lien de On \u00e0 Off<\/p>\n
\r\n<script>\r\n\/\/nous attendons que la page soit compl\u00e8tement charg\u00e9e\r\nwindow.onload = function () {\r\n\r\n \/\/obtenir l'identifiant de l'\u00e9l\u00e9ment\r\n var a = document.getElementById('switch');\r\n \r\n \/\/nous y accrochons un \u00e9v\u00e9nement\r\n a.onclick = function() {\r\n \/\/nous effectuons certaines actions\r\n if (this.innerHTML=='On') this.innerHTML = 'Off';\r\n else this.innerHTML = 'On';\r\n \/\/Emp\u00eacher les clics sur les liens href\r\n return false;\r\n }\r\n}\r\n<\/script>\r\n<a id="switch" href="#">On<\/a>\r\n<\/pre>\nonabort<\/span><\/h2>\n\u2013 interruption de la lecture. L’\u00e9v\u00e9nement onabort se produit lorsque le chargement de l’audio ou de la vid\u00e9o est interrompu. L’\u00e9v\u00e9nement onabort se produit uniquement lorsqu’un t\u00e9l\u00e9chargement est interrompu, et non lorsqu’une erreur se produit. S’applique aux \u00e9l\u00e9ments audio, embed, img, object, video.<\/p>\n
Notification indiquant que le t\u00e9l\u00e9chargement de la vid\u00e9o a \u00e9t\u00e9 interrompu<\/p>\n
\r\n<video id="myVideo" onabort="alert('Video load aborted')">\r\n<\/pre>\nAlerte indiquant que le chargement de l’image a \u00e9t\u00e9 interrompu<\/p>\n
\r\n<img id="myImage" src="example.jpg" onabort="imageAborted()">\r\n<script>\r\n function imageAborted() {\r\n alert("Image load was aborted by the user.");\r\n }\r\n<\/script>\r\n<\/pre>\nNotification indiquant que la soumission du formulaire a \u00e9t\u00e9 interrompue<\/p>\n
\r\n<form id="myForm">\r\n <input type="text" placeholder="Enter your name">\r\n <input type="submit" value="Submit">\r\n<\/form>\r\n<script>\r\n var form = document.getElementById("myForm");\r\n form.addEventListener("abort", formAborted);\r\n\r\n function formAborted() {\r\n alert("Form submission was aborted by the user.");\r\n }\r\n<\/script>\r\n<\/pre>\nonafterprint \u2013 impression termin\u00e9e<\/span><\/h2>\nL’\u00e9v\u00e9nement onafterprint se produit lorsqu’une page commence \u00e0 s’imprimer. L’\u00e9v\u00e9nement onafterprint se produit lorsque la bo\u00eete de dialogue d’impression se ferme. Le navigateur s’ex\u00e9cute sur afterprint et onbeforeprint afin que des notes, des explications et des commentaires puissent \u00eatre ajout\u00e9s au processus d’impression. Applicable pour body.<\/p>\n
\r\n<body onafterprint="myFunction()">\r\n<\/pre>\nonautocomplete \u2013 formulaire de remplissage automatique compl\u00e9t\u00e9<\/span><\/h2>\nUn attribut qui vous permet de remplir un formulaire en un clic – le navigateur ins\u00e9rera des valeurs dans les champs correspondants.<\/p>\n
\r\n<form>\r\n <label for="name">Nom:<\/label>\r\n <input type="text" id="name" name="name" autocomplete="on">\r\n<\/form>\r\n<\/pre>\nonautocompleteerror \u2013 erreur lors du remplissage automatique du formulaire<\/span><\/h2>\nonbeforeprint \u2013 pr\u00e9paration \u00e0 l’impression<\/span><\/h2>\nonbeforeunload – document t\u00e9l\u00e9charg\u00e9<\/span><\/h2>\nLorsqu’un utilisateur quitte une page, nous pouvons lui demander s’il souhaite vraiment partir. La gestion des \u00e9v\u00e9nements beforeunload est responsable de cela. L’\u00e9v\u00e9nement se produit avant l’\u00e9v\u00e9nement de d\u00e9chargement de la page unload. Cet \u00e9v\u00e9nement permet \u00e0 une page Web de d\u00e9clencher une bo\u00eete de dialogue de confirmation demandant \u00e0 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\u00e9cification, pour afficher une bo\u00eete de dialogue de confirmation, le gestionnaire d’\u00e9v\u00e9nements doit appeler preventDefault() sur l’\u00e9v\u00e9nement. Applicable pour body.<\/p>\n
\r\n<body onbeforeunload="return myFunction()">\r\n<script>\r\nfunction myFunction() {\r\n return "\u00cates-vous s\u00fbr de vouloir fermer cette page?...";\r\n}\r\n<\/script>\r\n<\/pre>\nonblur \u2013 perte de concentration<\/span><\/h2>\nL’\u00e9v\u00e9nement de focus est appel\u00e9 au moment de la mise au point, et blur \u2013 lorsque l’\u00e9l\u00e9ment perd le focus. soutien focus\/blur garanti pour les \u00e9l\u00e9ments avec lesquels le visiteur peut interagir: button, input, select, a etc. D’autre part, les \u00e9l\u00e9ments de formatage div, span, table \u2013 ne peut pas recevoir le focus par d\u00e9faut. La m\u00e9thode elem.focus() ne fonctionne pas pour eux, et les \u00e9v\u00e9nements focus\/blur ne travaille jamais. Cela peut \u00eatre modifi\u00e9 avec un attribut HTML tabindex.<\/p>\n
Validation (v\u00e9rification) des donn\u00e9es saisies avec l’inscription sous le formulaire<\/p>\n
\r\n<style>\r\n .invalid { border-color: red; }\r\n #error { color: red }\r\n<\/style>\r\n<script>\r\ninput.onblur = function() {\r\n if (!input.value.includes('@')) { \/\/ \u043d\u0435 email\r\n input.classList.add('invalid');\r\n error.innerHTML = 'Veuillez saisir une adresse e-mail valide.'\r\n }\r\n};\r\ninput.onfocus = function() {\r\n if (this.classList.contains('invalid')) {\r\n \/\/ nous supprimons l'indicateur d'erreur, car l'utilisateur souhaite ressaisir les donn\u00e9es\r\n this.classList.remove('invalid');\r\n error.innerHTML = "";\r\n }\r\n};\r\n<\/script>\r\n\u0412\u0430\u0448 email: <input type="email" id="input">\r\n<div id="error"><\/div>\r\n<\/pre>\nValidation (v\u00e9rification) des donn\u00e9es saisies avec remplissage en couleur du formulaire<\/p>\n
\r\n<style>\r\n .error {\r\n background: red;\r\n }\r\n<\/style>\r\n<script>\r\n input.onblur = function() {\r\n if (!this.value.includes('@')) { \/\/ pas d'e-mail\r\n \/\/ afficher l'erreur\r\n this.classList.add("error");\r\n \/\/ ...et revenez au focus\r\n input.focus();\r\n } else {\r\n this.classList.remove("error");\r\n }\r\n };\r\n<\/script>\r\nVotre email: <input type="email" id="input">\r\n<input type="text" style="width:280px" placeholder="entrez une adresse e-mail invalide et cliquez ici">\r\n<\/pre>\nModification du texte du formulaire CLICK HERE<\/p>\n
\r\n<input type="text" value="CLICK HERE" \/>\r\n<script>\r\nlet input = document.querySelector("input");\r\ninput.onblur = inputBlur;\r\ninput.onfocus = inputFocus;\r\nfunction inputBlur() {\r\n input.value = "Focus has been lost";\r\n}\r\nfunction inputFocus() {\r\n input.value = "Focus is here";\r\n}\r\n<\/script>\r\n<\/pre>\nV\u00e9rification de la forme avec un contour de cadre<\/p>\n
\r\n<!DOCTYPE html>\r\n<html lang="ru">\r\n <head>\r\n <meta charset="utf-8">\r\n <title>\u00c9v\u00e9nement onblur<\/title>\r\n <style>\r\n .warning {\r\n background-color: #ffe;\r\n outline: 1px solid #dc143c;\r\n }\r\n <\/style>\r\n <script>\r\n function warning(field) {\r\n if (field.value == '') field.classList.add('warning');\r\n else field.classList.remove('warning');\r\n }\r\n <\/script>\r\n <\/head> \r\n <body>\r\n <form> \r\n <p><input placeholder="Nom" onblur="warning(this)"><\/p>\r\n <p><input placeholder="Nom de famille" onblur="warning(this)"><\/p>\r\n <p><input placeholder="Adresse" onblur="warning(this)"><\/p>\r\n <\/form>\r\n <\/body>\r\n<\/html>\r\n<\/pre>\n\u00c9clairage de mise au point sans onblur<\/p>\n
\r\n<style>\r\n*!*input:focus*\/!* {\r\n background: #FA6;\r\n outline: none; \/* supprimer le cadre *\/\r\n}\r\n<\/style>\r\n<input type="text">\r\n<p>S\u00e9lecteur focus mettra en \u00e9vidence l'\u00e9l\u00e9ment lorsque vous vous concentrez dessus et supprimera la bordure que le navigateur utilise pour mettre en \u00e9vidence l'\u00e9l\u00e9ment par d\u00e9faut.<\/p>\r\n<\/pre>\nEspace r\u00e9serv\u00e9 – une valeur d’indice \u00e0 l’int\u00e9rieur de INPUT qui dispara\u00eet automatiquement lorsqu’elle est focalis\u00e9e et existe jusqu’\u00e0 ce que le visiteur commence \u00e0 taper, sans onblur<\/p>\n
\r\n<style>\r\n.my*!*::-webkit-input-placeholder*\/!* {\r\n color: red;\r\n font-style: italic;\r\n}\r\n.my*!*::-moz-input-placeholder*\/!* {\r\n color: red;\r\n font-style: italic;\r\n}\r\n.my*!*::-ms-input-placeholder*\/!* {\r\n color: red;\r\n font-style: italic;\r\n}\r\n<\/style>\r\n<input class="my" type="text" placeholder="E-mail">\r\n<\/pre>\noncancel \u2013 annuler l’action<\/span><\/h2>\nAnnuler l’op\u00e9ration en cours sur l’appareil. Utilis\u00e9 pour le contr\u00f4le asynchrone de l’appareil. Si vous ex\u00e9cutez cette fonction avant le d\u00e9but d\u2019une op\u00e9ration, l\u2019op\u00e9ration sera annul\u00e9e.<\/p>\n
\r\nDevice.Cancel ();\r\n<\/pre>\noncanplay<\/span><\/h2>\n– vous pouvez commencer \u00e0 lire le fichier multim\u00e9dia sp\u00e9cifi\u00e9<\/p>\n
L’\u00e9v\u00e9nement oncanplay se produit lorsque le navigateur peut commencer \u00e0 lire l’audio\/vid\u00e9o sp\u00e9cifi\u00e9 (lorsqu’il est suffisamment mis en m\u00e9moire tampon pour d\u00e9marrer). Pendant le processus de chargement audio\/vid\u00e9o, les \u00e9v\u00e9nements suivants se produisent dans cet ordre: onloadstart, ondurationchange, onloadedmetadata, onloadeddata, onprogress, oncanplay, oncanplaythrough<\/p>\n
Ex\u00e9cutez JavaScript lorsque la vid\u00e9o est pr\u00eate \u00e0 \u00eatre lue:<\/p>\n
\r\n<video oncanplay="myFunction()">\r\n<\/pre>\noncanplaythrough<\/span><\/h2>\n– Vous pouvez d\u00e9marrer la lecture du fichier multim\u00e9dia sp\u00e9cifi\u00e9 sans avoir \u00e0 l’arr\u00eater pour la mise en m\u00e9moire tampon. L’\u00e9v\u00e9nement oncanplaythrough se produit lorsque le navigateur \u00e9value qu’il peut lire le m\u00e9dia sp\u00e9cifi\u00e9 sans avoir \u00e0 s’arr\u00eater pour la mise en m\u00e9moire tampon.<\/p>\n
Ex\u00e9cuter JavaScript lorsque la vid\u00e9o peut \u00eatre lue dans son int\u00e9gralit\u00e9 sans pause:<\/p>\n
\r\n<video oncanplaythrough="myFunction()">\r\n<\/pre>\nonchange \u2013 changer la valeur<\/span><\/h2>\nL’\u00e9v\u00e9nement onchange se produit lorsque la valeur d’un \u00e9l\u00e9ment a chang\u00e9. Pour les boutons radio et les cases \u00e0 cocher, l’\u00e9v\u00e9nement onchange se produit lorsque l’\u00e9tat change checked. Cet \u00e9v\u00e9nement est similaire \u00e0 l’\u00e9v\u00e9nement oninput. La diff\u00e9rence est que l’\u00e9v\u00e9nement oninput se produit imm\u00e9diatement apr\u00e8s que la valeur de l’\u00e9l\u00e9ment change, tandis que onchange se produit lorsque l’\u00e9l\u00e9ment perd le focus, apr\u00e8s que le contenu a chang\u00e9. Une autre diff\u00e9rence est que l’\u00e9v\u00e9nement onchange fonctionne \u00e9galement sur l’\u00e9l\u00e9ment select. Un gestionnaire d’\u00e9v\u00e9nements onchange qui se d\u00e9clenche lorsque la valeur de l’\u00e9l\u00e9ment a chang\u00e9 et qu’il perd le focus. Pour les objets AudioTrackList, VideoTrackList et TextTrackList, cet \u00e9v\u00e9nement se produit lorsqu’une ou plusieurs pistes sont activ\u00e9es\/d\u00e9sactiv\u00e9es. Ex\u00e9cute le code JavaScript lorsqu’un \u00e9v\u00e9nement se produit change; c’est-\u00e0-dire si le champ Select, Text ou Textarea perd sa concentration et sa valeur a \u00e9t\u00e9 modifi\u00e9e.<\/p>\n
type – Indique le type d’\u00e9v\u00e9nement.
\ntarget – Sp\u00e9cifie l’objet auquel l’\u00e9v\u00e9nement a \u00e9t\u00e9 envoy\u00e9 \u00e0 l’origine<\/p>\n
Ex\u00e9cuter un JavaScript lorsque l’utilisateur modifie l’option s\u00e9lectionn\u00e9e d’un \u00e9l\u00e9ment select:<\/p>\n
\r\n<select onchange="myFunction()">\r\n<\/pre>\nIci, 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:<\/p>\n
\r\n<INPUT TYPE="text" VALUE="" NAME="userName" onChange="checkValue(this.value)">\r\n<\/pre>\nonclose \u2013 fermer quelque chose<\/span><\/h2>\nGestionnaire d’\u00e9v\u00e9nements pour les \u00e9v\u00e9nements de fermeture, envoy\u00e9 \u00e0 la fen\u00eatre. L’\u00e9v\u00e9nement OnClose se produit lorsque la bo\u00eete de dialogue est ferm\u00e9e. Vous pouvez cr\u00e9er un gestionnaire d\u2019\u00e9v\u00e9nements pour l\u2019\u00e9v\u00e9nement OnClose afin d\u2019effectuer des actions sp\u00e9cifiques lorsque la bo\u00eete de dialogue se ferme. Gestionnaire d’\u00e9v\u00e9nements close, qui est appel\u00e9 sur les \u00e9l\u00e9ments de dialogue lorsqu’ils sont ferm\u00e9s, et \u00e9galement sur les \u00e9l\u00e9ments WebSocket lorsque la connexion est termin\u00e9e.<\/p>\n
oncontextmenu \u2013 ouvrir le menu contextuel<\/span><\/h2>\nL’\u00e9v\u00e9nement oncontextmenu se produit lorsque l’utilisateur clique avec le bouton droit sur un \u00e9l\u00e9ment HTML pour ouvrir un menu contextuel. Propri\u00e9t\u00e9 du gestionnaire d’\u00e9v\u00e9nements pour l’\u00e9v\u00e9nement de clic droit de la souris \u00e0 l’int\u00e9rieur de l’\u00e9l\u00e9ment window. Si le comportement par d\u00e9faut n’est pas emp\u00each\u00e9, le menu contextuel du navigateur sera activ\u00e9 (IE8 a un bug o\u00f9 le menu contextuel ne sera pas activ\u00e9 si le gestionnaire d’\u00e9v\u00e9nements contextmenu est d\u00e9fini). L’\u00e9v\u00e9nement aura lieu en m\u00eame temps que d’autres \u00e9v\u00e9nements right-click et ne d\u00e9pend pas de l’attribut \u00abcontextmenu\u00bb de l’\u00e9l\u00e9ment.<\/p>\n
Ex\u00e9cuter JavaScript lorsque l’utilisateur clique avec le bouton droit sur div avec le menu contextuel:<\/p>\n
\r\n<div oncontextmenu="myFunction()" contextmenu="mymenu">\r\n<\/pre>\nLe code de cet exemple modifie le comportement par d\u00e9faut du navigateur en d\u00e9sactivant le clic droit.<\/p>\n
\r\ndocument.oncontextmenu = function () {\r\n \/\/ Utiliser un objet "document" au lieu de "window" pour la compatibilit\u00e9 avec IE8.\r\n return false;\r\n};\r\nwindow.addEventListener(\r\n "contextmenu",\r\n function (e) {\r\n \/\/ Non compatible avec IE inf\u00e9rieur \u00e0 la version 9\r\n e.preventDefault();\r\n },\r\n false,\r\n);\r\n<\/pre>\noncopy \u2013 copie effectu\u00e9e<\/span><\/h2>\nL’\u00e9v\u00e9nement oncopy se produit lorsque l’utilisateur copie le contenu d’un \u00e9l\u00e9ment. L’\u00e9v\u00e9nement oncopy se d\u00e9clenche \u00e9galement lorsque l’utilisateur copie un \u00e9l\u00e9ment, tel qu’une image cr\u00e9\u00e9e avec l’\u00e9l\u00e9ment img. L’\u00e9v\u00e9nement oncopy est principalement utilis\u00e9 pour les \u00e9l\u00e9ments \u00ab\u00a0input\u00a0\u00bb avec type=\u00a0\u00bbtext\u00a0\u00bb. D\u00e9clench\u00e9 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\u00e9r\u00e9e ne peut pas \u00eatre r\u00e9cup\u00e9r\u00e9e : au moment o\u00f9 l\u2019\u00e9v\u00e9nement est d\u00e9clench\u00e9, l\u2019\u00e9l\u00e9ment a toujours l\u2019ancienne valeur et la nouvelle n\u2019est pas disponible.<\/p>\n
Ex\u00e9cuter JavaScript lorsqu’un texte d’\u00e9l\u00e9ment est copi\u00e9 input:<\/p>\n
\r\n<input type="text" oncopy="myFunction()" value="Essayez de copier ce texte">\r\n<\/pre>\noncuechange – changer l’\u00e9tiquette dans l’\u00e9l\u00e9ment track<\/span><\/h2>\nGestionnaire de l’\u00e9v\u00e9nement cuechange qui se d\u00e9clenche lorsque l’\u00e9l\u00e9ment TextTrack modifie les rep\u00e8res actuellement affich\u00e9s.<\/p>\n
oncut \u2013 suppression du contenu termin\u00e9e<\/span><\/h2>\nL’\u00e9v\u00e9nement oncut se produit lorsque l’utilisateur coupe le contenu d’un \u00e9l\u00e9ment. Bien que l’\u00e9v\u00e9nement oncut soit pris en charge par tous les \u00e9l\u00e9ments HTML, il n’est pas r\u00e9ellement possible de couper le contenu, par exemple, d’un \u00e9l\u00e9ment p, \u00c0 MOINS que l’\u00e9l\u00e9ment n’ait d\u00e9fini contenteditable sur \u00ab\u00a0true\u00a0\u00bb. L’\u00e9v\u00e9nement oncut est principalement utilis\u00e9 pour les \u00e9l\u00e9ments input avec type=\u00a0\u00bbtext\u00a0\u00bb.<\/p>\n
Ex\u00e9cuter JavaScript lorsqu’une partie du texte d’un \u00e9l\u00e9ment est coup\u00e9e input:<\/p>\n
\r\n<input type="text" oncut="myFunction()" value="Essayez de raccourcir ce texte">\r\n<\/pre>\nondblclick \u2013 double-cliquez sur l’\u00e9l\u00e9ment<\/span><\/h2>\nGestionnaire pour l’\u00e9v\u00e9nement dblclick, qui se produit lorsque le bouton gauche de la souris est double-cliqu\u00e9. L’\u00e9v\u00e9nement ondblclick se produit lorsque l’utilisateur double-clique sur un \u00e9l\u00e9ment HTML; c’est-\u00e0-dire lorsque l’utilisateur double-clique sur un \u00e9l\u00e9ment de formulaire ou un lien hypertexte.<\/p>\n
type – Indique le type d’\u00e9v\u00e9nement.
\ntarget – Sp\u00e9cifie l’objet auquel l’\u00e9v\u00e9nement a \u00e9t\u00e9 initialement envoy\u00e9.
\nlayerX, layerY, pageX, pageY, screenX, screenY – Repr\u00e9sente l’emplacement du curseur lorsque l’\u00e9v\u00e9nement se produit.
\nwhich – Repr\u00e9sente 1 pour le clic gauche de la souris et 3 pour le clic droit de la souris.
\nmodifiers – Contient une liste des touches de modification enfonc\u00e9es lorsque l’\u00e9v\u00e9nement s’est produit.<\/p>\n
Ex\u00e9cuter JavaScript lorsque l’\u00e9l\u00e9ment p est double-cliqu\u00e9:<\/p>\n
\r\n<p ondblclick="myFunction()">Double-cliquez sur moi<\/p>\r\n<\/pre>\nVoici le dialogue alert s’affiche si l’utilisateur double-clique sur le bouton:<\/p>\n
\r\n<form>\r\n<INPUT Type="button" Value="Double Click Me!" onDblClick="alert('You just double clicked me!')">\r\n<\/form>\r\n<\/pre>\nondrag – glisser-d\u00e9poser l’\u00e9l\u00e9ment<\/span><\/h2>\nL’\u00e9v\u00e9nement ondrag se produit lorsqu’un \u00e9l\u00e9ment ou un texte s\u00e9lectionn\u00e9 est d\u00e9plac\u00e9. Le glisser-d\u00e9poser est une fonctionnalit\u00e9 tr\u00e8s courante dans HTML5. C’est lorsque vous \u00absaisissez\u00bb un objet et le faites glisser vers un autre emplacement.<\/p>\n
type – Indique le type d’\u00e9v\u00e9nement.
\ntarget – Sp\u00e9cifie l’objet auquel l’\u00e9v\u00e9nement a \u00e9t\u00e9 initialement envoy\u00e9.
\ndata – Renvoie un tableau de cha\u00eenes contenant les URL des objets publi\u00e9s.
\nmodifiers – Contient une liste de touches de modification enfonc\u00e9es lorsque l’\u00e9v\u00e9nement s’est produit.
\nscreenX, screenY – Repr\u00e9sente l’emplacement du curseur lorsque l’\u00e9v\u00e9nement se produit.<\/p>\n
Ex\u00e9cuter JavaScript lorsque l’\u00e9l\u00e9ment p est d\u00e9plac\u00e9:<\/p>\n
\r\n<p draggable="true" ondrag="myFunction(event)">Tra\u00eene-moi!<\/p>\r\n<\/pre>\nondragend – glisser-d\u00e9poser de l’\u00e9l\u00e9ment termin\u00e9<\/span><\/h2>\nL’\u00e9v\u00e9nement ondragend se produit lorsque l’utilisateur a fini de faire glisser un \u00e9l\u00e9ment ou de s\u00e9lectionner du texte.<\/p>\n
Ex\u00e9cutez un JavaScript lorsque l’utilisateur a fini de faire glisser l’\u00e9l\u00e9ment p:<\/p>\n
\r\n<p draggable="true" ondragend="myFunction(event)">Tra\u00eene-moi!<\/p>\r\n<\/pre>\nondragenter<\/span><\/h2>\n– l’\u00e9l\u00e9ment est gliss\u00e9 dans une zone cible valide. L’\u00e9v\u00e9nement ondragenter se produit lorsqu’un \u00e9l\u00e9ment gliss\u00e9 ou un texte s\u00e9lectionn\u00e9 entre dans une cible de d\u00e9p\u00f4t valide. Les \u00e9v\u00e9nements ondragenter et ondragleave peuvent aider l’utilisateur \u00e0 comprendre que l’\u00e9l\u00e9ment d\u00e9plac\u00e9 est sur le point d’entrer ou de quitter la cible de d\u00e9p\u00f4t. Cela peut \u00eatre fait, par exemple, en d\u00e9finissant la couleur d’arri\u00e8re-plan lorsque l’\u00e9l\u00e9ment d\u00e9plac\u00e9 entre dans la cible de d\u00e9p\u00f4t et en supprimant la couleur lorsque l’\u00e9l\u00e9ment s’\u00e9loigne de la cible.<\/p>\n
Ex\u00e9cuter JavaScript lorsqu’un \u00e9l\u00e9ment d\u00e9pla\u00e7able entre dans la cible de d\u00e9p\u00f4t:<\/p>\n
\r\n<div ondragenter="myFunction(event)"><\/div>\r\n<\/pre>\nondragexit<\/span><\/h2>\n\u2013 quitter le mode glisser-d\u00e9poser. Gestionnaire de l’\u00e9v\u00e9nement dragexit qui se produit lorsque l’\u00e9l\u00e9ment n’est plus la cible d’un \u00e9l\u00e9ment qui peut l’accepter.<\/p>\n
ondragleave<\/span><\/h2>\n– l’\u00e9l\u00e9ment quitte une cible valide. L’\u00e9v\u00e9nement ondragleave se produit lorsqu’un \u00e9l\u00e9ment gliss\u00e9 ou une s\u00e9lection de texte quitte une cible de d\u00e9p\u00f4t valide.<\/p>\n
Ex\u00e9cuter JavaScript lorsqu’un \u00e9l\u00e9ment gliss\u00e9 sort de la cible de d\u00e9p\u00f4t:<\/p>\n
\r\n<div ondragleave="myFunction(event)"><\/div>\r\n<\/pre>\nondragover<\/span><\/h2>\n– l’\u00e9l\u00e9ment est d\u00e9plac\u00e9 vers un point cible valide. L’\u00e9v\u00e9nement ondragover se produit lorsqu’un \u00e9l\u00e9ment d\u00e9pla\u00e7able ou un texte s\u00e9lectionn\u00e9 est gliss\u00e9 sur une cible de d\u00e9p\u00f4t valide. Par d\u00e9faut, les donn\u00e9es\/\u00e9l\u00e9ments ne peuvent pas \u00eatre supprim\u00e9s d\u2019autres \u00e9l\u00e9ments. Pour permettre la suppression, nous devons d\u00e9sactiver la gestion par d\u00e9faut de l’\u00e9l\u00e9ment. Cela se fait en appelant la m\u00e9thode event.preventDefault() sur l’\u00e9v\u00e9nement ondragover.<\/p>\n
Ex\u00e9cuter JavaScript lorsqu’un \u00e9l\u00e9ment est gliss\u00e9 sur une cible de d\u00e9p\u00f4t:<\/p>\n
\r\n<div ondragover="myFunction(event)"><\/div>\r\n<\/pre>\nondragstart<\/span><\/h2>\n\u2013 d\u00e9but de l’op\u00e9ration glisser-d\u00e9poser. L’\u00e9v\u00e9nement ondragstart se produit lorsque l’utilisateur commence \u00e0 faire glisser un \u00e9l\u00e9ment ou un texte s\u00e9lectionn\u00e9.<\/p>\n
Ex\u00e9cuter JavaScript lorsque l’utilisateur commence \u00e0 faire glisser l’\u00e9l\u00e9ment p:<\/p>\n
\r\n<p draggable="true" ondragstart="myFunction(event)">Tra\u00eene-moi!<\/p>\r\n<\/pre>\nondrop<\/span><\/h2>\n\u2013 L’\u00e9l\u00e9ment d\u00e9plac\u00e9 est rel\u00e2ch\u00e9. L’\u00e9v\u00e9nement ondrop se produit lorsqu’un \u00e9l\u00e9ment gliss\u00e9 ou un texte s\u00e9lectionn\u00e9 est d\u00e9pos\u00e9 sur une cible de d\u00e9p\u00f4t valide.<\/p>\n
Ex\u00e9cuter JavaScript lorsqu’un \u00e9l\u00e9ment d\u00e9pla\u00e7able est d\u00e9pos\u00e9 dans un div:<\/p>\n
\r\n<div ondrop="myFunction(event)"><\/div>\r\n<\/pre>\nondurationchange<\/span><\/h2>\n– changement de longueur du support. L’\u00e9v\u00e9nement ondurationchange est d\u00e9clench\u00e9 lorsque la dur\u00e9e de l’audio\/vid\u00e9o change. Lors du chargement de l’audio\/vid\u00e9o, la dur\u00e9e passera de \u00abNaN\u00bb \u00e0 la dur\u00e9e r\u00e9elle de l’audio\/vid\u00e9o. Pendant le processus de chargement audio\/vid\u00e9o, les \u00e9v\u00e9nements suivants se produisent dans cet ordre: onloadstart, ondurationchange, onloadedmetadata, onloadeddata, onprogress, oncanplay, oncanplaythrough<\/p>\n
Ex\u00e9cuter JavaScript lorsque la dur\u00e9e de la vid\u00e9o change:<\/p>\n
\r\n<video ondurationchange="myFunction()">\r\n<\/pre>\nonemptied<\/span><\/h2>\n\u2013 Le fichier est soudainement devenu indisponible. Gestionnaire de l’\u00e9v\u00e9nement onemptied qui se produit lorsque la liste de lecture actuelle d’un \u00e9l\u00e9ment audio ou vid\u00e9o est vide. Le plus souvent en raison d’une panne de connexion.<\/p>\n
onended<\/span><\/h2>\n\u2013 Lecture termin\u00e9e. L’\u00e9v\u00e9nement onended termin\u00e9 se produit lorsque l’audio\/vid\u00e9o atteint la fin. Cet \u00e9v\u00e9nement est utile pour les messages tels que \u00abmerci d’avoir \u00e9cout\u00e9\u00bb, \u00abmerci d’avoir regard\u00e9\u00bb, etc.<\/p>\n
Ex\u00e9cuter JavaScript \u00e0 la fin de l’audio:<\/p>\n
\r\n<audio onended="myFunction()">\r\n<\/pre>\nonerror<\/span><\/h2>\n\u2013 une erreur s’est produite. L’\u00e9v\u00e9nement onerror est d\u00e9clench\u00e9 lorsqu’une erreur se produit lors du chargement d’un fichier externe (tel qu’un document ou une image). Lorsqu’il est utilis\u00e9 sur des supports audio\/vid\u00e9o, les \u00e9v\u00e9nements associ\u00e9s qui se produisent en cas d’interruption du processus de chargement du support sont les suivants: onabort, onemptied, onstalled, onsuspend.<\/p>\n
L’\u00e9v\u00e9nement onerror se d\u00e9clenche uniquement lorsqu’une erreur de syntaxe JavaScript ou une erreur d’ex\u00e9cution se produit, et non lorsqu’une erreur de navigateur se produit. Par exemple, si vous essayez de d\u00e9finir window.location.href=’notThere.html’ et que le fichier notThere.html n’existe pas, le message d’erreur r\u00e9sultant sera le message du navigateur; par cons\u00e9quent, onError n’attrapera pas ce message. Cependant, l’\u00e9v\u00e9nement error sera inclus par une URL non valide dans la balise IMG ou des donn\u00e9es d’image non valides.<\/p>\n
window.onerror s’applique uniquement aux erreurs qui se produisent dans la fen\u00eatre contenant window.onerror, et non aux erreurs dans d’autres fen\u00eatres.<\/p>\n
onError peut avoir les valeurs suivantes:
\n– null pour supprimer toutes les bo\u00eetes de dialogue d’erreur JavaScript. D\u00e9finition de window.onerror sur null signifie que vos utilisateurs ne verront pas les erreurs JavaScript caus\u00e9es par votre code.
\n– Le nom de la fonction qui g\u00e8re les erreurs (les arguments sont le texte du message, l’URL et le num\u00e9ro de ligne contenant l’erreur). Pour supprimer la bo\u00eete de dialogue d’erreur JavaScript standard, cette fonction doit renvoyer true. Voir l’exemple 3 ci-dessous.
\n– Une variable ou une propri\u00e9t\u00e9 qui contient null ou une r\u00e9f\u00e9rence de fonction valide.
\nSi vous \u00e9crivez une fonction de gestion des erreurs, vous disposez de trois options pour signaler les erreurs :
\n– Suivre les erreurs, mais permettre leur signalement via une bo\u00eete de dialogue JavaScript standard (utiliser une fonction de gestion des erreurs qui renvoie false ou ne renvoie pas de valeur).
\n– Signaler les erreurs manuellement et d\u00e9sactiver la bo\u00eete de dialogue standard (utiliser la fonction de gestion des erreurs qui renvoie true).
\n– D\u00e9sactiver tous les messages d’erreur (d\u00e9finir null dans le gestionnaire onError).<\/p>\n
type – Indique le type d’\u00e9v\u00e9nement.
\ntarget – Sp\u00e9cifie l’objet auquel l’\u00e9v\u00e9nement a \u00e9t\u00e9 envoy\u00e9 \u00e0 l’origine<\/p>\n
Ex\u00e9cuter JavaScript si une erreur se produit lors du chargement d’une image:<\/p>\n
\r\n<img src="image.gif" onerror="myFunction()">\r\n<\/pre>\nExemple 1: Gestionnaire avec valeur Null. Dans cette balise IMG, le code onError=\u00a0\u00bbnull\u00a0\u00bb supprime les messages d’erreur si une erreur se produit lors du chargement de l’image.<\/p>\n
\r\n<IMG NAME="imageBad1" SRC="corrupt.gif" ALIGN="left" BORDER="2" onError="null">\r\n<\/pre>\nExemple 2 : gestionnaire nul pour une fen\u00eatre. Le gestionnaire onError pour une fen\u00eatre ne peut pas \u00eatre exprim\u00e9 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\u00eatre enti\u00e8re, pas seulement pour l’objet Image. Cela supprime tous les messages d’erreur JavaScript, y compris les messages pour l’objet Image.<\/p>\n
\r\n<SCRIPT>\r\nwindow.onerror=null\r\n<\/SCRIPT>\r\n<IMG NAME="imageBad1" SRC="corrupt.gif" ALIGN="left" BORDER="2">\r\n<\/pre>\nCependant, si l’objet Image poss\u00e8de son propre gestionnaire onError personnalis\u00e9, ce gestionnaire sera ex\u00e9cut\u00e9 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.<\/p>\n
\r\n<SCRIPT>\r\nwindow.onerror=null\r\nfunction myErrorFunc() {\r\n alert("The image had a nasty error.")\r\n}\r\n<\/SCRIPT>\r\n<IMG NAME="imageBad1" SRC="corrupt.gif" ALIGN="left" BORDER="2" onError="myErrorFunc()">\r\n<\/pre>\nDans l’exemple suivant, window.onerror=null supprime tous les messages d’erreur. Sans onerror=null, le code provoquera une erreur de d\u00e9passement de pile car il y a une r\u00e9cursivit\u00e9 infinie.<\/p>\n
\r\n<SCRIPT>\r\nwindow.onerror = null;\r\nfunction testErrorFunction() {\r\n testErrorFunction();\r\n}\r\n<\/SCRIPT>\r\n<BODY onload="testErrorFunction()">\r\ntest message\r\n<\/BODY>\r\n<\/pre>\nExemple 3: Fonction de gestion des erreurs. Ici est d\u00e9finie une fonction myOnError qui d\u00e9tecte les erreurs JavaScript. Cette fonction utilise trois tableaux pour stocker le message, l’URL et la cha\u00eene incrimin\u00e9e pour chaque erreur. Si l’utilisateur clique sur le bouton Afficher le rapport d’erreur, la fonction displayErrors ouvre une fen\u00eatre et cr\u00e9e un message d’erreur dans celle-ci. Notez que cette fonction renvoie true pour supprimer la bo\u00eete de dialogue d’erreur JavaScript standard.<\/p>\n
\r\n<SCRIPT>\r\nwindow.onerror = myOnError\r\nmsgArray = new Array()\r\nurlArray = new Array()\r\nlnoArray = new Array()\r\nfunction myOnError(msg, url, lno) {\r\n msgArray[msgArray.length]\r\n= msg\r\n urlArray[urlArray.length] = url\r\n lnoArray[lnoArray.length]\r\n= lno\r\n return true\r\n}\r\nfunction displayErrors() {\r\n win2=window.open('','window2','scrollbars=yes')\r\n win2.document.writeln('<B>Error Report<\/B><P>')\r\n for (var i=0; i < msgArray.length; i++) {\r\n win2.document.writeln('<B>Error in file:<\/B> '\r\n+ urlArray[i] + '<BR>')\r\n win2.document.writeln('<B>Line\r\nnumber:<\/B> ' + lnoArray[i] + '<BR>')\r\n win2.document.writeln('<B>Message:<\/B> '\r\n+ msgArray[i] + '<P>')\r\n }\r\n win2.document.close()\r\n}\r\n<\/SCRIPT>\r\n<BODY onload="noSuchFunction()">\r\n<FORM>\r\n<BR><INPUT TYPE="button" VALUE="This button has a syntax error" onClick="alert('unterminated string')">\r\n<P><INPUT TYPE="button" VALUE="Display Error Report" onClick="displayErrors()">\r\n<\/FORM>\r\n<\/pre>\nCet exemple donnera la sortie:<\/p>\n
\r\nError Report\r\nError in file:\r\nfile:\/\/\/c%7C\/temp\/onerror.html\r\nLine number: 34\r\nMessage: unterminated string literal\r\nError in file: file:\/\/\/c%7C\/temp\/onerror.html\r\nLine number:\r\n34\r\nMessage: missing ) after argument list\r\nError in file: file:\/\/\/c%7C\/temp\/onerror.html\r\nLine number: 30\r\nMessage: noSuchFunction is not defined\r\n<\/pre>\nExemple 4 : un gestionnaire d\u2019\u00e9v\u00e9nements 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.<\/p>\n
\r\n<SCRIPT>\r\nfunction badImage(theImage) {\r\n alert('Error: ' + theImage.name + ' did not load properly.')\r\n}\r\n<\/SCRIPT>\r\n<FORM>\r\n<IMG NAME="imageBad2" SRC="orca.gif" ALIGN="left" BORDER="2" onError="badImage(this)">\r\n<\/FORM>\r\n<\/pre>\nonfocus<\/span><\/h2>\n\u2013 mettre l’accent sur un \u00e9l\u00e9ment. Ex\u00e9cute le code JavaScript lorsqu’un \u00e9v\u00e9nement se produit focus; c’est-\u00e0-dire si une fen\u00eatre, un cadre ou un ensemble de cadres re\u00e7oit le focus, ou si un \u00e9l\u00e9ment de formulaire re\u00e7oit le focus. L’\u00e9v\u00e9nement onfocus se produit lorsqu’un \u00e9l\u00e9ment re\u00e7oit le focus. L’\u00e9v\u00e9nement onfocus est souvent utilis\u00e9 dans les champs de saisie. Tous les \u00e9l\u00e9ments HTML SAUF: base, bdo, br, head, html, iframe, meta, param, script, style, et title<\/p>\n
Ex\u00e9cuter JavaScript lorsqu’un champ de saisie re\u00e7oit le focus:<\/p>\n
\r\n<input type="text" onfocus="myFunction()">\r\n<\/pre>\nIci, le gestionnaire onFocus est utilis\u00e9 dans l’objet valueField Textarea pour appeler la fonction valueCheck.<\/p>\n
\r\n<INPUT TYPE="textarea" VALUE="" NAME="valueField" onFocus="valueCheck()">\r\n<\/pre>\nonfocusin<\/span><\/h2>\nL’\u00e9v\u00e9nement onfocusin se produit lorsqu’un \u00e9l\u00e9ment re\u00e7oit le focus. L’\u00e9v\u00e9nement onfocusin est souvent utilis\u00e9 dans les champs de saisie. Tous les \u00e9l\u00e9ments HTML SAUF: base, bdo, br, head, html, iframe, meta, param, script, style, et title<\/p>\n
Ex\u00e9cuter JavaScript lorsqu’un champ de saisie est sur le point de recevoir le focus:<\/p>\n
\r\n<input type="text" onfocusin="myFunction()">\r\n<\/pre>\nonfocusout<\/span><\/h2>\nL’\u00e9v\u00e9nement onfocusout se produit lorsqu’un \u00e9l\u00e9ment perd le focus. L’\u00e9v\u00e9nement onfocusout est souvent utilis\u00e9 dans les champs de saisie. L’\u00e9v\u00e9nement onfocusout est souvent utilis\u00e9 lors de la validation du formulaire (lorsque l’utilisateur quitte un champ de formulaire). Tous les \u00e9l\u00e9ments HTML SAUF: base, bdo, br, head, html, iframe, meta, param, script, style, et title<\/p>\n
Ex\u00e9cuter JavaScript lorsqu’un champ de saisie est sur le point de perdre le focus:<\/p>\n
\r\n<input type="text" onfocusout="myFunction()">\r\n<\/pre>\nonfullscreenchange<\/span><\/h2>\nL’\u00e9v\u00e9nement fullscreenchange se produit lorsqu’un \u00e9l\u00e9ment est affich\u00e9 en mode plein \u00e9cran. Utilisez la m\u00e9thode element.requestFullscreen() pour afficher un \u00e9l\u00e9ment en mode plein \u00e9cran. Utilisez la m\u00e9thode element.exitFullscreen() pour annuler le mode plein \u00e9cran. Chaque navigateur n\u00e9cessite un pr\u00e9fixe sp\u00e9cifique (voir parenth\u00e8ses) : 45.0 (webkit), 11.0 (ms), 47.0 (moz), 5.1 (webkit), 15.0 (webkit)<\/p>\n
Afficher du texte lors de l’affichage d’une page en mode plein \u00e9cran:<\/p>\n
\r\ndocument.addEventListener("fullscreenchange", function() {\r\n output.innerHTML = "fullscreenchange event fired!";\r\n});\r\n<\/pre>\nUtiliser des pr\u00e9fixes pour le code multi-navigateur:<\/p>\n
\r\n\/* \u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 *\/\r\ndocument.addEventListener("fullscreenchange", function() {\r\n ...\r\n});\r\n\/* Firefox *\/\r\ndocument.addEventListener("mozfullscreenchange", function() {\r\n ...\r\n});\r\n\/* Chrome, Safari and Opera *\/\r\ndocument.addEventListener("webkitfullscreenchange", function() {\r\n ...\r\n});\r\n\/* IE \/ Edge *\/\r\ndocument.addEventListener("msfullscreenchange", function() {\r\n ...\r\n});\r\n<\/pre>\nonfullscreenerror<\/span><\/h2>\nL’\u00e9v\u00e9nement fullscreenerror se produit lorsqu’un \u00e9l\u00e9ment ne peut pas \u00eatre affich\u00e9 en mode plein \u00e9cran, m\u00eame s’il a \u00e9t\u00e9 demand\u00e9. Utilisez la m\u00e9thode element.requestFullscreen() pour afficher un \u00e9l\u00e9ment en mode plein \u00e9cran. Utilisez la m\u00e9thode element.exitFullscreen() pour annuler le mode plein \u00e9cran.<\/p>\n
Texte d’avertissement si l’\u00e9l\u00e9ment ne peut pas \u00eatre affich\u00e9 en mode plein \u00e9cran:<\/p>\n
\r\ndocument.addEventListener("fullscreenerror", function() {\r\n alert("Fullscreen denied")\r\n});\r\n<\/pre>\nUtiliser des pr\u00e9fixes pour le code multi-navigateur:<\/p>\n
\r\n\/* \u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 *\/\r\ndocument.addEventListener("fullscreenerror", function() {\r\n ...\r\n});\r\n\/* Firefox *\/\r\ndocument.addEventListener("mozfullscreenerror", function() {\r\n ...\r\n});\r\n\/* Chrome, Safari and Opera *\/\r\ndocument.addEventListener("webkitfullscreenerror", function() {\r\n ...\r\n});\r\n\/* IE \/ Edge *\/\r\ndocument.addEventListener("msfullscreenerror", function() {\r\n ...\r\n});\r\n<\/pre>\nonhashchange<\/span><\/h2>\n– modifier la liaison d’une partie de l’adresse. Prise en charge des balises HTML: body. L’\u00e9v\u00e9nement onhashchange se produit lorsqu’une modification a \u00e9t\u00e9 apport\u00e9e \u00e0 la partie ancre (commence par le caract\u00e8re \u00ab # \u00bb) de l’URL actuelle. Un exemple de ce qu’est r\u00e9ellement 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.
\nPour d\u00e9clencher cet \u00e9v\u00e9nement, vous pouvez:
\nModifiez la partie de liaison en d\u00e9finissant la propri\u00e9t\u00e9 location.hash ou location.href de l’objet Location
.
\nAcc\u00e9der \u00e0 la page actuelle avec un autre signet (utiliser les boutons Pr\u00e9c\u00e9dent ou Suivant)
\nCliquez sur le lien d’ancrage du signet<\/p>\n
Ex\u00e9cuter JavaScript lorsqu’une partie de la liaison a chang\u00e9:<\/p>\n
\r\n<body onhashchange="myFunction()">\r\n<\/pre>\nComment attribuer l’\u00e9v\u00e9nement \u00abonhashchange\u00bb \u00e0 un objet window:<\/p>\n
\r\nwindow.onhashchange = myFunction;\r\n<\/pre>\noninput<\/span><\/h2>\n\u2013 d\u00e9but de la saisie des donn\u00e9es. L’\u00e9v\u00e9nement oninput se produit lorsqu’un \u00e9l\u00e9ment re\u00e7oit une entr\u00e9e utilisateur. Cet \u00e9v\u00e9nement se produit lorsque la valeur d’un \u00e9l\u00e9ment change input ou textarea. Cet \u00e9v\u00e9nement est similaire \u00e0 l’\u00e9v\u00e9nement onchange. La diff\u00e9rence est que l’\u00e9v\u00e9nement oninput se produit imm\u00e9diatement apr\u00e8s que la valeur de l’\u00e9l\u00e9ment change, tandis que onchange se produit lorsque l’\u00e9l\u00e9ment perd le focus, apr\u00e8s que le contenu a chang\u00e9. Une autre diff\u00e9rence est que l\u2019\u00e9v\u00e9nement onchange fonctionne \u00e9galement sur certains \u00e9l\u00e9ments. Prise en charge des balises HTML: input type=\u00a0\u00bbcolor\u00a0\u00bb, input type=\u00a0\u00bbdate\u00a0\u00bb, input type=\u00a0\u00bbdatetime\u00a0\u00bb, input type=\u00a0\u00bbemail\u00a0\u00bb, input type=\u00a0\u00bbmonth\u00a0\u00bb, input type=\u00a0\u00bbnumber\u00a0\u00bb, input type=\u00a0\u00bbpassword\u00a0\u00bb, input type=\u00a0\u00bbrange\u00a0\u00bb, input type=\u00a0\u00bbsearch\u00a0\u00bb, input type=\u00a0\u00bbtel\u00a0\u00bb, input type=\u00a0\u00bbtext\u00a0\u00bb, input type=\u00a0\u00bbtime\u00a0\u00bb, input type=\u00a0\u00bburl\u00a0\u00bb, input type=\u00a0\u00bbweek\u00a0\u00bb et textarea<\/p>\n
Ex\u00e9cuter JavaScript lorsque l’utilisateur tape quelque chose dans le champ input:<\/p>\n
\r\n<input type="text" oninput="myFunction()">\r\n<\/pre>\nCurseur de plage: comment mettre \u00e0 jour dynamiquement la valeur du curseur:<\/p>\n
\r\n<input type="range" oninput="myFunction(this.value)">\r\n<\/pre>\noninvalid<\/span><\/h2>\n\u2013 l’article est endommag\u00e9. L’\u00e9v\u00e9nement oninvalid se produit lorsqu’un \u00e9l\u00e9ment est soumis input \u044fest inacceptable. Par exemple, un champ de saisie n’est pas valide si l’attribut required est d\u00e9fini et que le champ est vide (l’attribut required indique que le champ de saisie doit \u00eatre rempli avant que le formulaire puisse \u00eatre soumis). Prise en charge des balises HTML: input<\/p>\n
Avertir concernant un texte si le champ de saisie n’est pas valide:<\/p>\n
\r\n<input type="text" oninvalid="alert('Vous devez remplir le formulaire!');" required>\r\n<\/pre>\nTexte d’avertissement si le champ de saisie contient moins de 6 caract\u00e8res:<\/p>\n
\r\n\u0418\u043c\u044f: <input type="text" id="myInput" name="fname" pattern=".{6,}" required>\r\n<script>\r\ndocument.getElementById("myInput").addEventListener("invalid", myFunction);\r\nfunction myFunction() {\r\n alert("Doit contenir 6 caract\u00e8res ou plus");\r\n}\r\n<\/script>\r\n<\/pre>\nTexte d’avertissement si le champ de saisie contient un nombre inf\u00e9rieur \u00e0 2 ou sup\u00e9rieur \u00e0 5:<\/p>\n
\r\n\u041d\u043e\u043c\u0435\u0440: <input type="number" id="myInput" name="quantity" min="2" max="5" required>\r\n<script>\r\ndocument.getElementById("myInput").addEventListener("invalid", myFunction);\r\nfunction myFunction() {\r\n alert("Vous devez choisir un num\u00e9ro entre 2 et 5. Vous avez choisi: " + this.value);\r\n}\r\n<\/script>\r\n<\/pre>\nonkeydown<\/span><\/h2>\n\u2013 la touche est enfonc\u00e9e. L’\u00e9v\u00e9nement onkeydown se produit lorsque l’utilisateur appuie sur une touche (du clavier). L’ordre des \u00e9v\u00e9nements associ\u00e9s \u00e0 un \u00e9v\u00e9nement onkeydown: onkeydown, onkeypress, onkeyup. Tous les \u00e9l\u00e9ments HTML SAUF: base, bdo, br, head, html, iframe, meta, param, script, style, et title. L’\u00e9v\u00e9nement KeyDown se produit toujours avant l’\u00e9v\u00e9nement KeyPress. Si onKeyDown renvoie false, l’\u00e9v\u00e9nement KeyPress ne se produit pas. Cela emp\u00eache les \u00e9v\u00e9nements KeyPress d’\u00eatre d\u00e9clench\u00e9s pendant que l’utilisateur maintient une touche enfonc\u00e9e.<\/p>\n
type – Indique le type d’\u00e9v\u00e9nement.
\ntarget – Sp\u00e9cifie l’objet auquel l’\u00e9v\u00e9nement a \u00e9t\u00e9 initialement envoy\u00e9.
\nlayerX, layerY, pageX, pageY, screenX, screenY – Pour un \u00e9v\u00e9nement de superposition, repr\u00e9sente l’emplacement du curseur lorsque l’\u00e9v\u00e9nement s’est produit. Pour un \u00e9v\u00e9nement de formulaire, repr\u00e9sente la position de l’\u00e9l\u00e9ment de formulaire.
\nwhich – La valeur ASCII de la touche enfonc\u00e9e. Pour obtenir la lettre, le chiffre ou le symbole r\u00e9el de la touche enfonc\u00e9e, utilisez la m\u00e9thode String.fromCharCode. Pour d\u00e9finir cette propri\u00e9t\u00e9 lorsque la valeur ASCII est inconnue, utilisez le String.charCodeAt.
\nmodifiers – Contient une liste des touches de modification enfonc\u00e9es lorsque l’\u00e9v\u00e9nement s’est produit.<\/p>\n
Ex\u00e9cuter JavaScript lorsque l’utilisateur appuie sur une touche:<\/p>\n
\r\n<input type="text" onkeydown="myFunction()">\r\n<\/pre>\nUtiliser \u00abonkeydown\u00bb avec l’\u00e9v\u00e9nement \u00ab\u00a0onkeyup\u00a0\u00bb:<\/p>\n
\r\n<input type="text" onkeydown="keydownFunction()" onkeyup="keyupFunction()">\r\n<\/pre>\nIci, la fonction blockA est utilis\u00e9e pour \u00e9valuer les caract\u00e8res saisis au clavier dans la zone de texte textentry. Si l’utilisateur entre \u00aba\u00bb ou \u00abA\u00bb, la fonction renvoie false et la zone de texte n’affiche pas la valeur. Dans cette fonction, la propri\u00e9t\u00e9 which L’\u00e9v\u00e9nement attribue la valeur ASCII de la touche appuy\u00e9e par l’utilisateur \u00e0 la variable keyChar. Op\u00e9rateur if \u00e9value keyChar et renvoie false pour les caract\u00e8res sp\u00e9cifi\u00e9s:<\/p>\n
\r\n<form name="main">\r\n <input name="textentry"\r\ntype=text size=10 maxlength=10>\r\n<\/form>\r\n<script>\r\nfunction blockA(e) {\r\nvar keyChar = String.fromCharCode(e.which);\r\nif (keyChar == 'A' || keyChar == 'a')\r\nreturn false;\r\n}\r\ndocument.main.textentry.onkeydown = blockA;\r\n<\/script>\r\n<\/pre>\nonkeypress<\/span><\/h2>\n– la touche est enfonc\u00e9e puis rel\u00e2ch\u00e9e. Ex\u00e9cute le code JavaScript lorsqu’un \u00e9v\u00e9nement KeyPress se produit ; c’est-\u00e0-dire si l’utilisateur maintient la touche enfonc\u00e9e. L’\u00e9v\u00e9nement onkeypress se produit lorsque l’utilisateur appuie sur une touche (du clavier). L’\u00e9v\u00e9nement onkeypress n’est pas d\u00e9clench\u00e9 pour toutes les touches (par exemple ALT, CTRL, MAJ, \u00c9CHAP) dans tous les navigateurs. Pour d\u00e9terminer uniquement si l’utilisateur a appuy\u00e9 sur une touche, utilisez plut\u00f4t l’\u00e9v\u00e9nement onkeydown, car il fonctionne pour toutes les touches. L’ordre des \u00e9v\u00e9nements associ\u00e9s \u00e0 un \u00e9v\u00e9nement onkeydown: onkeydown, onkeypress, onkeyup. Tous les \u00e9l\u00e9ments HTML SAUF: base, bdo, br, head, html, iframe, meta, param, script, style, et title. L’\u00e9v\u00e9nement KeyPress se produit imm\u00e9diatement apr\u00e8s l’\u00e9v\u00e9nement KeyDown uniquement lorsque onKeyDown renvoie autre chose que false. L’\u00e9v\u00e9nement KeyPress se produit de mani\u00e8re r\u00e9p\u00e9t\u00e9e jusqu’\u00e0 ce que l’utilisateur rel\u00e2che la touche. Vous pouvez annuler des \u00e9v\u00e9nements KeyPress individuels.<\/p>\n
type – Indique le type d’\u00e9v\u00e9nement.
\ntarget – Sp\u00e9cifie l’objet auquel l’\u00e9v\u00e9nement a \u00e9t\u00e9 initialement envoy\u00e9.
\nlayerX, layerY, pageX, pageY, screenX, screenY – Pour un \u00e9v\u00e9nement de superposition, repr\u00e9sente l’emplacement du curseur lorsque l’\u00e9v\u00e9nement s’est produit. Pour un \u00e9v\u00e9nement de formulaire, repr\u00e9sente la position de l’\u00e9l\u00e9ment de formulaire.
\nwhich – La valeur ASCII de la touche enfonc\u00e9e. Pour obtenir la lettre, le chiffre ou le symbole r\u00e9el de la touche enfonc\u00e9e, utilisez la m\u00e9thode String.fromCharCode. Pour d\u00e9finir cette propri\u00e9t\u00e9 lorsque la valeur ASCII est inconnue, utilisez la m\u00e9thode String.charCodeAt.
\nmodifiers – Contient une liste des touches de modification enfonc\u00e9es lorsque l’\u00e9v\u00e9nement s’est produit.<\/p>\n
Ex\u00e9cuter JavaScript lorsque l’utilisateur appuie sur une touche:<\/p>\n
\r\n<input type="text" onkeypress="myFunction()">\r\n<\/pre>\nIci, la m\u00e9thode captureEvents capture les entr\u00e9es au clavier et le gestionnaire onKeyPress appelle la fonction blockA pour v\u00e9rifier les pressions sur les touches. Si les touches \u00aba\u00bb ou \u00abz\u00bb sont enfonc\u00e9es, la fonction fait d\u00e9filer la fen\u00eatre du navigateur.<\/p>\n
\r\nfunction blockA(e) {\r\nvar keyChar = String.fromCharCode(e.which);\r\nif (keyChar == 'A' || keyChar == 'a')\r\nself.scrollBy(10,10);\r\nelse if(keyChar == 'Z' || keyChar == 'z')\r\nself.scrollBy(-10,-10);\r\nelse return false;\r\n}\r\ndocument.captureEvents(Event.KEYPRESS);\r\ndocument.onkeypress = blockA;\r\n<\/pre>\nonkeyup<\/span><\/h2>\n\u2013 touche rel\u00e2ch\u00e9e L’\u00e9v\u00e9nement onkeyup se produit lorsque l’utilisateur rel\u00e2che une touche (sur le clavier). L’ordre des \u00e9v\u00e9nements associ\u00e9s \u00e0 l’\u00e9v\u00e9nement onkeydown: onkeydown, onkeypress, onkeyup. Tous les \u00e9l\u00e9ments HTML SAUF: base, bdo, br, head, html, iframe, meta, param, script, style, et title.<\/p>\n
type – Indique le type d’\u00e9v\u00e9nement.
\ntarget – Sp\u00e9cifie l’objet auquel l’\u00e9v\u00e9nement a \u00e9t\u00e9 initialement envoy\u00e9.
\nlayerX, layerY, pageX, pageY, screenX, screenY – Pour un \u00e9v\u00e9nement de superposition, repr\u00e9sente l’emplacement du curseur lorsque l’\u00e9v\u00e9nement s’est produit. Pour un \u00e9v\u00e9nement de formulaire, repr\u00e9sente la position de l’\u00e9l\u00e9ment de formulaire.
\nwhich – La valeur ASCII de la touche enfonc\u00e9e. Pour obtenir la lettre, le chiffre ou le symbole r\u00e9el de la touche enfonc\u00e9e, utilisez la m\u00e9thode String.fromCharCode. Pour d\u00e9finir cette propri\u00e9t\u00e9 lorsque la valeur ASCII est inconnue, utilisez le String.charCodeAt.
\nmodifiers – Contient une liste des touches de modification enfonc\u00e9es lorsque l’\u00e9v\u00e9nement s’est produit.<\/p>\n
Ex\u00e9cuter JavaScript lorsque l’utilisateur rel\u00e2che la touche:<\/p>\n
\r\n<input type="text" onkeyup="myFunction()">\r\n<\/pre>\nUtilisez \u00abonkeydown\u00bb avec l’\u00e9v\u00e9nement \u00abonkeyup\u00bb:<\/p>\n
\r\n<input type="text" onkeydown="keydownFunction()" onkeyup="keyupFunction()">\r\n<\/pre>\nAffichez la cl\u00e9 r\u00e9elle qui a \u00e9t\u00e9 \u00e9mise dans le champ de texte:<\/p>\n
\r\n\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0441\u0432\u043e\u0435 \u0438\u043c\u044f: <input type="text" id="fname" onkeyup="myFunction()">\r\n<script>\r\nfunction myFunction() {\r\n var x = document.getElementById("fname").value;\r\n document.getElementById("demo").innerHTML = x;\r\n}\r\n<\/script>\r\n<\/pre>\nIci, la m\u00e9thode captureEvents capture la saisie au clavier et le gestionnaire onKeyUp appelle la fonction Key_Up. La m\u00e9thode alert de la fonction ouvre une bo\u00eete de dialogue pour afficher la valeur de la touche enfonc\u00e9e:<\/p>\n
\r\nfunction Key_Up(e) {\r\nvar keyChar = String.fromCharCode(e.which);\r\nalert("Hold '" + keyChar +"' again for me, okay?");\r\n}\r\ndocument.onkeyup=Key_Up;\r\ndocument.captureEvents(Event.KEYUP);\r\n<\/pre>\nonload<\/span><\/h2>\n\u2013 article charg\u00e9. L’\u00e9v\u00e9nement onload se produit lorsqu’un objet a \u00e9t\u00e9 charg\u00e9. L’\u00e9v\u00e9nement onload est le plus souvent utilis\u00e9 dans l’\u00e9l\u00e9ment body ex\u00e9cuter un script apr\u00e8s qu’une page Web a compl\u00e8tement charg\u00e9 tout son contenu (y compris les images, les fichiers de script, les fichiers CSS, etc.). L’\u00e9v\u00e9nement onload peut \u00eatre utilis\u00e9 pour v\u00e9rifier le type de navigateur et la version du navigateur du visiteur et charger la version appropri\u00e9e de la page Web en fonction des informations re\u00e7ues. L’\u00e9v\u00e9nement onload peut \u00e9galement \u00eatre utilis\u00e9 pour g\u00e9rer des fichiers cookie.<\/p>\n
Le gestionnaire onLoad est utilis\u00e9 dans la balise BODY ou FRAMESET, par exemple, BODY onLoad=\u00a0\u00bb…\u00a0\u00bb. Pour les balises FRAMESET et FRAME: l’\u00e9v\u00e9nement du gestionnaire onLoad dans le cadre (plac\u00e9 dans la balise BODY) se produit avant le onLoad de la balise FRAMESET (plac\u00e9e dans la balise FRAMESET). Pour les images, le gestionnaire onLoad sp\u00e9cifie un script \u00e0 ex\u00e9cuter lorsque l’image est affich\u00e9e. Ne confondez pas la sortie d’image avec le chargement d’image. Vous pouvez t\u00e9l\u00e9charger plusieurs images, puis les afficher une par une dans le m\u00eame objet Image en d\u00e9finissant la propri\u00e9t\u00e9 src de l’objet. Si vous modifiez l’image affich\u00e9e de cette mani\u00e8re, onLoad est ex\u00e9cut\u00e9 \u00e0 chaque fois que l’image est affich\u00e9e, pas seulement lorsque les images sont charg\u00e9es en m\u00e9moire.<\/p>\n
Si vous sp\u00e9cifiez 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\u00e9cut\u00e9 une fois pour chaque cycle. Vous pouvez utiliser le gestionnaire onLoad pour cr\u00e9er une animation JavaScript en d\u00e9finissant \u00e0 plusieurs reprises la propri\u00e9t\u00e9 src d’un objet Image.<\/p>\n
type – Indique le type d’\u00e9v\u00e9nement.
\ntarget – Sp\u00e9cifie l’objet auquel l’\u00e9v\u00e9nement a \u00e9t\u00e9 initialement envoy\u00e9.
\nwidth, height – Pour l’\u00e9v\u00e9nement au-dessus de la fen\u00eatre mais pas au-dessus du calque\/layer, Ces propri\u00e9t\u00e9s repr\u00e9sentent la largeur et la hauteur de la fen\u00eatre.<\/p>\n
Ex\u00e9cuter JavaScript imm\u00e9diatement apr\u00e8s le chargement de la page:<\/p>\n
\r\n<body onload="myFunction()">\r\n<\/pre>\nEn JavaScript, utilisez la m\u00e9thode addEventListener():<\/p>\n
\r\nobject.addEventListener("load", myScript);\r\n<\/pre>\nAfficher un message lors du chargement de la page. Ici, le gestionnaire onLoad affiche un message d’accueil une fois la page charg\u00e9e.<\/p>\n
\r\n<BODY onLoad="window.alert("Welcome to the Brave New World home page!")>\r\n<\/pre>\nAfficher un message lorsqu’une image est charg\u00e9e. Ici, deux objets Image sont cr\u00e9\u00e9s : l’un par le constructeur Image et l’autre par la balise IMG. Chaque objet Image poss\u00e8de un gestionnaire onLoad qui appelle la fonction displayAlert pour afficher un message. Pour une image cr\u00e9\u00e9e avec une balise IMG, la bo\u00eete de dialogue d’alerte affiche le nom de l’image. Pour une image cr\u00e9\u00e9e 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\u00e9\u00e9 par le constructeur Image doit \u00eatre un nom de fonction et il ne peut pas sp\u00e9cifier de param\u00e8tres pour la fonction displayAlert.<\/p>\n
\r\n<SCRIPT>\r\nimageA = new Image(50,50)\r\nimageA.onload=displayAlert\r\nimageA.src="cyanball.gif"\r\nfunction displayAlert(theImage) {\r\n if (theImage==null) {\r\n alert('An image loaded')\r\n }\r\n else alert(theImage.name + ' has been loaded.')\r\n}\r\n<\/SCRIPT>\r\n<IMG NAME="imageB" SRC="greenball.gif" ALIGN="top" onLoad=displayAlert(this)><BR>\r\n<\/pre>\nSortie d’animation GIF en boucle. Cela affiche l’image birdie.gif, qui est une image GIF anim\u00e9e. Le gestionnaire onLoad incr\u00e9mente 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.<\/p>\n
\r\n<SCRIPT>\r\nvar cycles=0\r\n<\/SCRIPT>\r\n<IMG ALIGN="top" SRC="birdie.gif" BORDER=0 onLoad="++cycles">\r\n<INPUT TYPE="button" VALUE="Count Loops" onClick="alert('The animation has looped ' + cycles + ' times.')">\r\n<\/pre>\nModifier l’animation GIF affich\u00e9e. Cet exemple utilise le gestionnaire onLoad pour faire pivoter six animations GIF. Chaque animation est pr\u00e9sent\u00e9e comme une s\u00e9quence d\u2019objets Image individuels. Lorsque le document se charge, !anim0.html s’affiche. Lorsque cette animation est termin\u00e9e, le gestionnaire onLoad provoque le chargement du fichier suivant, !anim1.html, \u00e0 la place du premier fichier. Une fois la derni\u00e8re animation, !anim5.html, termin\u00e9e, le premier fichier s’affiche \u00e0 nouveau. Notez que la fonction changeAnimation ne s’appelle pas elle-m\u00eame apr\u00e8s les modifications de la propri\u00e9t\u00e9 src de l’objet Image. Cela se produit parce que la propri\u00e9t\u00e9 src change, le gestionnaire onLoad de l’image est d\u00e9clench\u00e9 et la fonction est appel\u00e9e changeAnimation.<\/p>\n
\r\n<SCRIPT>\r\nvar whichImage=0\r\nvar maxImages=5\r\nfunction changeAnimation(theImage) {\r\n ++whichImage\r\n if (whichImage <= maxImages) {\r\n var imageName="!anim" + whichImage + ".gif"\r\n theImage.src=imageName\r\n } else {\r\n whichImage=-1\r\n return\r\n }\r\n}\r\n<\/SCRIPT>\r\n<IMG NAME="changingAnimation" SRC="!anim0.gif" BORDER=0 ALIGN="top" onLoad="changeAnimation(this)">\r\n<\/pre>\nUtilisez l’\u00e9v\u00e9nement onload pour l’\u00e9l\u00e9ment img. Notification \u00abImage charg\u00e9e\u00bb imm\u00e9diatement apr\u00e8s le chargement de l’image:<\/p>\n
\r\n<img src="javascriptw3.gif" onload="loadImage()" width="100" height="132">\r\n<script>\r\nfunction loadImage() {\r\n alert("Image is loaded");\r\n}\r\n<\/script>\r\n<\/pre>\nUtiliser l’\u00e9v\u00e9nement onload pour traiter les fichiers cookie:<\/p>\n
\r\n<body onload="checkCookies()">\r\n<script>\r\nfunction checkCookies() {\r\n var text = "";\r\n if (navigator.cookieEnabled == true) {\r\n text = "Cookies activ\u00e9s.";\r\n } else {\r\n text = "Les cookies ne sont pas activ\u00e9s.";\r\n }\r\n document.getElementById("demo").innerHTML = text;\r\n}\r\n<\/script>\r\n<\/pre>\nonloadeddata<\/span><\/h2>\n\u2013 donn\u00e9es du fichier charg\u00e9es. Gestionnaire pour l’\u00e9v\u00e9nement loadeddata, qui est d\u00e9clench\u00e9 lorsque l’audio\/la vid\u00e9o ne peut plus \u00eatre lue \u00e0 la position actuelle, mais que les donn\u00e9es multim\u00e9dias continuent de se charger. L’\u00e9v\u00e9nement onloadeddata se produit lorsque la trame multim\u00e9dia est charg\u00e9e, mais ne garantit pas que suffisamment de donn\u00e9es sont disponibles pour commencer la lecture. L’\u00e9v\u00e9nement onloadeddata se produit apr\u00e8s onloadedmetadata et avant oncanplay.<\/p>\n
Lors du chargement d’un m\u00e9dia, 7 \u00e9v\u00e9nements se produisent dans l’ordre suivant:
\n1. onloadstart
\n2. ondurationchange
\n3. onloadedmetadata
\n4. onloadeddata
\n5. onprogress
\n6. oncanplay
\n7. oncanplaythrough<\/p>\n
Ex\u00e9cuter JavaScript lorsque les donn\u00e9es sont disponibles pour l’image actuelle (par video):<\/p>\n
\r\n<video onloadeddata="myFunction()">\r\n<\/pre>\nEx\u00e9cuter JavaScript lorsque les donn\u00e9es sont disponibles pour l’image actuelle (par audio):<\/p>\n
\r\n<audio onloadeddata="myFunction()">\r\n<\/pre>\nonloadedmetadata<\/span><\/h2>\n\u2013 M\u00e9tadonn\u00e9es du fichier charg\u00e9es. Gestionnaire pour l’\u00e9v\u00e9nement loadedmetadata qui est d\u00e9clench\u00e9 lorsque les m\u00e9tadonn\u00e9es (dur\u00e9e, dimensions de l’image (pour la vid\u00e9o) et texte de la piste) pour le fichier audio\/vid\u00e9o sp\u00e9cifi\u00e9 ont \u00e9t\u00e9 charg\u00e9es. L’\u00e9v\u00e9nement onloadedmetadata se produit lorsque les m\u00e9tadonn\u00e9es du m\u00e9dia ont \u00e9t\u00e9 charg\u00e9es.<\/p>\n
Les m\u00e9tadonn\u00e9es pour l’audio ou la vid\u00e9o se composent de:
\nDur\u00e9e
\nDimensions (vid\u00e9o)
\nPistes<\/p>\n
Ex\u00e9cuter JavaScript lorsque les m\u00e9tadonn\u00e9es de la vid\u00e9o sont charg\u00e9es:<\/p>\n
\r\n<video onloadedmetadata="myFunction()">\r\n<\/pre>\nEn Javascript:<\/p>\n
\r\nobject.onloadedmetadata = function(){myScript};\r\n<\/pre>\nEn JavaScript, utilisez la m\u00e9thode addEventListener():<\/p>\n
\r\nobject.addEventListener("loadedmetadata", myScript);\r\n<\/pre>\nonloadstart<\/span><\/h2>\n\u2013 commencer \u00e0 charger l’\u00e9l\u00e9ment. Gestionnaire de l’\u00e9v\u00e9nement loadstart, qui est d\u00e9clench\u00e9 lorsque le processus de chargement d’un fichier audio\/vid\u00e9o commence.<\/p>\n
onmessage<\/span><\/h2>\n– un message appara\u00eet. L’\u00e9v\u00e9nement onmessage est d\u00e9clench\u00e9 lorsqu’un message est re\u00e7u via la source de l’\u00e9v\u00e9nement. L’objet \u00e9v\u00e9nement pour l’\u00e9v\u00e9nement onmessage prend en charge les propri\u00e9t\u00e9s suivantes:
\ndonn\u00e9es – Contient le message r\u00e9el
\norigin \u2014 L’URL du document qui a d\u00e9clench\u00e9 l’\u00e9v\u00e9nement.
\nLastEventId – L’identifiant du dernier message vu dans le flux d’\u00e9v\u00e9nements.
\n\u00c9v\u00e9nements connexes :
\nonopen – se produit lorsqu’une connexion au serveur est ouverte.
\nonerror – Se produit lorsqu’un probl\u00e8me survient<\/p>\n
Cr\u00e9ez un nouvel objet EventSource et sp\u00e9cifiez l\u2019URL de la page qui envoie les mises \u00e0 jour. Chaque fois qu’une mise \u00e0 jour est re\u00e7ue, l’\u00e9v\u00e9nement onmessage se produit. Lorsque l’\u00e9v\u00e9nement onmessage se produit, placez les donn\u00e9es re\u00e7ues dans un \u00e9l\u00e9ment div avec id=\u00a0\u00bbmyDIV\u00a0\u00bb:<\/p>\n
\r\nvar source = new EventSource("demo_sse.php");\r\nsource.onmessage = function(event) {\r\n document.getElementById("myDIV").innerHTML += event.data + "<br>";\r\n};\r\n<\/pre>\nonmousedown<\/span><\/h2>\n\u2013 le bouton de la souris est enfonc\u00e9. Gestionnaire de l’\u00e9v\u00e9nement mousedown, qui se produit lorsque le bouton gauche de la souris est enfonc\u00e9. La diff\u00e9rence avec l’\u00e9v\u00e9nement onclick est que onclick est une combinaison des \u00e9v\u00e9nements mousedown et mouseup. Ex\u00e9cute le code JavaScript lorsqu’un \u00e9v\u00e9nement MouseDown se produit; c’est-\u00e0-dire lorsque l’utilisateur appuie sur un bouton de la souris. Si onMouseDown renvoie false, l’action par d\u00e9faut (entrer en mode drag, entrer en mode selection ou l’activation d’un lien hypertexte) est annul\u00e9e. L’activation est d\u00e9clench\u00e9e par l’\u00e9v\u00e9nement MouseDown sur l’hyperlien. Lorsqu’un lien est activ\u00e9, il change de couleur pour indiquer son nouvel \u00e9tat. L’action par d\u00e9faut varie : lancer le glissement, la s\u00e9lection de texte, le d\u00e9filement ou le zoom (en combinaison avec l’appui sur la molette si pris en charge)<\/p>\n
L’\u00e9v\u00e9nement onmousedown se produit lorsque l’utilisateur appuie sur le bouton de la souris sur un \u00e9l\u00e9ment HTML. Ordre des \u00e9v\u00e9nements pour les boutons gauche et central de la souris:
\nonmousedown
\nonmouseup
\n\u043f\u043e \u043a\u043b\u0438\u043a\u0443
\nOrdre des \u00e9v\u00e9nements du bouton droit de la souris:
\nonmousedown
\nonmouseup
\noncontextmenu<\/p>\n
type – Indique le type d’\u00e9v\u00e9nement.
\ntarget – Sp\u00e9cifie l’objet auquel l’\u00e9v\u00e9nement a \u00e9t\u00e9 initialement envoy\u00e9.
\nlayerX, layerY, pageX, pageY, screenX, screenY- L’emplacement du curseur lorsque l’\u00e9v\u00e9nement s’est produit MouseDown.
\nwhich – Repr\u00e9sente 1 pour le clic gauche de la souris et 3 pour le clic droit de la souris.
\nmodifiers – Contient une liste de touches de modification qui ont \u00e9t\u00e9 enfonc\u00e9es lorsque l’\u00e9v\u00e9nement MouseDown s’est produit.<\/p>\n
Appeler une fonction lorsque le bouton de la souris est enfonc\u00e9 sur un paragraphe:<\/p>\n
\r\n<p onmousedown="myFunction()">Click the text!<\/p>\r\n<\/pre>\nIci, l’utilisateur peut d\u00e9placer l’image sur la page HTML en la faisant glisser avec la souris. Votre code HTML d\u00e9finit une image et la positionne dans un calque appel\u00e9 container1. Dans le code JavaScript, les gestionnaires d’\u00e9v\u00e9nements d\u00e9finissent les propri\u00e9t\u00e9s de positionnement de container1 lorsque l’utilisateur fait glisser l’image, cr\u00e9ant ainsi une animation. L’attribut ID de l’\u00e9l\u00e9ment P qui contient l’image est d\u00e9fini sur container1 , faisant de container1 un identifiant unique pour le paragraphe et l’image. La balise STYLE cr\u00e9e un calque pour container1 et le positionne. Le code JavaScript ci-dessous d\u00e9finit les gestionnaires onMouseDown, onMouseUp et onMouseMove. Utiliser des feuilles de style\/style sheets, l’image est initialement d\u00e9finie et positionn\u00e9e comme suit:<\/p>\n
\r\n<HEAD>\r\n<STYLE type="text\/css">\r\n #container1 {\r\nposition:absolute; left:200; top:200}\r\n<\/STYLE>\r\n<\/HEAD>\r\n<BODY>\r\n<P ID="container1">\r\n<img src="backgrnd.gif" name="myImage" width=96 height=96>\r\n<\/P>\r\n<\/BODY>\r\n<\/pre>\nDans ce code, la m\u00e9thode captureEvents capture les \u00e9v\u00e9nements MouseUp et MouseDown. Les fonctions DRAG_begindrag et DRAG_enddrag sont appel\u00e9es respectivement pour g\u00e9rer ces \u00e9v\u00e9nements. Si l’utilisateur appuie sur le bouton gauche de la souris, la fonction DRAG_begindrag d\u00e9marre, capturant les \u00e9v\u00e9nements MouseMove et indiquant \u00e0 la fonction DRAG_drag de les g\u00e9rer. Il attribue ensuite la valeur de la propri\u00e9t\u00e9 pageX de l’\u00e9v\u00e9nement MouseDown \u00e0 la propri\u00e9t\u00e9 DRAG_lastX, la valeur de la propri\u00e9t\u00e9 pageY \u00e0 la propri\u00e9t\u00e9 DRAG_lastY et true \u00e0 la propri\u00e9t\u00e9 DRAG_dragging. La fonction DRAG_drag \u00e9value DRAG_dragging pour s’assurer que l’\u00e9v\u00e9nement MouseMove a \u00e9t\u00e9 captur\u00e9 par la fonction DRAG_begindrag, puis utilise la m\u00e9thode moveBy pour positionner l’objet et attribue des valeurs aux propri\u00e9t\u00e9s DRAG_lastX et DRAG_lastY. Lorsque l’utilisateur rel\u00e2che le bouton gauche de la souris, la fonction DRAG_enddrag arr\u00eate de capturer les \u00e9v\u00e9nements MouseMove. DRAG_enddrag garantit ensuite qu’aucune autre fonction n’est appel\u00e9e en d\u00e9finissant onmousemove sur Null et DRAG_dragging sur false.<\/p>\n
\r\n<SCRIPT>\r\ncontainer1.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);\r\ncontainer1.onmousedown=DRAG_begindrag;\r\ncontainer1.onmouseup=DRAG_enddrag;\r\nvar DRAG_lastX, DRAG_lastY, DRAG_dragging;\r\nfunction DRAG_begindrag(e) {\r\nif (e.which == 1) {\r\nwindow.captureEvents(Event.MOUSEMOVE);\r\n window.onmousemove=DRAG_drag;\r\nDRAG_lastX=e.pageX;\r\nDRAG_lastY=e.pageY;\r\nDRAG_dragging=true;\r\nreturn false;\r\n}\r\nelse {\r\n\/*Voici quelques travaux sur la gestion du clic droit de la souris*\/\r\nreturn true;\r\n}\r\n}\r\nfunction DRAG_enddrag(e) {\r\nif (e.which == 1) {\r\nwindow.releaseEvents(Event.MOUSEMOVE);\r\n window.onmousemove=null\r\nDRAG_dragging=false;\r\nreturn false;\r\n}\r\nelse {\r\n\/*Voici quelques travaux sur la gestion du clic droit de la souris*\/\r\nreturn true;\r\n}\r\n}\r\nfunction DRAG_drag(e) {\r\nif (DRAG_dragging) {\r\n\/*Cette fonction est appel\u00e9e uniquement si elle est captur\u00e9e MOUSEMOVE*\/\r\nmoveBy(e.pageX-DRAG_lastX, e.pageY-DRAG_lastY);\r\nDRAG_lastX = e.pageX;\r\nDRAG_lastY = e.pageY;\r\nreturn false;\r\n}\r\nelse {\r\nreturn true;\r\n}\r\n}\r\n<\/SCRIPT>\r\n<\/pre>\nonmouseenter<\/span><\/h2>\n\u2013 le pointeur de la souris survole l’\u00e9l\u00e9ment. Gestionnaire de l’\u00e9v\u00e9nement mouseenter, qui se produit lorsque le curseur de la souris entre dans la zone de l’\u00e9l\u00e9ment. Contrairement au survol de la souris, l’\u00e9v\u00e9nement mouseenter ne se propage pas, c’est-\u00e0-dire qu’il ne se produit pas si le curseur de la souris entre dans un \u00e9l\u00e9ment enfant de l’\u00e9l\u00e9ment sp\u00e9cifi\u00e9. L’\u00e9v\u00e9nement onmouseenter se produit lorsque le pointeur de la souris entre dans un \u00e9l\u00e9ment. L’\u00e9v\u00e9nement onmouseenter est souvent utilis\u00e9 avec l’\u00e9v\u00e9nement onmouseleave, qui se produit lorsque le pointeur de la souris quitte un \u00e9l\u00e9ment. L’\u00e9v\u00e9nement onmouseenter est similaire \u00e0 l’\u00e9v\u00e9nement onmouseover. La diff\u00e9rence est que l’\u00e9v\u00e9nement onmouseenter ne se propage pas (ne se propage pas dans la hi\u00e9rarchie du document).<\/p>\n
Un \u00e9v\u00e9nement mouseenter est envoy\u00e9 \u00e0 chaque \u00e9l\u00e9ment de la hi\u00e9rarchie lorsqu’ils sont saisis. Ici, 4 \u00e9v\u00e9nements sont envoy\u00e9s \u00e0 4 \u00e9l\u00e9ments de la hi\u00e9rarchie lorsque le pointeur atteint le texte. Un seul \u00e9v\u00e9nement de survol de la souris est envoy\u00e9 \u00e0 l’\u00e9l\u00e9ment le plus profond de l’arborescence DOM, puis remonte la hi\u00e9rarchie jusqu’\u00e0 ce qu’il soit annul\u00e9 par un gestionnaire ou atteigne la racine. Avec une hi\u00e9rarchie profonde, le nombre d’\u00e9v\u00e9nements de survol de souris envoy\u00e9s peut \u00eatre assez important et entra\u00eener des probl\u00e8mes de performances importants. Dans de tels cas, il est pr\u00e9f\u00e9rable de g\u00e9rer les \u00e9v\u00e9nements mouseenter. Lorsqu’il est combin\u00e9 avec l’\u00e9v\u00e9nement mouseleave correspondant (qui se d\u00e9clenche sur un \u00e9l\u00e9ment lorsque la souris quitte la zone de contenu), l’\u00e9v\u00e9nement mouseenter agit de mani\u00e8re tr\u00e8s similaire \u00e0 la pseudo-classe CSS :hover.<\/p>\n
Appeler une fonction lorsque le pointeur de la souris survole une image:<\/p>\n
\r\n<img onmouseenter="bigImg(this)" src="smiley.gif" alt="Smiley">\r\n<\/pre>\nJavaScript:<\/p>\n
\r\nobject.onmouseenter = function(){myScript};\r\nJavaScript, using the addEventListener() method:\r\nobject.addEventListener("mouseenter", myScript);\r\n<\/pre>\nCet exemple d\u00e9montre la diff\u00e9rence entre les \u00e9v\u00e9nements onmousemove, onmouseenter et mouseover:<\/p>\n
\r\n<div onmousemove="myMoveFunction()">\r\n <p id="demo1">I will demonstrate onmousemove!<\/p>\r\n<\/div>\r\n<div onmouseenter="myEnterFunction()">\r\n <p id="demo2">I will demonstrate onmouseenter!<\/p>\r\n<\/div>\r\n<div onmouseover="myOverFunction()">\r\n <p id="demo3">I will demonstrate onmouseover!<\/p>\r\n<\/div>\r\n<\/pre>\nL’exemple trivial suivant utilise l’\u00e9v\u00e9nement mouseenter pour modifier la bordure d’un \u00e9l\u00e9ment div lorsque la souris entre dans l’espace qui lui est allou\u00e9. Il ajoute ensuite l’\u00e9l\u00e9ment \u00e0 la liste lors de l’\u00e9v\u00e9nement mouseenter ou mouseleave.<\/p>\n
\r\n<SCRIPT>\r\nvar enterEventCount = 0;\r\nvar leaveEventCount = 0;\r\nconst mouseTarget = document.getElementById("mouseTarget");\r\nconst unorderedList = document.getElementById("unorderedList");\r\nmouseTarget.addEventListener("mouseenter", (e) => {\r\n mouseTarget.style.border = "5px dotted orange";\r\n enterEventCount++;\r\n addListItem("This is mouseenter event " + enterEventCount + ".");\r\n});\r\nmouseTarget.addEventListener("mouseleave", (e) => {\r\n mouseTarget.style.border = "1px solid #333";\r\n leaveEventCount++;\r\n addListItem("This is mouseleave event " + leaveEventCount + ".");\r\n});\r\nfunction addListItem(text) {\r\n \/\/ Cr\u00e9ez un nouveau n\u0153ud de texte en utilisant le texte fourni\r\n var newTextNode = document.createTextNode(text);\r\n \/\/ Cr\u00e9er un nouvel \u00e9l\u00e9ment li\r\n var newListItem = document.createElement("li");\r\n \/\/ Ajouter un n\u0153ud de texte \u00e0 un \u00e9l\u00e9ment li\r\n newListItem.appendChild(newTextNode);\r\n \/\/ Ajouter l'\u00e9l\u00e9ment de liste nouvellement cr\u00e9\u00e9 \u00e0 la liste\r\n unorderedList.appendChild(newListItem);\r\n}\r\n<SCRIPT>\r\n<style>\r\n#mouseTarget {\r\n box-sizing: border-box;\r\n width: 15rem;\r\n border: 1px solid #333;\r\n}\r\n<\/style>\r\n<div id="mouseTarget">\r\n <ul id="unorderedList">\r\n <li>No events yet!<\/li>\r\n <\/ul>\r\n<\/div>\r\n<\/pre>\nonmouseleave<\/span><\/h2>\n\u2013 le pointeur de la souris a quitt\u00e9 l’\u00e9l\u00e9ment. Gestionnaire de l’\u00e9v\u00e9nement mouseleave qui se produit lorsque le curseur de la souris quitte la zone de l’\u00e9l\u00e9ment. Contrairement \u00e0 mouseout, l’\u00e9v\u00e9nement mouseenter ne bouillonne pas, c’est-\u00e0-dire qu’il ne se produit pas si le curseur de la souris entre dans un \u00e9l\u00e9ment enfant de l’\u00e9l\u00e9ment sp\u00e9cifi\u00e9. L’\u00e9v\u00e9nement onmouseleave se produit lorsque le pointeur de la souris quitte un \u00e9l\u00e9ment. L’\u00e9v\u00e9nement onmouseleave est souvent utilis\u00e9 avec l’\u00e9v\u00e9nement onmouseenter, qui se produit lorsque le pointeur de la souris entre dans un \u00e9l\u00e9ment. L’\u00e9v\u00e9nement onmouseleave est similaire \u00e0 l’\u00e9v\u00e9nement onmouseout. La diff\u00e9rence est que l’\u00e9v\u00e9nement onmouseleave ne se propage pas (ne se propage pas dans la hi\u00e9rarchie du document).<\/p>\n
L’\u00e9v\u00e9nement mouseleave est d\u00e9clench\u00e9 lorsque le curseur du manipulateur (g\u00e9n\u00e9ralement la souris) se d\u00e9place en dehors des limites d’un \u00e9l\u00e9ment. mouseleave et mouseout sont similaires, mais diff\u00e8rent en ce que mouseleave ne flotte pas, tandis que mouseout le fait. Cela signifie que mouseleave se d\u00e9clenche lorsque le curseur quitte les limites de l’\u00e9l\u00e9ment et de tous ses \u00e9l\u00e9ments enfants, tandis que mouseout se d\u00e9clenche lorsque le curseur quitte les limites de l’\u00e9l\u00e9ment ou de l’un de ses \u00e9l\u00e9ments enfants (m\u00eame si le curseur est toujours dans l’\u00e9l\u00e9ment).<\/p>\n
Appeler une fonction lorsque le pointeur de la souris se d\u00e9place en dehors de l’image:<\/p>\n
\r\n<img onmouseleave="normalImg(this)" src="smiley.gif" alt="Smiley">\r\n<\/pre>\nJavaScript:<\/p>\n
\r\nobject.onmouseleave = function(){myScript};\r\nJavaScript, using the addEventListener() method:\r\nobject.addEventListener("mouseleave", myScript);\r\n<\/pre>\nCet exemple d\u00e9montre la diff\u00e9rence entre les \u00e9v\u00e9nements onmousemove, onmouseleave et onmouseout:<\/p>\n
\r\n<div onmousemove="myMoveFunction()">\r\n <p id="demo1">I will demonstrate onmousemove!<\/p>\r\n<\/div>\r\n<div onmouseleave="myLeaveFunction()">\r\n <p id="demo2">I will demonstrate onmouseleave!<\/p>\r\n<\/div>\r\n<div onmouseout="myOutFunction()">\r\n <p id="demo3">I will demonstrate onmouseout!<\/p>\r\n<\/div>\r\n<\/pre>\nLa documentation mouseout contient un exemple illustrant la diff\u00e9rence entre mouseout et mouseleave. L’exemple suivant montre comment utiliser mouseout pour imiter le principe de d\u00e9l\u00e9gation d’\u00e9v\u00e9nement mouseleave.<\/p>\n
\r\n<ul id="test">\r\n <li>\r\n <ul class="leave-sensitive">\r\n <li>item 1-1<\/li>\r\n <li>item 1-2<\/li>\r\n <\/ul>\r\n <\/li>\r\n <li>\r\n <ul class="leave-sensitive">\r\n <li>item 2-1<\/li>\r\n <li>item 2-2<\/li>\r\n <\/ul>\r\n <\/li>\r\n<\/ul>\r\n<script>\r\n var delegationSelector = ".leave-sensitive";\r\n document.getElementById("test").addEventListener(\r\n "mouseout",\r\n function (event) {\r\n var target = event.target,\r\n related = event.relatedTarget,\r\n match;\r\n \/\/ search for a parent node matching the delegation selector\r\n while (\r\n target &&\r\n target != document &&\r\n !(match = matches(target, delegationSelector))\r\n ) {\r\n target = target.parentNode;\r\n }\r\n\r\n \/\/ exit if no matching node has been found\r\n if (!match) {\r\n return;\r\n }\r\n \/\/ loop through the parent of the related target to make sure that it's not a child of the target\r\n while (related && related != target && related != document) {\r\n related = related.parentNode;\r\n }\r\n \/\/ exit if this is the case\r\n if (related == target) {\r\n return;\r\n }\r\n \/\/ the "delegated mouseleave" handler can now be executed\r\n \/\/ change the color of the text\r\n target.style.color = "orange";\r\n \/\/ reset the color after a small amount of time\r\n setTimeout(function () {\r\n target.style.color = "";\r\n }, 500);\r\n },\r\n false,\r\n );\r\n \/\/ function used to check if a DOM element matches a given selector\r\n \/\/ the following code can be replaced by this IE8 compatible function: https:\/\/gist.github.com\/2851541\r\n function matches(elem, selector) {\r\n \/\/ the matchesSelector is prefixed in most (if not all) browsers\r\n return elem.matchesSelector(selector);\r\n }\r\n<\/script>\r\n<\/pre>\nonmousemove<\/span><\/h2>\n– le pointeur de la souris est d\u00e9plac\u00e9 sur l’\u00e9l\u00e9ment. Gestionnaire de l’\u00e9v\u00e9nement mousemove qui se produit lorsque le pointeur de la souris se d\u00e9place sur un \u00e9l\u00e9ment.
\ntype – Indique le type d’\u00e9v\u00e9nement.
\ntarget – Sp\u00e9cifie l’objet auquel l’\u00e9v\u00e9nement a \u00e9t\u00e9 initialement envoy\u00e9.
\nlayerX, layerY, pageX, pageY, screenX, screenY – L’emplacement du curseur lorsque l’\u00e9v\u00e9nement s’est produit MouseMove.<\/p>\n
JavaScript:<\/p>\n
\r\nobject.onmousemove = function(){myScript};\r\nJavaScript, using the addEventListener() method:\r\nobject.addEventListener("mousemove", myScript);\r\n<\/pre>\nAppeler une fonction lorsque la souris survole un \u00e9l\u00e9ment div:<\/p>\n
\r\n<div onmousemove="myFunction()">Move the cursor over me<\/div>\r\n<\/pre>\nL’exemple suivant utilise les \u00e9v\u00e9nements mousedown, mousemove et mouseup pour permettre \u00e0 l’utilisateur de dessiner sur un canevas HTML. Son fonctionnement est simple: l’\u00e9paisseur de la ligne est fix\u00e9e \u00e0 1 et la couleur est toujours noire. Lorsque la page se charge, les constantes myPics et context sont cr\u00e9\u00e9es pour stocker une r\u00e9f\u00e9rence au canevas et au contexte 2D que nous utiliserons pour le dessin. Le dessin commence lorsque l’\u00e9v\u00e9nement mousedown est d\u00e9clench\u00e9. Nous stockons d\u2019abord les coordonn\u00e9es x et y du pointeur de la souris dans les variables x et y, puis nous d\u00e9finissons isDrawing sur true. Lorsque le pointeur de la souris se d\u00e9place sur la page, l’\u00e9v\u00e9nement mousemove est d\u00e9clench\u00e9. Si isDrawing est vrai, le gestionnaire d’\u00e9v\u00e9nements appelle la fonction drawLine pour tracer une ligne \u00e0 partir des valeurs x et y stock\u00e9es jusqu’\u00e0 l’emplacement actuel. Lorsque la fonction drawLine() revient, nous ajustons les coordonn\u00e9es puis les stockons dans les coordonn\u00e9es x et y. L’\u00e9v\u00e9nement mouseup dessine le dernier segment de ligne, d\u00e9finit x et y sur 0 et arr\u00eate le dessin ult\u00e9rieur en d\u00e9finissant isDrawing sur false.<\/p>\n
\r\n<script>\r\n\/\/ When true, moving the mouse draws on the canvas\r\nlet isDrawing = false;\r\nlet x = 0;\r\nlet y = 0;\r\nconst myPics = document.getElementById("myPics");\r\nconst context = myPics.getContext("2d");\r\n\/\/ event.offsetX, event.offsetY gives the (x,y) offset from the edge of the canvas.\r\n\/\/ Add the event listeners for mousedown, mousemove, and mouseup\r\nmyPics.addEventListener("mousedown", (e) => {\r\n x = e.offsetX;\r\n y = e.offsetY;\r\n isDrawing = true;\r\n});\r\nmyPics.addEventListener("mousemove", (e) => {\r\n if (isDrawing) {\r\n drawLine(context, x, y, e.offsetX, e.offsetY);\r\n x = e.offsetX;\r\n y = e.offsetY;\r\n }\r\n});\r\nwindow.addEventListener("mouseup", (e) => {\r\n if (isDrawing) {\r\n drawLine(context, x, y, e.offsetX, e.offsetY);\r\n x = 0;\r\n y = 0;\r\n isDrawing = false;\r\n }\r\n});\r\nfunction drawLine(context, x1, y1, x2, y2) {\r\n context.beginPath();\r\n context.strokeStyle = "black";\r\n context.lineWidth = 1;\r\n context.moveTo(x1, y1);\r\n context.lineTo(x2, y2);\r\n context.stroke();\r\n context.closePath();\r\n}\r\n<\/script>\r\n<style>\r\ncanvas {\r\n border: 1px solid black;\r\n width: 560px;\r\n height: 360px;\r\n}\r\n<\/style>\r\n<h1>Drawing with mouse events<\/h1>\r\n<canvas id="myPics" width="560" height="360"><\/canvas>\r\n<\/pre>\nonmouseout<\/span><\/h2>\n– le pointeur de la souris s’\u00e9loigne de l’\u00e9l\u00e9ment. Gestionnaire de l’\u00e9v\u00e9nement mouseout qui se produit lorsque le pointeur de la souris quitte l’\u00e9l\u00e9ment. Ex\u00e9cute le code JavaScript lorsqu’un \u00e9v\u00e9nement MouseOut se produit; c’est-\u00e0-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\u00e9place d’une zone de la carte d’image client \u00e0 une autre, vous recevrez d’abord onMouseOut pour la premi\u00e8re zone, puis onMouseOver pour la deuxi\u00e8me 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’\u00e9v\u00e9nements si vous souhaitez d\u00e9finir les propri\u00e9t\u00e9s status ou defaultStatus \u00e0 l’aide de onMouseOver.<\/p>\n\n
L’\u00e9v\u00e9nement onmouseout se produit lorsque le pointeur de la souris quitte les limites d’un \u00e9l\u00e9ment. L’\u00e9v\u00e9nement onmouseout est souvent utilis\u00e9 en conjonction avec l’\u00e9v\u00e9nement onmouseover, qui se produit lorsque le pointeur survole un \u00e9l\u00e9ment. L’\u00e9v\u00e9nement onmouseout est similaire \u00e0 l’\u00e9v\u00e9nement onmouseleave. La diff\u00e9rence est que l’\u00e9v\u00e9nement onmouseleave ne se propage pas (ne se propage pas dans la hi\u00e9rarchie du document). <\/p>\n
type – Indique le type d’\u00e9v\u00e9nement.
\ntarget – Sp\u00e9cifie l’objet auquel l’\u00e9v\u00e9nement a \u00e9t\u00e9 initialement envoy\u00e9.
\nlayerX, layerY, pageX, pageY, screenX, screenY – L’emplacement du curseur lorsque l’\u00e9v\u00e9nement MouseOut se produit<\/p>\n
Appeler une fonction lorsque le pointeur de la souris se d\u00e9place en dehors de l’image:<\/p>\n
\r\n<img onmouseout="normalImg(this)" src="smiley.gif" alt="Smiley">\r\n<\/pre>\nL’exemple suivant illustre la diff\u00e9rence entre les \u00e9v\u00e9nements mouseout et mouseleave. Un \u00e9v\u00e9nement mouseleave est ajout\u00e9 \u00e0 l’ul pour colorer la liste en violet chaque fois que la souris quitte l’ul. mouseout est ajout\u00e9 \u00e0 la liste pour colorer l’\u00e9l\u00e9ment cible en orange lorsque la souris le quitte. Lorsque vous essayez ceci, vous constaterez que mouseout est transmis aux \u00e9l\u00e9ments de liste individuels, tandis que mouseleave est transmis \u00e0 la liste enti\u00e8re, gr\u00e2ce \u00e0 la hi\u00e9rarchie des \u00e9l\u00e9ments et au fait que les \u00e9l\u00e9ments de la liste masquent l’ul sous-jacent.<\/p>\n
\r\n<script>\r\nconst test = document.getElementById("test");\r\n\/\/ Briefly make the list purple when the mouse moves off the\r\n\/\/ <ul> element\r\ntest.addEventListener(\r\n "mouseleave",\r\n (event) => {\r\n \/\/ highlight the mouseleave target\r\n event.target.style.color = "purple";\r\n\r\n \/\/ reset the color after a short delay\r\n setTimeout(() => {\r\n event.target.style.color = "";\r\n }, 1000);\r\n },\r\n false,\r\n);\r\n\/\/ Briefly make an <li> orange when the mouse moves off of it\r\ntest.addEventListener(\r\n "mouseout",\r\n (event) => {\r\n \/\/ highlight the mouseout target\r\n event.target.style.color = "orange";\r\n\r\n \/\/ reset the color after a short delay\r\n setTimeout(() => {\r\n event.target.style.color = "";\r\n }, 500);\r\n },\r\n false,\r\n);\r\n<\/script>\r\n<ul id="test">\r\n <li>item 1<\/li>\r\n <li>item 2<\/li>\r\n <li>item 3<\/li>\r\n<\/ul>\r\n<\/pre>\nonmouseover<\/span><\/h2>\n– le pointeur de la souris se d\u00e9place sur l’\u00e9l\u00e9ment. Gestionnaire pour l’\u00e9v\u00e9nement mouseover, qui se produit lorsque le curseur de la souris survole un \u00e9l\u00e9ment. L’\u00e9v\u00e9nement onmouseover se produit lorsque le pointeur de la souris entre dans un \u00e9l\u00e9ment. L’\u00e9v\u00e9nement onmouseover est souvent utilis\u00e9 en conjonction avec l’\u00e9v\u00e9nement onmouseout, qui se produit lorsque le pointeur de la souris quitte un \u00e9l\u00e9ment. L’\u00e9v\u00e9nement onmouseover est similaire \u00e0 l’\u00e9v\u00e9nement onmouseenter. La diff\u00e9rence est que l’\u00e9v\u00e9nement onmouseenter ne se propage pas (ne se propage pas dans la hi\u00e9rarchie du document). L’\u00e9v\u00e9nement mouseover est d\u00e9clench\u00e9 sur un \u00e9l\u00e9ment lorsqu’un p\u00e9riph\u00e9rique de pointage (tel qu’une souris ou un pav\u00e9 tactile) est utilis\u00e9 pour d\u00e9placer le curseur sur l’\u00e9l\u00e9ment ou l’un de ses \u00e9l\u00e9ments enfants.<\/p>\n
Appeler une fonction lorsque le pointeur de la souris survole une image:<\/p>\n
\r\n<img onmouseover="bigImg(this)" src="smiley.gif" alt="Smiley">\r\n<\/pre>\nPar d\u00e9faut, la valeur HREF d’une ancre s’affiche dans la barre d’\u00e9tat 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\u00e9 \u00ab\u00a0Click this if you dare.\u00a0\u00bb<\/p>\n
\r\n<A HREF="http:\/\/home.netscape.com\/" onMouseOver="window.status='Click this if you dare!'; return true">Click me<\/A>\r\n<\/pre>\nonmouseup<\/span><\/h2>\n– le bouton de la souris est rel\u00e2ch\u00e9 sur l’\u00e9l\u00e9ment. Gestionnaire de l’\u00e9v\u00e9nement mouseup qui se produit lorsque le bouton de la souris est rel\u00e2ch\u00e9 sur un \u00e9l\u00e9ment. Si onMouseUp renvoie false, l’action par d\u00e9faut est annul\u00e9e. Par exemple, si onMouseUp renvoie false lorsqu’un lien hypertexte est actif, le lien n’est pas activ\u00e9. Ainsi, si MouseUp se produit lorsque le lien hypertexte n’est pas actif (\u00e9ventuellement lorsque onMouseDown renvoie false), le lien n’est pas activ\u00e9. L’activation est d\u00e9clench\u00e9e par l’\u00e9v\u00e9nement MouseDown sur le lien. Lorsqu’un lien est actif, il change de couleur pour refl\u00e9ter le nouvel \u00e9tat. L’\u00e9v\u00e9nement onmouseup se produit lorsque le bouton de la souris est rel\u00e2ch\u00e9 sur un \u00e9l\u00e9ment.<\/p>\n
L’\u00e9v\u00e9nement mouseup est d\u00e9clench\u00e9 sur un \u00e9l\u00e9ment lorsqu’un bouton d’un p\u00e9riph\u00e9rique de pointage (tel qu’une souris ou un trackpad) est rel\u00e2ch\u00e9 alors que le pointeur est \u00e0 l’int\u00e9rieur. Les \u00e9v\u00e9nements mouseup sont l’oppos\u00e9 des \u00e9v\u00e9nements mousedown.<\/p>\n
Ordre des \u00e9v\u00e9nements pour les boutons gauche et central de la souris:
\nonmousedown
\nonmouseup
\n\u043f\u043e \u043a\u043b\u0438\u043a\u0443
\nOrdre des \u00e9v\u00e9nements du bouton droit de la souris:
\nonmousedown
\nonmouseup
\noncontextmenu<\/p>\n
type – Indique le type d’\u00e9v\u00e9nement.
\ntarget – Sp\u00e9cifie l’objet auquel l’\u00e9v\u00e9nement a \u00e9t\u00e9 initialement envoy\u00e9.
\nlayerX, layerY, pageX, pageY, screenX, screenY – L’emplacement du curseur lorsque l’\u00e9v\u00e9nement s’est produit MouseUp.
\nwhich -Repr\u00e9sente 1 pour le bouton gauche de la souris et 3 pour le bouton droit de la souris.
\nmodifiers – Contient une liste de touches de modification qui ont \u00e9t\u00e9 enfonc\u00e9es lorsque l’\u00e9v\u00e9nement MouseUp s’est produit.<\/p>\n
Appeler une fonction lorsque le bouton de la souris est rel\u00e2ch\u00e9 sur un paragraphe:<\/p>\n
\r\n<p onmouseup="mouseUp()">Click the text!<\/p>\r\n<\/pre>\nonmousewheel (onwheel)<\/span><\/h2>\n\u2013 molette de la souris utilis\u00e9e. Gestionnaire d’\u00e9v\u00e9nements wheel, qui se produit lorsque la molette de la souris est d\u00e9plac\u00e9e vers l’avant ou vers l’arri\u00e8re sur un \u00e9l\u00e9ment. L’\u00e9v\u00e9nement onwheel se produit lorsque la molette de la souris survole un \u00e9l\u00e9ment. L’\u00e9v\u00e9nement onwheel se produit \u00e9galement lorsque l’utilisateur fait d\u00e9filer une page \u00e0 l’aide d’un pav\u00e9 tactile. Cet \u00e9v\u00e9nement remplace l’\u00e9v\u00e9nement de molette de souris h\u00e9rit\u00e9 non standard. Ne confondez pas l\u2019\u00e9v\u00e9nement de roue avec l\u2019\u00e9v\u00e9nement de d\u00e9filement. L’\u00e9v\u00e9nement wheel ne d\u00e9clenche pas n\u00e9cessairement un \u00e9v\u00e9nement scroll. Par exemple, un \u00e9l\u00e9ment peut ne pas \u00eatre du tout d\u00e9filable. Les actions de zoom utilisant la molette ou le pav\u00e9 tactile d\u00e9clenchent \u00e9galement des \u00e9v\u00e9nements de molette. L’\u00e9v\u00e9nement de d\u00e9filement n’est pas n\u00e9cessairement d\u00e9clench\u00e9 par l’\u00e9v\u00e9nement de roue. Les \u00e9l\u00e9ments peuvent \u00e9galement \u00eatre parcourus \u00e0 l’aide du clavier, en faisant glisser la barre de d\u00e9filement ou en utilisant JavaScript.<\/p>\n
M\u00eame si un \u00e9v\u00e9nement de roue d\u00e9clenche le d\u00e9filement, les valeurs delta* dans l’\u00e9v\u00e9nement de roue ne refl\u00e8tent pas n\u00e9cessairement la direction dans laquelle le contenu d\u00e9file. Par cons\u00e9quent, ne vous fiez pas aux propri\u00e9t\u00e9s delta* de l\u2019\u00e9v\u00e9nement wheel pour obtenir la direction de d\u00e9filement. Au lieu de cela, d\u00e9tectez les modifications apport\u00e9es aux valeurs ScrollLeft et ScrollTop de la cible dans l’\u00e9v\u00e9nement de d\u00e9filement.<\/p>\n
L’\u00e9v\u00e9nement Wheel peut \u00eatre annul\u00e9. Si l’\u00e9v\u00e9nement est annul\u00e9, aucun d\u00e9filement ni zoom ne se produit. Cela peut entra\u00eener des probl\u00e8mes de performances car le navigateur doit attendre que chaque \u00e9v\u00e9nement de roue soit trait\u00e9 avant de faire d\u00e9filer r\u00e9ellement le contenu. Cela peut \u00eatre \u00e9vit\u00e9 en d\u00e9finissant passive: true lors de l’appel de addEventListener(), ce qui peut amener le navigateur \u00e0 g\u00e9n\u00e9rer des \u00e9v\u00e9nements de roue non annulables.<\/p>\n
Lorsqu’un utilisateur fait d\u00e9filer la molette de sa souris sur un div, modifiez sa taille de police:<\/p>\n
\r\ndocument.getElementById("myDIV").addEventListener("wheel", myFunction);\r\nfunction myFunction() {\r\n this.style.fontSize = "35px";\r\n}\r\n<\/pre>\nCet exemple montre comment mettre \u00e0 l’\u00e9chelle un \u00e9l\u00e9ment \u00e0 l’aide de la molette de la souris (ou d’un autre p\u00e9riph\u00e9rique de pointage).<\/p>\n
\r\n<script>\r\nfunction zoom(event) {\r\n event.preventDefault();\r\n scale += event.deltaY * -0.01;\r\n \/\/ Restrict scale\r\n scale = Math.min(Math.max(0.125, scale), 4);\r\n\r\n \/\/ Apply scale transform\r\n el.style.transform = `scale(${scale})`;\r\n}\r\nlet scale = 1;\r\nconst el = document.querySelector("div");\r\nel.onwheel = zoom;\r\n<\/script>\r\n<style>\r\nbody {\r\n min-height: 100vh;\r\n margin: 0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\ndiv {\r\n width: 105px;\r\n height: 105px;\r\n background: #cdf;\r\n padding: 5px;\r\n}\r\n<\/style>\r\n<div>Scale me with your mouse wheel.<\/div>\r\n<\/pre>\nonoffline<\/span><\/h2>\n\u2013 Le navigateur fonctionne en mode hors ligne. L’\u00e9v\u00e9nement onoffline se produit lorsque le navigateur commence \u00e0 fonctionner hors ligne. L’\u00e9v\u00e9nement onoffline est l’oppos\u00e9 de l’\u00e9v\u00e9nement ononline.<\/p>\n
Appeler une fonction lorsque le navigateur est hors ligne:<\/p>\n
\r\n<body onoffline="myFunction()">\r\n<\/pre>\nononline<\/span><\/h2>\n\u2013 Le navigateur est lanc\u00e9 en mode en ligne. L’\u00e9v\u00e9nement ononline se produit lorsque le navigateur se connecte. L’\u00e9v\u00e9nement en ligne est l’oppos\u00e9 de l’\u00e9v\u00e9nement hors ligne.<\/p>\n
Appeler une fonction lorsque le navigateur est en ligne:<\/p>\n
\r\n<body ononline="myFunction()">\r\n<\/pre>\nonpagehide<\/span><\/h2>\n– l’utilisateur quitte la page. L’\u00e9v\u00e9nement onpagehide se produit lorsque l’utilisateur quitte une page Web. Il existe plusieurs fa\u00e7ons de quitter la page. Par exemple. cliquer sur un lien, actualiser la page, soumettre un formulaire, fermer la fen\u00eatre du navigateur, etc. L’\u00e9v\u00e9nement onpagehide est parfois utilis\u00e9 \u00e0 la place de l’\u00e9v\u00e9nement onunload, car l’\u00e9v\u00e9nement onunload emp\u00eache la page d’\u00eatre mise en cache. Pour savoir si une page est charg\u00e9e directement depuis le serveur ou mise en cache, vous pouvez utiliser la propri\u00e9t\u00e9 persisted Objet PageTransitionEvent. Cette propri\u00e9t\u00e9 renvoie true si la page est mise en cache par le navigateur, et false dans le cas contraire.<\/p>\n
Appeler une fonction lorsque l’utilisateur quitte la page Web:<\/p>\n
\r\n<body onpagehide="myFunction()">\r\n<\/pre>\nonpageshow<\/span><\/h2>\n– l’utilisateur acc\u00e8de \u00e0 la page. L’\u00e9v\u00e9nement onpageshow se produit lorsqu’un utilisateur acc\u00e8de \u00e0 une page Web. L’\u00e9v\u00e9nement onpageshow est similaire \u00e0 l’\u00e9v\u00e9nement onload, sauf qu’il se produit apr\u00e8s l’\u00e9v\u00e9nement onload lors du premier chargement de la page. De plus, l’\u00e9v\u00e9nement onpageshow se d\u00e9clenche \u00e0 chaque fois que la page est charg\u00e9e, tandis que l’\u00e9v\u00e9nement onload ne se d\u00e9clenche pas lors du chargement de la page \u00e0 partir du cache.Pour savoir si une page a \u00e9t\u00e9 charg\u00e9e directement depuis le serveur ou mise en cache, vous pouvez utiliser la propri\u00e9t\u00e9 persisted de l’objet PageTransitionEvent. Cette propri\u00e9t\u00e9 renvoie true si la page est mise en cache par le navigateur, et false sinon<\/p>\n
Appeler une fonction lorsque l’utilisateur acc\u00e8de \u00e0 une page Web:<\/p>\n
\r\n<body onpageshow="myFunction()">\r\n<\/pre>\nonpaste<\/span><\/h2>\n\u2013 insertion de contenu termin\u00e9e. L’\u00e9v\u00e9nement onpaste se produit lorsque l’utilisateur colle du contenu dans un \u00e9l\u00e9ment. L’\u00e9v\u00e9nement onpaste est le plus souvent utilis\u00e9 pour les \u00e9l\u00e9ments input avec type=\u00a0\u00bbtext\u00a0\u00bb. L’\u00e9v\u00e9nement de collage de l’API Presse-papiers est d\u00e9clench\u00e9 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 \u00e9l\u00e9ment avec l’attribut contenteditable d\u00e9fini sur true), l’action par d\u00e9faut consiste \u00e0 coller le contenu du presse-papiers dans le document \u00e0 la position du curseur. Le gestionnaire de cet \u00e9v\u00e9nement peut acc\u00e9der au contenu du presse-papiers en appelant la m\u00e9thode getData() sur la propri\u00e9t\u00e9 clipboardData de l’\u00e9v\u00e9nement. Pour remplacer le comportement par d\u00e9faut (par exemple, pour coller des donn\u00e9es diff\u00e9rentes ou transformer le contenu du presse-papiers), le gestionnaire d’\u00e9v\u00e9nements doit annuler l’action par d\u00e9faut avec event.preventDefault(), puis coller les donn\u00e9es souhait\u00e9es manuellement. Vous pouvez cr\u00e9er et envoyer un \u00e9v\u00e9nement de collage synth\u00e9tique, mais cela n’affectera pas le contenu du document. Cet \u00e9v\u00e9nement appara\u00eet, il peut \u00eatre annul\u00e9 et il est compos\u00e9. Utilis\u00e9 uniquement pour les champs de saisie.<\/p>\n
Appeler une fonction lorsque du texte est ins\u00e9r\u00e9 dans un \u00e9l\u00e9ment input:<\/p>\n
\r\n<input type="text" onpaste="myFunction()" value="Paste something here">\r\n<\/pre>\nAppelez une fonction lorsque du texte est ins\u00e9r\u00e9 dans l’\u00e9l\u00e9ment p. (Notez que contenteditable est d\u00e9fini sur \u00abtrue\u00bb):<\/p>\n
\r\n<p contenteditable="true" onpaste="myFunction()">Try to paste something inside this paragraph.<\/p>\r\n<\/pre>\nExemple<\/p>\n
\r\n<script>\r\nconst target = document.querySelector("div.target");\r\ntarget.addEventListener("paste", (event) => {\r\n event.preventDefault();\r\n let paste = (event.clipboardData || window.clipboardData).getData("text");\r\n paste = paste.toUpperCase();\r\n const selection = window.getSelection();\r\n if (!selection.rangeCount) return;\r\n selection.deleteFromDocument();\r\n selection.getRangeAt(0).insertNode(document.createTextNode(paste));\r\n selection.collapseToEnd();\r\n});\r\n<script>\r\n<div class="source" contenteditable="true">Copy text from this box.<\/div>\r\n<div class="target" contenteditable="true">And paste it into this one.<\/div>\r\n<\/pre>\nonpause<\/span><\/h2>\n\u2013 mettre la lecture en pause. Gestionnaire de l’\u00e9v\u00e9nement onpause, qui se produit lorsque la lecture audio\/vid\u00e9o est interrompue par l’utilisateur ou par programmation. L’\u00e9v\u00e9nement onpause se produit lorsque l’audio\/la vid\u00e9o est mis en pause. L’\u00e9v\u00e9nement onpause se produit \u00e9galement lorsque l’audio\/vid\u00e9o a atteint la fin.<\/p>\n
Appeler une fonction lorsque la vid\u00e9o est en pause:<\/p>\n
\r\n<video onpause="myFunction()">\r\n<\/pre>\nonplay<\/span><\/h2>\n\u2013 d\u00e9marrer la lecture. Gestionnaire de l’\u00e9v\u00e9nement onplay, qui est d\u00e9clench\u00e9 lorsque la lecture d’un fichier audio\/vid\u00e9o a commenc\u00e9.<\/p>\n
Appeler une fonction lorsque la lecture de la vid\u00e9o commence:<\/p>\n
\r\n<video onplay="myFunction()">\r\n<\/pre>\nonplaying<\/span><\/h2>\n\u2013 lecture de fichiers. Gestionnaire pour l’\u00e9v\u00e9nement onplaying, qui est d\u00e9clench\u00e9 lorsque la lecture d’un fichier audio\/vid\u00e9o a commenc\u00e9. L’\u00e9v\u00e9nement onplaying se produit lorsque la lecture audio\/vid\u00e9o commence. L’\u00e9v\u00e9nement onplaying se produit \u00e9galement lorsque l’audio\/la vid\u00e9o reprend apr\u00e8s avoir \u00e9t\u00e9 mis en pause ou mis en m\u00e9moire tampon.<\/p>\n
Appeler la fonction au d\u00e9marrage de la vid\u00e9o:<\/p>\n
\r\n<video onplaying="myFunction()">\r\n<\/pre>\nonprogress<\/span><\/h2>\n\u2013 obtenir les m\u00e9tadonn\u00e9es du fichier. Gestionnaire de l’\u00e9v\u00e9nement onprogress qui se produit lorsque le fichier audio\/vid\u00e9o sp\u00e9cifi\u00e9 est charg\u00e9 \u00e0 partir du serveur. L’\u00e9v\u00e9nement onprogress se produit lorsque le navigateur charge de l’audio ou de la vid\u00e9o.<\/p>\n
Appeler la fonction lors du chargement de la vid\u00e9o:<\/p>\n
\r\n<video onprogress="myFunction()">\r\n<\/pre>\nonratechange<\/span><\/h2>\n– modifier la vitesse de lecture. Gestionnaire de l’\u00e9v\u00e9nement onratechange, qui est d\u00e9clench\u00e9 lorsque la vitesse de lecture audio\/vid\u00e9o change (par exemple, lorsque l’utilisateur passe en mode de lecture lente ou rapide). L’\u00e9v\u00e9nement onratechange se produit lorsque la vitesse de lecture du m\u00e9dia change (par exemple, lorsque l’utilisateur passe en mode de lecture lente ou rapide). Cet \u00e9v\u00e9nement est d\u00e9clench\u00e9 par la propri\u00e9t\u00e9 de lecture Rate de l’objet Audio\/Vid\u00e9o, qui d\u00e9finit ou renvoie la vitesse de lecture audio\/vid\u00e9o actuelle.<\/p>\n
Appeler une fonction lorsque la vitesse de lecture de la vid\u00e9o change:<\/p>\n
\r\n<video onratechange="myFunction()">\r\n<\/pre>\nonreset<\/span><\/h2>\n\u2013 R\u00e9initialisation des donn\u00e9es termin\u00e9e. Gestionnaire de l’\u00e9v\u00e9nement onreset qui se produit lorsque le formulaire est effac\u00e9, ce qui se produit lorsque le bouton Reset est cliqu\u00e9. Ex\u00e9cute le code JavaScript lorsque l’\u00e9v\u00e9nement onreset se produit; c’est-\u00e0-dire lorsque l’utilisateur restaure les valeurs des \u00e9l\u00e9ments du formulaire (en cliquant sur le bouton Reset).<\/p>\n
Appeler une fonction lorsque le formulaire est r\u00e9initialis\u00e9:<\/p>\n
\r\n<form onreset="myFunction()">\r\n Enter name: <input type="text">\r\n <input type="reset">\r\n<\/form>\r\n<\/pre>\n