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