HTML DOM permite que JavaScript reaccione a eventos HTML:
Se puede ejecutar JavaScript cuando ocurre un evento, como cuando un usuario hace clic en un elemento HTML.
Para ejecutar código cuando un usuario hace clic en un elemento, agregue código JavaScript a un atributo de evento HTML:
onclick=JavaScriptEjemplos de eventos HTML:
Cuando un usuario hace clic con el mouse
Cuando se ha cargado una página web
Cuando se ha cargado una imagen
Cuando el ratón se mueve sobre un elemento
Cuando se cambia un campo de entrada
Cuando se envía un formulario HTML
Cuando un usuario presiona una tecla
En este ejemplo, el contenido del elemento <h1> cambia cuando un usuario hace clic en él:
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML = 'Ooops!'">Click on this text!</h1>
</body>
</html>Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML Events</h2>
<h2 onclick="this.innerHTML='Ooops!'">Click on this text!</h2>
</body>
</html>
En este ejemplo, se llama a una función desde el controlador de eventos:
<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">Click on this text!</h1>
<script>
function changeText(id) {
id.innerHTML = "Ooops!";
}
</script>
</body>
</html>Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML Events</h2>
<h2 onclick="changeText(this)">Click on this text!</h2>
<script>
function changeText(id) {
id.innerHTML = "Ooops!";
}
</script>
</body>
</html>
Para asignar eventos a elementos HTML, puede utilizar atributos de eventos.
Asigne un evento onclick a un elemento de botón:
<button onclick="displayDate()">Try it</button>Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML Events</h2>
<p>Click the button to display the date.</p>
<button onclick="displayDate()">The time is?</button>
<script>
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
<p id="demo"></p>
</body>
</html>
En el ejemplo anterior, se ejecutará una función denominada displayDate. cuando se hace clic en el botón.
El DOM HTML le permite asignar eventos a elementos HTML usando JavaScript:
Asigne un evento onclick a un elemento de botón:
<script>
document.getElementById("myBtn").onclick = displayDate;
</script>Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML Events</h2>
<p>Click "Try it" to execute the displayDate() function.</p>
<button id="myBtn">Try it</button>
<p id="demo"></p>
<script>
document.getElementById("myBtn").onclick = displayDate;
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
</body>
</html>
En el ejemplo anterior, se asigna una función denominada displayDate a un elemento HTML con id="myBtn".
La función será ejecutada. cuando se hace clic en el botón.
Los eventos onload y onunload se activan cuando el usuario ingresa o sale de la página.
El evento onload se puede utilizar para verificar el tipo y la versión del navegador del visitante, y cargar la versión adecuada de la página web según la información.
Los eventos onload y onunload se pueden utilizar para tratar las cookies.
<body onload="checkCookies()">Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body onload="checkCookies()">
<h2>JavaScript HTML Events</h2>
<p id="demo"></p>
<script>
function checkCookies() {
var text = "";
if (navigator.cookieEnabled == true) {
text = "Cookies are enabled.";
} else {
text = "Cookies are not enabled.";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
El evento onchange se utiliza a menudo en combinación con la validación de campos de entrada.
A continuación se muestra un ejemplo de cómo utilizar onchange. El mayúsculas() La función se llamará cuando un usuario cambie el contenido de un campo de entrada.
<input type="text" id="fname"
onchange="upperCase()">Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML Events</h2>
Enter your name: <input type="text" id="fname" onchange="upperCase()">
<p>When you leave the input field, a function is triggered which transforms the input text to upper case.</p>
<script>
function upperCase() {
const x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>
</body>
</html>
Los eventos onmouseover y onmouseout se pueden utilizar para activar una función cuando el usuario mueve el mouse. sobre o fuera de un elemento HTML:
Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<div onmouseover="mOver(this)" onmouseout="mOut(this)"
style="background-color:#D94A38;width:120px;height:20px;padding:40px;">
Mouse Over Me</div>
<script>
function mOver(obj) {
obj.innerHTML = "Thank You"
}
function mOut(obj) {
obj.innerHTML = "Mouse Over Me"
}
</script>
</body>
</html>
Los eventos onmousedown, onmouseup y onclick son todas partes de un click del raton. Primero, cuando se hace clic en un botón del mouse, se activa el evento onmousedown. se activa, entonces, cuando el botón del ratón Se libera, se activa el evento onmouseup y, finalmente, cuando se completa el clic del mouse, se activa el evento onclick.
Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<div onmousedown="mDown(this)" onmouseup="mUp(this)"
style="background-color:#D94A38;width:90px;height:20px;padding:40px;">
Click Me</div>
<script>
function mDown(obj) {
obj.style.backgroundColor = "#1ec5e5";
obj.innerHTML = "Release Me";
}
function mUp(obj) {
obj.style.backgroundColor="#D94A38";
obj.innerHTML="Thank You";
}
</script>
</body>
</html>
onmousedown y onmouseup
<!DOCTYPE html>
<html>
<head>
<script>
function lighton() {
document.getElementById('myimage').src = "bulbon.gif";
}
function lightoff() {
document.getElementById('myimage').src = "bulboff.gif";
}
</script>
</head>
<body>
<img id="myimage" onmousedown="lighton()" onmouseup="lightoff()" src="bulboff.gif" width="100" height="180" />
<p>Click mouse and hold down!</p>
</body>
</html>
Cambiar una imagen cuando un usuario mantiene presionado el botón del mouse.
cargar
<!DOCTYPE html>
<html>
<head>
<script>
function mymessage() {
alert("This message was triggered from the onload event");
}
</script>
</head>
<body onload="mymessage()">
</body>
</html>
Muestra un cuadro de alerta cuando la página haya terminado de cargarse.
enfocado
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(x) {
x.style.background = "yellow";
}
</script>
</head>
<body>
Enter your name: <input type="text" onfocus="myFunction(this)">
<p>When the input field gets focus, a function is triggered which changes the background-color.</p>
</body>
</html>
Cambie el color de fondo de un campo de entrada cuando reciba el foco.
Eventos del ratón
<!DOCTYPE html>
<html>
<body>
<h1 onmouseover="style.color='red'"
onmouseout="style.color='black'">
Mouse over this text</h1>
</body>
</html>
Cambia el color de un elemento cuando el cursor se mueve sobre él.
Para obtener una lista de todos los eventos HTML DOM, consulte nuestra Referencia completa de objetos de eventos HTML DOM.