---
title: element.onchange
slug: Web/API/GlobalEventHandlers/onchange
tags:
  - DOM
  - DOM_0
  - Référence_du_DOM_Gecko
translation_of: Web/API/GlobalEventHandlers/onchange
---
<p>{{ ApiRef() }}</p>
<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
<p>La propriété <code>onchange</code> définit et renvoie le gestionnaire d'évènement <code>onChange</code> (modification) pour l'élément courant.</p>
<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
<pre class="eval">element.onchange = code de gestion de l'évènement
</pre>
<h3 id="Notes" name="Notes">Notes</h3>
<p>Le pseudo code suivant illustre la manière dont le gestionnaire d'évènement <code>change</code> est implémenté dans Mozilla :</p>
<pre>  control.onfocus = focus;
  control.onblur = blur;
  function focus () {
      original_value = control.value;
  }

  function blur () {
      if (control.value != original_value)
        control.onchange();
  }
</pre>
<p>Par conséquent, vous pouvez rencontrer des comportements inattendus dans l'évènement <code>change</code> si vous modifiez la valeur du contrôle dans vos propres gestionnaires d'évènements <code>focus</code> ou <code>blur</code>. De plus, l'évènement <code>change</code> se déclenche avant l'évènement <code>blur</code>. Ce comportement n'est pas le même que celui d'Internet Explorer.</p>
<h3 id="Specification" name="Specification">Specification</h3>
<p>{{ DOM0() }}</p>
<h3 id="Voir_aussi" name="Voir_aussi">Voir aussi</h3>
<ul>
 <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-htmlevents">DOM Level 2: HTML event types</a> <small>— traduction en français (non normative) : <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-events/events.html#Events-eventgroupings-htmlevents">DOM Niveau 2 Events : Les types d'événements HTML</a></small></li>
</ul>
<p>{{ languages( { "en": "en/DOM/element.onchange" } ) }}</p>