HTML | Evento DOM onclick

El evento HTML DOM onclick ocurre cuando el usuario hace clic en un elemento.

El evento HTML DOM onclick es compatible con todos los elementos HTML, EXCEPTO:

  • <base>
  • <bdo>
  • <br>
  • <cabeza>
  • <html>
  • <iframe>
  • <meta>
  • <parámetro>
  • <script>
  • <estilo>
  • <título>

Sintaxis:

En HTML:

<element onclick="myScript">

En JavaScript:

object.onclick = function(){myScript};

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

object.addEventListener("click", myScript);

Ejemplo 1: Uso de HTML

<!DOCTYPE html>
<html>
  
<body>
    <center>
        <h1 style="color:green">
          GeeksforGeeks
      </h1>
        <h2>HTML DOM onclick Event</h2>
        <button onclick="myFunction()">Click me</button>
  
        <p id="demo"></p>
  
        <script>
            function myFunction() {
                document.getElementById(
                  "demo").innerHTML = "GeeksforGeeks";
            }
        </script>
    </center>
</body>
  
</html>

Producción:

Ejemplo 2: Uso de JavaScript

<!DOCTYPE html>
<html>
  
<body>
    <center>
        <h1 style="color:green">
          GeeksforGeeks
      </h1>
        <h2>HTML DOM onclick Event</h2>
        <p id="demo">Click me.</p>
  
        <script>
            document.getElementById("demo").onclick = function() {
                GFGfun()
            };
  
            function GFGfun() {
                document.getElementById(
                  "demo").innerHTML = "YOU CLICKED ME!";
            }
        </script>
    </center>
</body>
  
</html>

Salida:
Antes:

Después:

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

<!DOCTYPE html>
<html>
  
<body>
    <center>
        <h1 style="color:green">
          GeeksforGeeks
      </h1>
        <h2>HTML DOM onclick Event</h2>
        <p id="demo">Click me.</p>
  
        <script>
            document.getElementById(
              "demo").addEventListener("click", GFGfun);
  
            function GFGfun() {
                document.getElementById(
                  "demo").innerHTML = "YOU CLICKED ME!";
            }
        </script>
    </center>
</body>
  
</html>

Salida:
Antes:

Después:

Navegadores compatibles: los navegadores compatibles con DOM onclick 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 *