HTML | Evento de cambio de DOM

El evento onchange HTML DOM ocurre cuando se cambia el valor de un elemento. También funciona con botones de radio y casillas de verificación cuando se ha cambiado el estado marcado.

Nota: Este evento es similar al evento oninput pero la única diferencia es que el evento oninput ocurre inmediatamente después de que el valor de un elemento ha cambiado, mientras que onchange ocurre cuando el elemento pierde el foco.

Sintaxis:

En HTML:

<element onchange="myScript">

En JavaScript:

object.onchange = function(){myScript};

En JavaScript, usando el método addEventListener():

object.addEventListener("change", myScript);

Ejemplo: uso de HTML

<!DOCTYPE html>
<html>
  
<body>
    <center>
        <h1 style="color:green">
          GeeksforGeeks
      </h1>
        <h2>HTML DOM onchange Event</h2>
  
        <select id="LangSelect" onchange="GFGfun()">
            <option value="c">C</option>
            <option value="java">JAVA</option>
            <option value="html">HTML</option>
            <option value="python">PYTHON</option>
        </select>
  
        <p id="demo"></p>
  
        <script>
            function GFGfun() {
                var x = document.getElementById("LangSelect").value;
                document.getElementById(
                    "demo").innerHTML = "You selected: " + x;
            }
        </script>
    </center>
</body>
  
</html>

Salida:
Antes:

Después:

Ejemplo: Uso de JavaScript

<!DOCTYPE html>
<html>
  
<body>
    <center>
        <h1 style="color:green">
          GeeksforGeeks
      </h1>
        <h2>HTML DOM onchange Event</h2> Email:
        <input type="email" id="email">
  
        <script>
            document.getElementById(
              "email").onchange = function() {
                GFGfun()
            };
  
            function GFGfun() {
                var x = document.getElementById("email");
                x.value = x.value.toLowerCase();
            }
        </script>
  
    </center>
</body>
  
</html>

Salida:
Antes:

Después:

Ejemplo: en JavaScript, usando el método addEventListener():

<!DOCTYPE html>
<html>
  
<body>
    <center>
        <h1 style="color:green">
          GeeksforGeeks
      </h1>
        <h2>HTML DOM onchange Event</h2> Email:
        <input type="email" id="email">
  
        <script>
            document.getElementById(
                "email").addEventListener(
              "change", GFGfun);
  
            function GFGfun() {
                var x = document.getElementById("email");
                x.value = x.value.toLowerCase();
            }
        </script>
    </center>
  
</body>
  
</html>

Antes:

Después:

Navegadores compatibles: los navegadores compatibles con DOM onchange Event se enumeran a continuación:

  • Google Chrome
  • explorador de Internet
  • Firefox
  • safari de manzana
  • Ópera

Publicación traducida automáticamente

Artículo escrito por Vijay Sirra y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *