Frontend - Eventos

TRABAJO DE INVESTIGACIÓN
EVENTOS EN HTML Y JS
ALEJANDRO ORMACHEA
1. onload 2
2. onunload 2
3. onresize 2
4. onscroll 3
5. onclick 3
6. ondblclick 4
7. onmousedown 4
8. onmouseup 5
9. onmouseover 5
10. onmousemove 6
11. onmouseout 6
12. onfocus 6
13. onblur 7
14. onchange 7
15. onsubmit 8
16. onreset 8
17. onkeydown 9
18. onkeypress 9
19. onkeyup 10
20. ontouchstart 10
21. ontouchend 11
22. ontouchmove 11
23. ontouchcancel 11
24. oncontextmenu 12
1. onload
Este evento se dispara cuando la página web ha terminado de cargar
completamente.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onload Event</title>
<script>
window.onload = function() {
alert("La página se ha cargado completamente.");
};
</script>
</head>
<body>

</body>
</html>
2. onunload
Este evento se dispara cuando la página está siendo descargada (cerrada o
navegando lejos de la página).
<!DOCTYPE html>
<html lang="en">
<head>
<title>onunload Event</title>
<script>
window.onunload = function() {
alert("La página se está descargando.");
};
</script>
</head>
<body>
</body>
</html>
3. onresize
Se activa cuando el tamaño de la ventana del navegador cambia.
<!DOCTYPE html>
<html lang="en">
<head>
<title>onresize Event</title>
<script>
window.onresize = function() {
alert("El tamaño de la ventana del navegador ha cambiado.");
};
</script>
</head>
<body>
</body>
</html>
4. onscroll
Se dispara cuando el usuario hace scroll en la página.
<!DOCTYPE html>
<html lang="en">
<head>
<title>onscroll Event</title>
<script>
window.onscroll = function() {
alert("Has hecho scroll en la página.");
};
</script>
</head>
<body>

</body>
</html>
5. onclick
Se activa cuando el usuario hace clic en un elemento HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<title>onclick Event</title>
<script>
function handleClick() {
alert("¡Has hecho clic en el elemento!");
}
</script>
</head>
<body>
<button onclick="handleClick()">Haz clic aquí</button>
</body>
</html>
6. ondblclick
Se dispara cuando el usuario hace doble clic en un elemento HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<title>ondblclick Event</title>
<script>
function handleDoubleClick() {
alert("¡Has hecho doble clic en el elemento!");
}
</script>
</head>
<body>
<button ondblclick="handleDoubleClick()">Haz doble clic aquí</button>
</body>
</html>
7. onmousedown
Se activa cuando el usuario presiona un botón del ratón sobre un elemento HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<title>onmousedown Event</title>
<script>
function handleMouseDown() {
alert("¡Has presionado el botón del ratón sobre el elemento!");
}
</script>
</head>
<body>
<div onmousedown="handleMouseDown()" style="width: 200px; height: 200px;
background-color: lightblue;"></div>
</body>
</html>
8. onmouseup
Se dispara cuando el usuario suelta un botón del ratón sobre un elemento HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<title>onmouseup Event</title>
<script>
function handleMouseUp() {
alert("¡Has soltado el botón del ratón sobre el elemento!");
}
</script>
</head>
<body>
<div onmouseup="handleMouseUp()" style="width: 200px; height: 200px;
</body>
</html>
9. onmouseover
Se activa cuando el cursor del mouse se coloca sobre un elemento HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<title>onmouseover Event</title>
<script>
function handleMouseOver() {
alert("¡El cursor está sobre el elemento!");
}
</script>
</head>
<body>
<div onmouseover="handleMouseOver()" style="width: 200px; height: 200px;
</body>
</html>
10. onmousemove
Se dispara cuando el cursor del mouse se mueve sobre un elemento HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<title>onmousemove Event</title>
<script>
function handleMouseMove(event) {
alert("El cursor se ha movido en las coordenadas X: " + event.clientX + " Y: " +
event.clientY);
}
</script>
</head>
<body onmousemove="handleMouseMove(event)">
<div style="width: 200px; height: 200px; background-color: lightblue;"></div>
</body>
</html>
11. onmouseout
Se activa cuando el cursor del mouse sale de un elemento HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<title>onmouseout Event</title>
<script>
function handleMouseOut() {
alert("¡El cursor ha salido del elemento!");
}
</script>
</head>
<body>
<div onmouseout="handleMouseOut()" style="width: 200px; height: 200px;
</body>
</html>
12. onfocus
Se activa cuando un elemento HTML recibe el foco (seleccionado para interactuar).
<!DOCTYPE html>
<html lang="en">
<head>
<title>onfocus Event</title>
<script>
function handleFocus() {
alert("¡El elemento ha recibido el foco!");
}
</script>
</head>
<body>
<input type="text" onfocus="handleFocus()">
</body>
</html>
13. onblur
Se activa cuando un elemento HTML pierde el foco (deja de ser seleccionado para
interactuar).
<!DOCTYPE html>
<html lang="en">
<head>
<title>onblur Event</title>
<script>
function handleBlur() {
alert("¡El elemento ha perdido el foco!");
}
</script>
</head>
<body>
<input type="text" onblur="handleBlur()">
</body>
</html>
14. onchange
Se dispara cuando el valor de un elemento HTML cambia y el elemento pierde el
foco.
<!DOCTYPE html>
<html lang="en">
<head>
<title>onchange Event</title>
<script>
function handleChange() {
alert("El valor del elemento ha cambiado.");
}
</script>
</head>
<body>
<select onchange="handleChange()">
<option value="opcion1">Opción 1</option>
</select>
</body>
</html>
15. onsubmit
Se activa cuando un formulario HTML está siendo enviado.
<!DOCTYPE html>
<html lang="en">
<head>
<title>onsubmit Event</title>
<script>
function handleSubmit() {
alert("El formulario se está enviando.");
}
</script>
</head>
<body>
<form onsubmit="handleSubmit()">
<input type="text">
<button type="submit">Enviar</button>
</form>
</body>
</html>
16. onreset
Se dispara cuando se restablecen los valores de un formulario HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<title>onreset Event</title>
<script>
function handleReset() {
alert("El formulario se ha reseteado.");
}
</script>
</head>
<body>
<form onreset="handleReset()">
<input type="text" value="Texto inicial">
<button type="reset">Resetear</button>
</form>
</body>
</html>
17. onkeydown
Se activa cuando una tecla del teclado está siendo presionada.
<!DOCTYPE html>
<html lang="en">
<head>
<title>onkeydown Event</title>
<script>
function handleKeyDown(event) {
alert("Tecla presionada: " + event.key);
}
</script>
</head>
<body onkeydown="handleKeyDown(event)">
</body>
</html>
18. onkeypress
Se activa cuando una tecla del teclado es presionada y liberada.
<!DOCTYPE html>
<html lang="en">
<head>
<title>onkeypress Event</title>
<script>
function handleKeyPress(event) {
alert("Tecla presionada y liberada: " + event.key);
}
</script>
</head>
<body onkeypress="handleKeyPress(event)">
</body>
</html>
19. onkeyup
Se activa cuando una tecla del teclado es liberada.
<!DOCTYPE html>
<html lang="en">
<head>
<title>onkeyup Event</title>
<script>
function handleKeyUp(event) {
alert("Tecla liberada: " + event.key);
}
</script>
</head>
<body onkeyup="handleKeyUp(event)">
</body>
</html>
20. ontouchstart
Se activa cuando se toca la pantalla en un dispositivo táctil.
<!DOCTYPE html>
<html lang="en">
<head>
<title>ontouchstart Event</title>
<script>
function handleTouchStart() {
alert("Se ha tocado la pantalla.");
}
</script>
</head>
<body ontouchstart="handleTouchStart()">
</body>
</html>
21. ontouchend
Se activa cuando se levanta el dedo de la pantalla en un dispositivo táctil.
<!DOCTYPE html>
<html lang="en">
<head>
<title>ontouchend Event</title>
<script>
function handleTouchEnd() {
alert("Se ha levantado el dedo de la pantalla.");
}
</script>
</head>
<body ontouchend="handleTouchEnd()">
</body>
</html>
22. ontouchmove
Se activa cuando se mueve el dedo sobre la pantalla en un dispositivo táctil.
<!DOCTYPE html>
<html lang="en">
<head>
<title>ontouchmove Event</title>
<script>
function handleTouchMove() {
alert("Se ha movido el dedo sobre la pantalla.");
}
</script>
</head>
<body ontouchmove="handleTouchMove()">
</body>
</html>
23. ontouchcancel
Se activa cuando un evento táctil es cancelado en un dispositivo táctil.
<!DOCTYPE html>
<html lang="en">
<head>
<title>ontouchcancel Event</title>
<script>
function handleTouchCancel() {
alert("Se ha cancelado el evento táctil.");
}
</script>
</head>
<body ontouchcancel="handleTouchCancel()">
</body>
</html>
24. oncontextmenu
Se activa cuando se hace clic con el botón derecho del ratón para abrir el menú
contextual.
<!DOCTYPE html>
<html lang="en">
<head>
<title>oncontextmenu Event</title>
<script>
function handleContextMenu(event) {
event.preventDefault(); // Evita que aparezca el menú contextual
alert("Se ha abierto el menú contextual.");
}
</script>
</head>
<body oncontextmenu="handleContextMenu(event)">
</body>
</html>

Frontend - Eventos

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Frontend - Eventos

Cargado por

Copyright:

Formatos disponibles

TRABAJO DE INVESTIGACIÓN

También podría gustarte