Scribd
Cargar
94 vistas9 páginas

Eventos en Javascript

El documento describe 6 eventos en JavaScript que deben ser explicados en una presentación. Estos eventos son onfocus, onselect, ondblclick, onresize, onkeydown y onmouseover y onmouseout. Se debe incluir el nombre del evento, su uso y un ejemplo de código para cada uno.

Cargado por

Mario Henao
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
94 vistas9 páginas

Eventos en Javascript

El documento describe 6 eventos en JavaScript que deben ser explicados en una presentación. Estos eventos son onfocus, onselect, ondblclick, onresize, onkeydown y onmouseover y onmouseout. Se debe incluir el nombre del evento, su uso y un ejemplo de código para cada uno.

Cargado por

Mario Henao
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 9

EVENTOS EN JAVASCRPIT

CARLOS MARIO LEON HENAO

Institución Educativa Santa Isabel

Dirigido a:
WILLIAM VILLA MORALES

DOSQUEBRADAS/RISARALDA 26/02/2024
Actividad

Crear una presentación en la herramienta digital de su preferencia para exponer el tema:

eventos en Javascript (cada estudiante debe exponer 6 eventos diferentes).

La presentación debe exponer primero el nombre del evento en Javascript, por ejemplo:

(onclick)

La siguiente diapositiva expondrá para que se usa dicho evento en el caso de onclick: “se

usa para activar el evento de un clic sobre el objetivo programado”

Y la última expondrá un ejemplo de su uso y el código html para poner en funcionamiento

dicho evento.
solucion

1. Onfocus

En javascrpit el evento onfocus sirve para enfoncar textos sobre un espacio o campo de

texto y a la ves se mostrara un mensaje de alerta indicando cuando ese elemento se enconca

o haya sido enfocado.

Ejemplo de uso

Implementar un formulario que solicite la carga del nombre y la edad de una persona.

html

<!DOCTYPE html>

<html lang="es">

<head>

<meta charset="UTF-8">

<title>Evento onfocus en JavaScript</title>

</head>

<body>

<label for="miInput">Introduce tu nombre:</label>

<input type="text" id="miInput">

<script src="tuArchivoJavaScript.js"></script>
2 onselect

El evento onselcet en javascrpt sirve para seleccionar un texto

dentro de un campo o esapcio de entrada del texto o mejor dicho

simula una acción de selección en un control como si alguien

hubiera hecho clic en el control o lo hubiera pulsado.

Ejemplo de uso

Cuando estas en excel y seleccionas una casilla, inmediatamente

esa casilla se selecciona en la consola del texto en la parte

alta mostrando el codigo que se utilizo para esa casilla.

html

<!DOCTYPE html>

<html lang="es">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Evento onselect</title>

</head>

<body>

<input type="text" id="miInput" placeholder="Selecciona texto aquí">

<script>
const inputElement = document.getElementById('miInput');

inputElement.addEventListener('select', function() {

console.log('Texto seleccionado: ' + window.getSelection().toString());

});

</script>

</body>

</html>

3 ondblclick

Basicamente cuando haces doble click en un elemento que trae ID y

MYDIV, se ejecuta una funcion con ese dobleclick que

automaticamente se devuele en codigo html para dicho

comportamiento.

Ejemplo de uso

Cuando en una pagina cualquiera de tice que des doble click en

una texto para confirmar que estas de acuerdo con sus terminos.

<div id="myDiv" onclick="doubleClickHandler(event)"

ondblclick="doubleClickHandler(event)"></div>
4 onresize

El evento onresize en javascript sirve para cuando se

redimensiona la ventana del navegador

Ejemplo de uso

Cuando redimensiones la ventana del navegador se vera que en la

consola de este mostrara un mensaje que indica que se esta

redimensionando y esto cada ves que el evento onresize se active.

html

<!DOCTYPE html>

<html lang="es">

<head>

<meta charset="UTF-8">

<title>Evento onresize</title>

<script>

// Código JavaScript con el evento onresize

window.onresize = function() {

console.log('La ventana ha sido redimensionada');

};

</script>
</head>

<body>

<h1>Evento onresize</h1>

<p>Redimensiona la ventana para activar el evento.</p>

</body>

</html>

5 onkeydown

El evento onkeydown en javascript sirve para cuando una tecla es

presionada y esta genera un elemento caracter alterno.

Ejemplo de uso

Basicamente cuando presionamos cualquier tecla ya que este se

encarga de resirivir la informacion al ser presioanda y abrir un

subalterno o enviarnos otro lugar cuando esta se presiona, que es

muy parecido al evento key up que funciona cuando se deja de

presionar una tecla ( mientras que se siga presionado la tecla no

pasara nada).

html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-


scale=1.0">

<title>Evento onkeydown</title>

</head>

<body>

<input type="text" onkeydown="console.log('Tecla presionada: '


+ event.key)">

</body>

</html>

6 onmouseOUT Y onmouseOver

En javascript estos dos elementos se utilizan para detectar


cuando el cursor de un mouse entra y sale de un elemento que
contenga un codigo html.

Ejemplo de uso

Cuando estas un un juego y simplemente con pasar el cursos del


mouse por encima ya te muestra una ventana y al mismo tiempo si
pasa el cursos de lugar esta se cancela y se quita.

html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Eventos onmouseover y onmouseout</title>
<script>
function mouseOverFunction() {
console.log("El cursor ha entrado en el elemento.");
}

function mouseOutFunction() {
console.log("El cursor ha salido del elemento.");
}
</script>
</head>
<body>
<div onmouseover="mouseOverFunction()"
onmouseout="mouseOutFunction()" style="width: 200px; height:
200px; background-color: lightblue;">
Pasa el cursor del mouse sobre este cuadro.
</div>
</body>
</html>

También podría gustarte