mdn · tristantheb · Jun 5, 2022 · May 15, 2022 · May 15, 2022 · May 15, 2022
@@ -1,64 +1,78 @@
 ---
-title: element.scrollLeft
+title: Element.scrollLeft
 slug: Web/API/Element/scrollLeft
-tags:
-  - DOM
-  - DOM_0
 translation_of: Web/API/Element/scrollLeft
+browser-compat: api.Element.scrollLeft
 ---
-{{ ApiRef() }}
+{{APIRef("DOM")}}
 
-### Résumé
+La propriété **`Element.scrollLeft`** permet de lire ou de modifier le nombre de pixels le long desquels le contenu d'un élément a défilé depuis son bord gauche.
 
-Définit ou obtient le nombre de pixels dont le contenu est défilé vers la gauche.
+Si la propriété [`direction`](/fr/docs/Web/CSS/direction) de l'élément vaut `rtl` (pour une écriture de droite à gauche), `scrollLeft` est à `0` lorsque la barre de défilement est à la position la plus à droite possible (ce qui correspond au début du contenu à faire défiler) et elle devient de plus en plus négative lors du défilement vers la fin du contenu.
 
-### Syntaxe
+Cette propriété peut être définie avec n'importe quelle valeur entière. Toutefois&nbsp;:
 
-    // Obtient le nombre de pixels défilés
-    var sLeft = element.scrollLeft;
+- Si l'élément ne peut pas défiler (par exemple parce qu'il n'y a aucun défilement), `scrollLeft` sera fixée à `0`.
+- Si la valeur fournie est inférieure à `0` (ou supérieure à `0` pour les éléments écrits de droite à gauche), `scrollLeft` sera fixée à `0`.
+- Si la valeur fournie est supérieure au défilement maximal possible pour le contenu, `scrollLeft` sera fixée à la valeur maximale possible.
 
-_sLeft_ est un entier représentant le nombre de pixels dont _element_ a été défilé vers la gauche.
+> **Attention :** Pour les systèmes qui utilisent une mise à l'échelle pour l'affichage (<i lang="en">display scaling</i>), `scrollLeft` pourra fournir une valeur décimale.
 
-    // Définit le nombre de pixels défilés
-    element.scrollLeft = 10;
+## Valeur
 
-**scrollLeft** peut être n'importe quelle valeur entière, cependant&nbsp;:
+Un nombre
 
-- Si l'élément ne peut pas défiler (par exemple parce qu'il ne déborde pas), `scrollLeft` est mis à 0.
-- S'il reçoit une valeur inférieure à 0, `scrollLeft` est mis à 0.
-- S'il reçoit une valeur plus grande que le maximum dont le contenu peut défiler, `scrollLeft` est mis au maximum.
+## Exemples
 
-### Exemple
+### HTML
 
 ```html
-<script type="text/javascript">
+<div id="container">
+  <div id="content">Cliquez sur le bouton pour glisser à droite !</div>
+</div>
 
-function doScrollLeft(el, p)
-{
-  el.scrollLeft = p;
-}
+<button id="slide" type="button">Glisser à droite</button>
+```
 
-</script>
+### CSS
 
-<div id="aDiv"
-     style="width: 100px; height: 200px; overflow: auto;"
->
-<script type="text/javascript">
-for (var i=0; i<100; ++i){
-  document.write(i + '-FooBar-FooBar-FooBar<br>');
+```css
+#container {
+  width: 100px;
+  height: 100px;
+  border: 1px solid #ccc;
+  overflow-x: scroll;
 }
-</script>
-</div>
-<br>
-<input type="button" value="Défile de 50 pixels"
-       onclick="doScrollLeft(document.getElementById('aDiv'), 50);"
->
+
+#content {
+  width: 250px;
+  background-color: #ccc;
+}
+```
+
+### JavaScript
+
+```js
+const button = document.getElementById('slide');
+
+button.onclick = function () {
+  document.getElementById('container').scrollLeft += 20;
+};
 ```
 
-### Spécification
+### Résultat
+
+{{EmbedLiveSample("")}}
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
 
-{{ DOM0() }}
+{{Compat}}
 
-### Références
+## Voir aussi
 
-- [_scrollLeft_ sur MSDN](http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/scrollleft.asp)
+- [`Element.scrollTop`](/fr/docs/Web/API/Element/scrollTop)
+- [`Element.scrollTo()`](/fr/docs/Web/API/Element/scrollTo)
@@ -1,59 +1,69 @@
 ---
-title: element.onblur
+title: GlobalEventHandlers.onblur
 slug: Web/API/GlobalEventHandlers/onblur
-tags:
-  - DOM
-  - DOM_0
 translation_of: Web/API/GlobalEventHandlers/onblur
+browser-compat: api.GlobalEventHandlers.onblur
 ---
-{{ ApiRef() }}
+{{ApiRef("HTML DOM")}}
 
-### Résumé
+La propriété **`onblur`**, rattachée au mixin [`GlobalEventHandlers`](/fr/docs/Web/API/GlobalEventHandlers), est [le gestionnaire d'évènements](/fr/docs/Web/Events/Event_handlers) qui permet de traiter les évènements [`blur`](/fr/docs/Web/API/Element/blur_event). Elle est disponible sur les interfaces [`Element`](/fr/docs/Web/API/Element), [`Document`](/fr/docs/Web/API/Document), et [`Window`](/fr/docs/Web/API/Window).
 
-La propriété **onblur** renvoie le gestionnaire de l'évènement `blur` (perte de focus) pour l'élément courant.
+L'évènement `blur` est déclenché lorsqu'un élément perd le focus.
 
-### Syntaxe
+> **Note :** Le gestionnaire d'évènement opposé à `onblur` est [`onfocus`](/fr/docs/Web/API/GlobalEventHandlers/onfocus).
 
-    element.onblur = nomFonctionUtilisateur;
+## Syntaxe
 
-- `nomFonctionUtilisateur` est le nom de la fonction utilisateur préalablement définie, sans les parenthèses ni aucun argument. Il est également possible de déclarer une «&nbsp;fonction anonyme&nbsp;», comme&nbsp;:
+```js
+cible.onblur = refFonction;
+```
+
+### Valeur
 
-<!---->
+`refFonction` est un nom de fonction ou une [expression de fonction](/fr/docs/Web/JavaScript/Reference/Operators/function). La fonction reçoit un objet [`FocusEvent`](/fr/docs/Web/API/FocusEvent) comme unique argument.
 
-    element.onblur = function() {
-        alert("Évènement onblur détecté");
-    };
+## Exemple
 
-### Exemple
+Cet exemple utilise `onblur` et [`onfocus`](/fr/docs/Web/API/GlobalEventHandlers/onfocus) pour changer le texte au sein d'un élément [`<input>`](/fr/docs/Web/HTML/Element/Input).
 
-Lorsqu'une zone de saisie n'est plus active suite à une perte du «&nbsp;focus&nbsp;», une boîte de message (alert) est affichée.
+### HTML
 
 ```html
-<form>
-	<input type="text" id="foo" value="Allo!" />
-</form>
+<input type="text" value="Cliquez ici">
+```
 
-<script type="text/javascript">
+### JavaScript
 
-var elem = document.getElementById("foo");
+```js
+let input = document.querySelector('input');
 
-// Attention&nbsp;: afficherMessage(); ou afficherMessage(param); ne fonctionneront pas ici,
-// il doit s'agir d'une référence au nom d'une fonction et non d'un appel de cette fonction
+input.onblur = inputBlur;
+input.onfocus = inputFocus;
 
-elem.onblur = afficherMessage;
+function inputBlur() {
+  input.value = 'Le focus a été perdu';
+}
 
-function afficherMessage() {
-	alert("Évènement onblur detecté!");
+function inputFocus() {
+  input.value = 'Le focus est là';
 }
-</script>
 ```
 
-### Notes
+### Résultat
+
+Essayez de cliquer à l'intérieur et en dehors du champ pour voir son contenu être modifié.
+
+{{EmbedLiveSample('')}}
+
+## Spécifications
+
+{{Specifications}}
 
-L'évènement `blur` se déclenche lors de la perte de focus d'un élément.
+## Compatibilité des navigateurs
 
-Microsoft Internet Explorer déclenche l'évènement `blur` sur presque tous les éléments, contrairement aux navigateurs Gecko (dont Firefox) qui ne le déclencheront que sur un nombre limité d'éléments.
+{{Compat}}
 
-### Spécification
+## Voir aussi
 
-{{ DOM0() }}
+- L'évènement [`blur`](/fr/docs/Web/API/Element/blur_event)
+- Le gestionnaire d'évènement dual&nbsp;: [`GlobalEventHandlers.onfocus`](/fr/docs/Web/API/GlobalEventHandlers/onfocus)
@@ -1,43 +1,62 @@
 ---
-title: element.onchange
+title: GlobalEventHandlers.onchange
 slug: Web/API/GlobalEventHandlers/onchange
-tags:
-  - DOM
-  - DOM_0
-  - Référence_du_DOM_Gecko
 translation_of: Web/API/GlobalEventHandlers/onchange
+browser-compat: api.GlobalEventHandlers.onchange
 ---
-{{ ApiRef() }}
+{{ApiRef("HTML DOM")}}
 
-### Résumé
+La propriété **`onchange`**, rattachée au mixin [`GlobalEventHandlers`](/fr/docs/Web/API/GlobalEventHandlers), est [un gestionnaire d'évènements](/fr/docs/Web/Events/Event_handlers) qui permet de traiter les évènements [`change`](/fr/docs/Web/API/HTMLElement/change_event).
 
-La propriété `onchange` définit et renvoie le gestionnaire d'évènement `onChange` (modification) pour l'élément courant.
+Les évènements `change` sont déclenchés lorsque la personne valide un changement de valeur dans un contrôle d'un formulaire. Cela peut se produire, par exemple, lors d'un clic à l'extérieur du contrôle ou en utilisant la touche <kbd>Tab</kbd> pour passer à un contrôle différent.
 
-### Syntaxe
+> **Note :** À la différence de [`oninput`](/fr/docs/Web/API/GlobalEventHandlers/oninput), le gestionnaire d'évènements `onchange` n'est pas nécessairement appelé pour chaque modification de la valeur (`value`) d'un élément.
 
-    element.onchange = code de gestion de l'évènement
+## Syntaxe
 
-### Notes
+```js
+cible.onchange = refFonction;
+```
 
-Le pseudo code suivant illustre la manière dont le gestionnaire d'évènement `change` est implémenté dans Mozilla&nbsp;:
+`refFonction` est un nom de fonction ou une [expression de fonction](/fr/docs/Web/JavaScript/Reference/Operators/function). La fonction reçoit un objet [`Event`](/fr/docs/Web/API/Event) comme unique argument.
 
-      control.onfocus = focus;
-      control.onblur = blur;
-      function focus () {
-          original_value = control.value;
-      }
+## Exemple
 
-      function blur () {
-          if (control.value&nbsp;!= original_value)
-            control.onchange();
-      }
+Dans cet exemple, on affiche dans un journal le nombre de caractères d'un élément [`<input>`](/fr/docs/Web/HTML/Element/Input) après chaque modification, une fois que le focus a été retiré du contrôle.
 
-Par conséquent, vous pouvez rencontrer des comportements inattendus dans l'évènement `change` si vous modifiez la valeur du contrôle dans vos propres gestionnaires d'évènements `focus` ou `blur`. De plus, l'évènement `change` se déclenche avant l'évènement `blur`. Ce comportement n'est pas le même que celui d'Internet Explorer.
+### HTML
 
-### Specification
+```html
+<input type="text" placeholder="Saisissez quelque chose ici, puis cliquez en dehors du champ." size="50">
+<p id="log"></p>
+```
 
-{{ DOM0() }}
+### JavaScript
 
-### Voir aussi
+```js
+let input = document.querySelector('input');
+let log = document.getElementById('log');
 
-- [DOM Level 2: HTML event types](http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-htmlevents) — traduction en français (non normative)&nbsp;: [DOM Niveau 2 Events&nbsp;: Les types d'événements HTML](http://www.yoyodesign.org/doc/w3c/dom2-events/events.html#Events-eventgroupings-htmlevents)
+input.onchange = handleChange;
+
+function handleChange(e) {
+  log.textContent = `La valeur du champ mesure 
+      ${e.target.value.length} caractère(s).`;
+}
+```
+
+### Résultat
+
+{{EmbedLiveSample("")}}
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Voir aussi
+
+- L'évènement [`change`](/fr/docs/Web/API/HTMLElement/change_event)