Javascript tiene eventos para proporcionar una interfaz dinámica a una página web. Estos eventos están vinculados a elementos en el modelo de objetos de documento (DOM).
Estos eventos por defecto utilizan la propagación burbujeante, es decir, hacia arriba en el DOM de los niños a los padres. Podemos vincular eventos ya sea en línea o en un script externo.
Estos son algunos eventos de javascript:
1) eventos onclick: este es un evento del mouse y provoca cualquier lógica definida si el usuario hace clic en el elemento al que está vinculado.
Código #1:
html
<!doctype html>
<html>
<head>
<script>
function hiThere() {
alert('Hi there!');
}
</script>
</head>
<body>
<button type="button" onclick="hiThere()">Click me event</button>
</body>
</html>
Salida:
antes de hacer clic en la tecla «clic en mi evento»-
Después de hacer clic en la tecla «hacer clic en mi evento»-
2) evento onkeyup: este evento es un evento de teclado y ejecuta instrucciones cada vez que se suelta una tecla después de presionar.
Código #2:
html
<!doctype html>
<html>
<head>
<script>
var a = 0;
var b = 0;
var c = 0;
function changeBackground() {
var x = document.getElementById('bg');
x.style.backgroundColor = 'rgb('+a+', '+b+', '+c+')';
a += 1;
b += a + 1;
c += b + 1;
if (a > 255) a = a - b;
if (b > 255) b = a;
if (c > 255) c = b;
}
</script>
</head>
<body>
<input id="bg" onkeyup="changeBackground()"
placeholder="write something" style="color:#fff">
</body>
</html>
Salida:
Antes escrito de «gfg»-
Después de escrito de «gfg»-
3) evento onmouseover: este evento corresponde a pasar el puntero del mouse sobre el elemento y sus elementos secundarios, a los que está vinculado.
Código #3:
html
<!doctype html>
<html>
<head>
<script>
function hov() {
var e = document.getElementById('hover');
e.style.display = 'none';
}
</script>
</head>
<body>
<div id="hover" onmouseover="hov()"
style="background-color:green;height:200px;width:200px;">
</div>
</body>
</html>
Salida:
antes de que el mouse se tome sobre el cuadrado verde-
El cuadrado verde desaparece después de que el mouse se apodera de él.
4) evento onmouseout: cada vez que el cursor del mouse abandona el elemento que maneja un evento mouseout, se ejecuta una función asociada con él.
Código #4:
html
<!doctype html>
<html>
<head>
<script>
function out() {
var e = document.getElementById('hover');
e.style.display = 'none';
}
</script>
</head>
<body>
<div id="hover" onmouseout="out()"
style="background-color:green;height:200px;width:200px;">
</div>
</body>
</html>
Salida:
antes de que el mouse se tome sobre el cuadrado verde-
El cuadrado verde desaparecerá después de que el mouse se apodere de él y se elimine después de un tiempo.
5) evento onchange: Este evento detecta el cambio en el valor de cualquier elemento listado para este evento.
Código #5:
html
<!doctype html> <html> <head></head> <body> <input onchange="alert(this.value)" type="number"> </body> </html>
Salida:
antes de presionar cualquier tecla-
Después de presionar la tecla 2-
6) evento onload: cuando un elemento se carga por completo, se evoca este evento.
Código #6:
html
<!doctype html>
<html>
<head></head>
<body>
<img onload="alert('Image completely loaded')"
alt="GFG-Logo"
src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/GeeksforGeeksLogoHeader.png">
</body>
</html>
Producción:
7) evento onfocus: un elemento que aparece en la lista de este evento ejecuta instrucciones cada vez que recibe el foco.
Código #7:
html
<!doctype html>
<!doctype html>
<html>
<head>
<script>
function focused() {
var e = document.getElementById('inp');
if (confirm('Got it?')) {
e.blur();
}
}
</script>
</head>
<body>
<p >Take the focus into the input box below:</p>
<input id="inp" onfocus="focused()">
</body>
</html>
Salida:
antes de hacer clic con el mouse dentro del cuadro-
Después de hacer clic con el mouse dentro del cuadro,
8) evento onblur: este evento se evoca cuando un elemento pierde el foco.
Código #8:
html
<!doctype html> <html> <head></head> <body> <p>Write something in the input box and then click elsewhere in the document body.</p> <input onblur="alert(this.value)"> </body> </html>
Salida:
Antes de que se ingrese «gfg» dentro del cuadro-
Después de ingresar «gfg» dentro del cuadro y presionar enter-
PD: el evento onmouseup escucha el clic izquierdo y medio del mouse, pero el evento onmousedown escucha los clics izquierdo, medio y derecho del mouse, mientras que onclick solo maneja el clic izquierdo.
Publicación traducida automáticamente
Artículo escrito por mohit_negi y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA