Los controladores de eventos deben usarse de manera correcta; es recomendable no escribirlos directamente en los atributos de las etiquetas, sino instalarlos en los archivos incluidos con código JavaScript. Si se utiliza la biblioteca jQuery, el nombre de los controladores debe escribirse sin el prefijo on.
click / onclick
– haga clic en un elemento; ocurre cuando se hace clic en el elemento con el botón izquierdo del mouse (en dispositivos con pantallas táctiles ocurre cuando se toca).
Opciones de grabación de ventanas emergentes
<input value="Haz clic en mí" onclick="alert('¡Haz clic!')" type="botón">
<a href="#" onclick="alert('Ejemplo 1 funcionó'); return false;">Ejemplo 1</a>
Secuencia de números que comienzan con 1
<script>
function countRabbits() {
for(let i=1; i<=3; i++) {
alert("numero de conejo " + i);
}
}
</script>
<input type="button" onclick="countRabbits()" value="¡Cuenta conejos!">
<input id="elem" type="botón" valor="¡Presioname!">
<guión>
elem.onclick = función() {
alerta('Gracias');
};
</script>
<tipo de entrada="botón" id="botón" valor="Botón">
<script>
button.onclick = function() {
alert('Клик!');
};
</script>
Muestra «Presioname» en una ventana emergente: el contenido del botón
<button onclick="alert(this.innerHTML)">Haz clic en mí</button>
Múltiples controladores de eventos emergentes
<input id="elem" type="botón" valor="Haz clic en mí"/>
<script>
function handler1() {
alert('Спасибо!');
};
function handler2() {
alert('Спасибо ещё раз!');
}
elem.onclick = () => alert("Hola");
elem.addEventListener("clic", handler1); // ¡Gracias!
elem.addEventListener("clic", handler2); // ¡Gracias de nuevo!
</script>
Obtener las coordenadas del mouse desde un objeto de evento
<tipo de entrada="botón" valor="Presioname" id="elem">
<guión>
elem.onclick = función (evento) {
// muestra el tipo de evento, el elemento y las coordenadas de clic
alert(event.type + " на " + event.currentTarget);
alert("Coordenadas: " + event.clientX + ":" + event.clientY);
};
</script>
Cambiar el fondo de un objeto
<button>Change color</button>
<script>
const btn = document.querySelector("button");
function random(number) {
return Math.floor(Math.random() * (number + 1));
}
btn.onclick = function () {
const rndCol =
"rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";
document.body.style.backgroundColor = rndCol;
};
</script>
<button onclick="bgChange()">Press me</button>
<script>
function bgChange() {
const rndCol =
"rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";
document.body.style.backgroundColor = rndCol;
}
</script>
Cambiando el fondo de un div
<div id='myDiv'>Elemento de cambio de color</div>
<button onclick='changeColor()'>Cambiar color</button>
<script>
function changeColor() {
document.getElementById('myDiv').style.backgroundColor = 'red';
}
</script>
Cambiar color de enlace
<script>
function ChangeColor(Element) {
if (Element.style.color == 'green') Element.style.color = 'red';
else Element.style.color = 'green';
return false;
}
</script>
<a href="#" style="color: green;" onclick="return ChangeColor(this);">Cambiar color</a>
Validación de formulario
<formulario>
<div>
<label for="fname">Nombre: </label>
<entrada id="fname" tipo="texto" />
</div>
<div>
<label for="lname">Apellido: </label>
<input id="lname" type="text" />
</div>
<div>
<input id="submit" type="submit" />
</div>
</form>
<p></p>
<script>
var form = document.querySelector("form");
var fname = document.getElementById("fname");
var lname = document.getElementById("lname");
var submit = document.getElementById("submit");
var para = document.querySelector("p");
form.onsubmit = function (e) {
if (fname.value === "" || lname.value === "") {
e.preventDefault();
para.textContent = "¡Ambos campos deben ser completados!";
}
};
</script>
Capture eventos de CSS en video con la función stopPropagation(), que, cuando se llama en el controlador de eventos de un objeto, garantiza que el controlador se ejecute, pero el evento no burbujee más abajo en la cadena
<button>Display video</button>
<div class="hidden">
<video>
<source src="rabbit320.mp4" type="video/mp4" />
<source src="rabbit320.webm" type="video/webm" />
<p>
Your browser doesn't support HTML5 video. Here is a
<a href="rabbit320.mp4">link to the video</a> instead.
</p>
</video>
</div>
div { position: absolute;
top: 50%;
transform: translate(-50%,-50%);
... }
.hidden {
left: -50%;
}
.showing {
left: 50%;
}
<script>
var videoBox = document.querySelector("div");
var video = document.querySelector("video");
videoBox.onclick = function () {
videoBox.setAttribute("class", "hidden");
};
video.onclick = function () {
video.play();
};
video.onclick = function (e) {
e.stopPropagation();
video.play();
};
</script>
<p style="text-align: justify;">Mostrar y ocultar texto</p>
<button onclick='toggleVisibility()'>Mostrar/Ocultar</button>
<div id='hiddenDiv' style='display:none'>Texto oculto</div>
<script>
function toggleVisibility() {
let element = document.getElementById('hiddenDiv');
if (element.style.display === 'none') {
element.style.display = 'block';
} else {
element.style.display = 'none';
}
}
</script>
Carga de datos vía AJAX, para cargar datos desde el servidor sin recargar la página
función recuperar datos() {
// Aquí está tu código para la solicitud AJAX
}
<onclick="fetchData()">Cargar datos</button>
Cambiar el nombre del enlace de Activado a Desactivado
<guión>
//esperamos a que la página se cargue por completo
ventana.onload = función() {
//obtenemos el identificador del elemento
var a = document.getElementById('cambiar');
//adjuntarle un evento
a.onclick = función() {
//realiza algunas acciones
if (this.innerHTML=='Activado') this.innerHTML = 'Desactivado';
de lo contrario this.innerHTML = 'Activado';
//evitar hacer clic en el enlace href
return false;
}
}
</script>
<a id="switch" href="#">On</a>
onabort
– interrupción de la reproducción. El evento onabort ocurre cuando se interrumpe la descarga de audio o video. El evento onabort ocurre solo cuando se cancela la descarga, no cuando ocurre un error. Se aplica a los elementos audio, embed, img, object, video.
Notificación de que se ha interrumpido la carga del vídeo
<video id="myVideo" onabort="alert('Carga de video cancelada')">
Alerta de que se ha interrumpido la carga de la imagen
<img id="myImage" src="example.jpg" onabort="imageAborted()">
<script>
function imageAborted() {
alert("Image load was aborted by the user.");
}
</script>
Notificación de que el envío del formulario ha sido interrumpido
<form id="myForm">
<input type="text" placeholder="Enter your name">
<input type="submit" value="Submit">
</form>
<script>
var form = document.getElementById("myForm");
form.addEventListener("abort", formAborted);
function formAborted() {
alert("Form submission was aborted by the user.");
}
</script>
onafterprint – impresión terminada
El evento onafterprint ocurre cuando la página comienza a imprimirse. El evento onafterprint ocurre cuando se cierra el cuadro de diálogo de impresión. El navegador ejecuta onafterprint y onbeforeprint para que se puedan agregar notas, explicaciones y comentarios al proceso de impresión. Aplicable para body.
<body onafterprint="myFunction()">
onautocomplete – Autocompletar formulario completado
Un atributo con el que se completa el formulario con un solo clic: el navegador insertará los valores en los campos correspondientes.
<form> <label for="name">Nombre:</label> <input type="text" id="name" name="name" autocomplete="on"> </form>
onautocompleteerror – error al autocompletar el formulario
onbeforeprint – preparación para la impresión
onbeforeunload: el documento se ha descargado
Cuando un usuario abandona la página, podemos preguntarle si realmente quiere salir. El manejo del evento beforeunload es responsable de esto. El evento ocurre antes del evento de descarga de la página unload. Este evento permite que la página web active un cuadro de diálogo de confirmación preguntando al usuario si realmente desea abandonar la página. Si el usuario confirma, el navegador navega a una nueva página, en caso contrario cancela la navegación. Según la especificación, para mostrar un cuadro de diálogo de confirmación, el controlador de eventos debe llamar a preventDefault() en el evento. Aplicable para body.
<body onbeforeunload="return myFunction()">
<script>
function myFunction() {
return "¿Estás seguro de que quieres cerrar la página?...";
}
</script>
onblur – pérdida de concentración
Evento focus llamado en el momento de enfocar, y blur – cuando el elemento pierde el foco. apoyo focus/blur garantizado para elementos con los que el visitante puede interactuar: button, input, select, a etc. Por otro lado, los elementos de formato div, span, table – de forma predeterminada no puede recibir el foco. Método elem.focus() no funciona para ellos, y eventos focus/blur nunca trabajar. Esto se puede cambiar usando el atributo HTML tabindex.
Validación (verificación) de los datos ingresados con una inscripción debajo del formulario
<style>
.invalid { border-color: red; }
#error { color: red }
</style>
<script>
input.onblur = function() {
if (!input.value.includes('@')) { // не email
input.classList.add('invalid');
error.innerHTML = 'Por favor ingrese un correo electrónico correcto.'
}
};
entrada.onfocus = función() {
if (this.classList.contains('inválido')) {
// elimina el indicador de error, porque el usuario quiere volver a ingresar datos
this.classList.remove('invalid');
error.innerHTML = "";
}
};
</script>
Ваш email: <input type="email" id="input">
<div id="error"></div>
Validación (verificación) de los datos ingresados llenando el formulario con color
<style>
.error {
background: red;
}
</style>
<script>
input.onblur = function() {
if (!this.value.includes('@')) { // не email
// mostrar error
this.classList.add("error");
// ...y devolver el enfoque
input.focus();
} else {
this.classList.remove("error");
}
};
</script>
Ваш email: <input type="email" id="input">
<input type="text" style="width:280px" placeholder="ingrese un correo electrónico incorrecto y haga clic aquí">
Cambiar el texto del formulario CLICK HERE
<input type="text" value="CLICK HERE" />
<script>
let input = document.querySelector("input");
input.onblur = inputBlur;
input.onfocus = inputFocus;
function inputBlur() {
input.value = "Focus has been lost";
}
function inputFocus() {
input.value = "Focus is here";
}
</script>
Comprobando la forma con un contorno de marco
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Событие onblur</title>
<style>
.warning {
background-color: #ffe;
outline: 1px solid #dc143c;
}
</style>
<script>
function warning(field) {
if (field.value == '') field.classList.add('warning');
else field.classList.remove('warning');
}
</script>
</head>
<body>
<form>
<p><input placeholder="Nombre" onblur="advertencia(esta)"></p>
<p><input placeholder="Apellido" onblur="advertencia(esto)"></p>
<p><input placeholder="Dirección" onblur="advertencia(esta)"></p>
</formulario>
</cuerpo>
</html>
Iluminación al enfocar sin onblur
<style>
*!*input:focus*/!* {
background: #FA6;
outline: none; /* quitar marco */
}
</style>
<input type="text">
<p>El selector de enfoque resaltará un elemento cuando usted lo enfoque y eliminará el borde que el navegador usa para resaltar ese elemento de forma predeterminada.</p>
Marcador de posición: valor de sugerencia dentro INPUT, que desaparece automáticamente al enfocar y existe hasta que el visitante comienza a ingresar texto, sin onblur
<style>
.my*!*::-webkit-input-placeholder*/!* {
color: red;
font-style: italic;
}
.my*!*::-moz-input-placeholder*/!* {
color: red;
font-style: italic;
}
.my*!*::-ms-input-placeholder*/!* {
color: red;
font-style: italic;
}
</style>
<input class="my" type="text" placeholder="E-mail">
oncancel – cancelar acción
Cancelar la operación actual en el dispositivo. Se utiliza para el control de dispositivos asíncronos. Si realiza esta función antes de iniciar una operación, la operación se cancelará.
Device.Cancel ();
oncanplay
– puede comenzar a reproducir el archivo multimedia especificado
El evento oncanplay ocurre cuando el navegador puede comenzar a reproducir el audio/video especificado (cuando está lo suficientemente almacenado en el buffer para empezar). Durante el proceso de carga de audio/vídeo, ocurren los siguientes eventos en este orden: onloadstart, ondurationchange, onloadedmetadata, onloadeddata, onprogress, oncanplay, oncanplaythrough
Ejecute JavaScript cuando el video esté listo para reproducirse:
<video oncanplay="myFunction()">
oncanplaythrough
– Puede comenzar a reproducir el archivo multimedia especificado sin tener que detenerlo para almacenarlo en el búfer. El evento oncanplaythrough ocurre cuando el navegador considera que puede reproducir el medio especificado sin tener que detenerse para almacenar en búfer.
Ejecutar JavaScript cuando el vídeo se pueda reproducir en su totalidad, sin parar:
<video oncanplaythrough="myFunction()">
onchange – cambiar valor
El evento onchange ocurre cuando se ha cambiado el valor del elemento. Para botones de opción y casillas de verificación, el evento onchange ocurre cuando cambia el estado marcado. Este evento es similar al evento oninput. La diferencia es que el evento oninput ocurre inmediatamente después de que cambia el valor del elemento, mientras que onchange ocurre cuando el elemento pierde el foco después de que el contenido ha cambiado. Otra diferencia es que el evento onchange también funciona en el elemento select.Un controlador para el evento onchange, que se activa cuando el valor del elemento cambia y pierde el foco. Para los objetos AudioTrackList, VideoTrackList y TextTrackList, este evento ocurre cuando una o más pistas están habilitadas/deshabilitadas. Ejecuta código JavaScript cuando ocurre un evento change; es decir, si el campo Select, Text o Textarea pierde el foco y su valor ha sido cambiado.
type – Indica el tipo de evento.
target – Indica el objeto al que se envió originalmente el evento
Ejecutar JavaScript cuando el usuario cambie la opción seleccionada de un elemento select:
<select onchange="myFunction()">
Aquí userName este es un campo de texto. Si el usuario cambia el texto y abandona el campo, el controlador onChange llama a la función checkValue para confirmar que el valor es válido userName:
<INPUT TYPE="text" VALUE="" NAME="userName" onChange="checkValue(this.value)">
onclose – cerrando algo
Controlador de eventos para eventos de cierre, enviado a la ventana. El evento OnClose ocurre cuando se cierra el cuadro de diálogo. Puede crear un controlador de eventos para el evento OnClose para realizar acciones específicas cuando se cierra el cuadro de diálogo. Controlador de eventos close, que se invoca en los elementos del diálogo cuando se cierran, y también en los elementos WebSocket cuando se completa la conexión.
oncontextmenu: abre el menú contextual
El evento oncontextmenu ocurre cuando el usuario hace clic derecho en un elemento HTML para abrir el menú contextual. Propiedad del controlador de eventos para el evento de clic derecho dentro de un elemento window. Si no se evita el comportamiento estándar, entonces se activa el menú contextual del navegador (en IE8 hay un error relacionado con el hecho de que el menú contextual no se activará si se define un controlador de eventos contextmenu). El evento ocurrirá junto con otros eventos right-click y no depende de «contextmenu» atributo del elemento.
Ejecute JavaScript cuando el usuario haga clic derecho en el elemento div con el menú contextual:
<div oncontextmenu="myFunction()" contextmenu="mymenu">
El código de este ejemplo cambia el comportamiento predeterminado del navegador al desactivar el clic derecho.
document.oncontextmenu = function () {
// Usar objeto "document" en lugar de "window" por compatibilidad con IE8.
return false;
};
window.addEventListener(
"contextmenu",
function (e) {
// No es compatible con versiones de IE anteriores a la 9
e.preventDefault();
},
false,
);
oncopy – copia completada
El evento oncopy ocurre cuando el usuario copia el contenido de un elemento. El evento oncopy también ocurre cuando el usuario copia un elemento, como una imagen creada usando el elemento img. El evento oncopy se utiliza principalmente para elementos «input» con type=»text». Se activa al insertar/copiar/eliminar texto. Si cancela la acción del navegador en sus controladores, no se producirá la inserción/copia/eliminación. El valor insertado no se puede obtener: en el momento en que se activa el evento, el elemento todavía tiene el valor anterior y el nuevo no está disponible.
Ejecutar JavaScript al copiar algún texto de elemento input:
<input type="text" oncopy="myFunction()" value="Intenta copiar este texto">
oncuechange – cambiar la etiqueta de un elemento track
Un controlador para el evento cuechange, que se activa cuando el elemento TextTrack cambia las marcas de tiempo mostradas actualmente (cue).
oncut – el contenido ha sido cortado
El evento oncut ocurre cuando el usuario corta el contenido de un elemento. Aunque el evento oncut es compatible con todos los elementos HTML, en realidad no es posible cortar contenido, por ejemplo, en un elemento p, A MENOS que el elemento haya establecido contenteditable en un valor «true». El evento oncut se utiliza principalmente para elementos input con type=»text».
Ejecute JavaScript al recortar texto en un elemento input:
<input type="text" oncut="myFunction()" value="Intenta acortar este texto">
ondblclick – doble clic en el elemento
Controlador del evento dblclick, que ocurre cuando se hace doble clic con el botón izquierdo del mouse. El evento ondblclick ocurre cuando el usuario hace doble clic en un elemento HTML; es decir, cuando el usuario hace doble clic en un elemento de formulario o hipervínculo.
type – Indica el tipo de evento.
target – Indica el objeto al que se envió originalmente el evento.
layerX, layerY, pageX, pageY, screenX, screenY – Representa la ubicación del cursor cuando ocurre el evento.
which – Representa 1 para un clic izquierdo del mouse y 3 para un clic derecho del mouse.
modifiers – Contiene una lista de teclas modificadoras presionadas cuando ocurrió el evento.
Ejecute JavaScript cuando haga doble clic en un elemento p:
<p ondblclick="myFunction()">Haz doble clic en mí</p>
Aquí está el diálogo alert salida cuando el usuario hace doble clic en el botón:
<form>
<INPUT Type="button" Value="Double Click Me!" onDblClick="alert('You just double clicked me!')">
</form>
ondrag – arrastrando un elemento
El evento ondrag ocurre cuando arrastras un elemento o texto seleccionado. Arrastrar y soltar es una característica muy común en HTML5. Esto es cuando «agarras» un objeto y lo arrastras a otra ubicación.
type – Indica el tipo de evento.
target – Indica el objeto al que se envió originalmente el evento.
data – Devuelve una matriz de cadenas que contienen las URL de los objetos liberados.
modifiers – Contiene una lista de teclas modificadoras presionadas cuando ocurre el evento.
screenX, screenY – Representa la ubicación del cursor en el momento en que ocurrió el evento.
Ejecutar JavaScript cuando se arrastra el elemento p:
<p draggable="true" ondrag="myFunction(event)">Тащи меня!</p>
ondragend – arrastre de elementos completado
El evento ondragend ocurre cuando el usuario ha terminado de arrastrar un elemento o selección de texto.
Ejecutar JavaScript cuando el usuario termine de arrastrar el elemento p:
<p draggable="true" ondragend="myFunction(event)">¡Arrástrame!</p>
ondragenter
– el elemento se arrastra a una zona objetivo válida. El evento ondragenter ocurre cuando el elemento arrastrado o el texto seleccionado alcanza un objetivo de eliminación válido. Los eventos ondragenter y ondragleave pueden ayudar al usuario a comprender que el elemento arrastrado está a punto de entrar o salir del destino de colocación. Esto se puede hacer, por ejemplo, estableciendo el color de fondo cuando el elemento arrastrado llega al objetivo de arrastre y borrando el color cuando el elemento se aleja del objetivo.
Ejecutar JavaScript cuando el elemento arrastrado llegue al objetivo de arrastre:
<div ondragenter="myFunction(event)"></div>
ondragexit
– salir del modo arrastrar y soltar. Un controlador para el evento dragexit, que ocurre cuando un elemento ya no es el objetivo de un elemento que puede aceptarlo.
ondragleave
– El elemento deja un objetivo válido. El evento ondragleave ocurre cuando un elemento arrastrado o una selección de texto deja un destino de colocación válido.
Ejecute JavaScript cuando el elemento arrastrado se aleje del objetivo de arrastre:
<div ondragleave="myFunction(event)"></div>
ondragover
– el elemento se arrastra a un punto de destino válido. El evento ondragover ocurre cuando un elemento arrastrado o un texto seleccionado se arrastra sobre un destino de colocación válido. De forma predeterminada, los datos/elementos no se pueden eliminar de otros elementos. Para permitir la eliminación, debemos desactivar el procesamiento de elementos de forma predeterminada. Esto se hace llamando al método event.preventDefault() en el evento ondragover.
Ejecutar JavaScript cuando se arrastra un elemento sobre el objetivo de arrastre:
<div ondragover="myFunction(event)"></div>
ondragstart
– inicio de la operación de arrastrar y soltar. El evento ondragstart ocurre cuando el usuario comienza a arrastrar un elemento o texto seleccionado.
Ejecutar JavaScript cuando el usuario comience a arrastrar un elemento p:
<p draggable="true" ondragstart="myFunction(event)">¡Arrástrame!</p>
ondrop
– el elemento arrastrado se suelta. El evento ondrop ocurre cuando el elemento arrastrado o el texto seleccionado se suelta en un destino de colocación válido.
Ejecutar JavaScript cuando el elemento arrastrado se elimina del elemento div:
<div ondrop="myFunction(event)"></div>
ondurationchange
– cambio en la longitud del medio. Evento ondurationchange Ocurre cuando cambia la duración del audio/vídeo. Al cargar audio/vídeo, la duración cambiará de «NaN» a la duración real del audio/vídeo. Durante el proceso de carga de audio/vídeo, ocurren los siguientes eventos en este orden: onloadstart, ondurationchange, onloadedmetadata, onloadeddata, onprogress, oncanplay, oncanplaythrough
Ejecute JavaScript cuando la duración del video haya cambiado:
<video ondurationchange="myFunction()">
onemptied
– De repente, el archivo dejó de estar disponible. Controlador de eventos emptied, que ocurre cuando la lista de reproducción actual de un elemento de audio o video está vacía. La mayoría de las veces se debe a un fallo de conexión.
onended
– la reproducción está completa. El evento finalizado ocurre cuando el audio/vídeo llega al final. Este evento es útil para mensajes como «gracias por escuchar», «gracias por mirar», etc.
Ejecutar JavaScript cuando finalice el audio:
<audio onended="myFunction()">
onerror
– ocurrió un error. Evento onerror Se activa cuando se produce un error al cargar un archivo externo (como un documento o una imagen). Cuando se utiliza en medios de audio/video, los eventos relacionados que ocurren cuando hay alguna interrupción en el proceso de carga de medios son: onabort, onemptied, onstalled, onsuspend.
Evento error ocurre solo cuando ocurre un error de sintaxis de JavaScript o un error de tiempo de ejecución, no cuando ocurre un error del navegador. Por ejemplo, si intenta configurar window.location.href=’notThere.html’ y el archivo notThere.html no existe, el mensaje de error resultante será el mensaje del navegador; por lo tanto, onError no interceptará este mensaje. Sin embargo, el evento error se incluirá en una URL no válida en la etiqueta IMG o en datos de imagen no válidos.
window.onerror solo se aplica a errores que ocurren en la ventana que contiene window.onerror, y no a errores en otras ventanas.
onError puede tener los siguientes valores:
– null para suprimir todos los cuadros de diálogo de error de JavaScript. Estableciendo window.onerror en null оsignifica que sus usuarios no verán errores de JavaScript causados por su código.
– El nombre de la función que maneja los errores (los argumentos son el texto del mensaje, la URL y el número de línea con el error). Para suprimir el cuadro de diálogo de error de JavaScript estándar, esta función debe devolver true. Vea el Ejemplo 3 a continuación.
– Variable o propiedad que contiene null o una referencia válida a la función.
Si está escribiendo una función de manejo de errores, tiene tres opciones para informar errores:
– Realice un seguimiento de los errores, pero permita que se informen a través de un cuadro de diálogo JavaScript estándar (use una función de manejo de errores que devuelva false o no devuelve un valor).
– Informe los errores usted mismo y desactive el cuadro de diálogo estándar (use la función de manejo de errores que devuelve true).
– Desactivar todos los mensajes de error (establecer null en el controlador onError).
type – Indica el tipo de evento.
target – Indica el objeto al que se envió originalmente el evento
Ejecute JavaScript si se produce un error al cargar una imagen:
<img src="image.gif" onerror="myFunction()">
Ejemplo 1: controlador con valor Null. En esta etiqueta código IMG onError=»null» suprime los mensajes de error si se produce un error al cargar una imagen.
<IMG NAME="imageBad1" SRC="corrupt.gif" ALIGN="left" BORDER="2" onError="null">
Ejemplo 2: controlador con Null para la ventana. El controlador onError para una ventana no se puede expresar mediante HTML. Por lo tanto, debes ingresar todo lo necesario, en minúsculas, en la etiqueta SCRIPT. El siguiente código asigna null Controlador onError para toda la ventana, no solo el objeto Image. Esto suprime todos los mensajes de error de JavaScript, incluidos los del objeto Image.
<SCRIPT> window.onerror=null </SCRIPT> <IMG NAME="imageBad1" SRC="corrupt.gif" ALIGN="left" BORDER="2">
Sin embargo, si el objeto Image tiene su propio controlador onError especial; este controlador se ejecutará cuando ocurra un error con la imagen. Esto ocurre porque window.onerror=null suprime los mensajes de error de JavaScript, no los controladores onError.
<SCRIPT>
window.onerror=null
function myErrorFunc() {
alert("The image had a nasty error.")
}
</SCRIPT>
<IMG NAME="imageBad1" SRC="corrupt.gif" ALIGN="left" BORDER="2" onError="myErrorFunc()">
En el siguiente ejemplo, window.onerror=null suprime todos los mensajes de error. Sin onerror=null el código causará un error de desbordamiento de pila porque hay recursividad infinita.
<SCRIPT>
window.onerror = null;
function testErrorFunction() {
testErrorFunction();
}
</SCRIPT>
<BODY onload="testErrorFunction()">
test message
</BODY>
Ejemplo 3: función de manejo de errores. Aquí se define la función myOnError, que detecta errores de JavaScript. Esta función utiliza tres matrices para almacenar el mensaje, la URL y la cadena ofensiva para cada error. Si el usuario hace clic en el botón Display Error Report, La función displayErrors abre una ventana y crea un mensaje de error en ella. Tenga en cuenta que esta función devuelve true para suprimir el cuadro de diálogo de error estándar de JavaScript.
<SCRIPT>
window.onerror = myOnError
msgArray = new Array()
urlArray = new Array()
lnoArray = new Array()
function myOnError(msg, url, lno) {
msgArray[msgArray.length]
= msg
urlArray[urlArray.length] = url
lnoArray[lnoArray.length]
= lno
return true
}
function displayErrors() {
win2=window.open('','window2','scrollbars=yes')
win2.document.writeln('<B>Error Report</B><P>')
for (var i=0; i < msgArray.length; i++) {
win2.document.writeln('<B>Error in file:</B> '
+ urlArray[i] + '<BR>')
win2.document.writeln('<B>Line
number:</B> ' + lnoArray[i] + '<BR>')
win2.document.writeln('<B>Message:</B> '
+ msgArray[i] + '<P>')
}
win2.document.close()
}
</SCRIPT>
<BODY onload="noSuchFunction()">
<FORM>
<BR><INPUT TYPE="button" VALUE="This button has a syntax error" onClick="alert('unterminated string')">
<P><INPUT TYPE="button" VALUE="Display Error Report" onClick="displayErrors()">
</FORM>
Este ejemplo dará el resultado:
Error Report Error in file: file:///c%7C/temp/onerror.html Line number: 34 Message: unterminated string literal Error in file: file:///c%7C/temp/onerror.html Line number: 34 Message: missing ) after argument list Error in file: file:///c%7C/temp/onerror.html Line number: 30 Message: noSuchFunction is not defined
Ejemplo 4: un controlador de eventos llama a una función. En la etiqueta IMG, el controlador onError llama a la función badImage cuando ocurren errores al cargar la imagen.
<SCRIPT>
function badImage(theImage) {
alert('Error: ' + theImage.name + ' did not load properly.')
}
</SCRIPT>
<FORM>
<IMG NAME="imageBad2" SRC="orca.gif" ALIGN="left" BORDER="2" onError="badImage(this)">
</FORM>
onfocus
– establecer el foco en un elemento. Ejecuta código JavaScript cuando ocurre un evento focus; es decir, si una ventana, marco o conjunto de marcos recibe el foco o si un elemento del formulario recibe el foco. El evento onfocus ocurre cuando un elemento recibe foco. El evento onfocus se utiliza a menudo en los campos de entrada. Todos los elementos HTML EXCEPTO: base, bdo, br, head, html, iframe, meta, param, script, style, y title
Ejecute JavaScript cuando el campo de entrada reciba el foco:
<input type="text" onfocus="myFunction()">
Aquí el controlador onFocus se usa en el objeto valueField Textarea para llamar a la función valueCheck.
<INPUT TYPE="textarea" VALUE="" NAME="valueField" onFocus="valueCheck()">
onfocusin
El evento onfocusin ocurre cuando un elemento recibe foco. El evento onfocusin se utiliza a menudo en los campos de entrada. Todos los elementos HTML EXCEPTO: base, bdo, br, head, html, iframe, meta, param, script, style, y title
Ejecute JavaScript cuando un campo de entrada esté a punto de recibir el foco:
<input type="text" onfocusin="myFunction()">
onfocusout
El evento onfocusout ocurre cuando un elemento pierde el foco. El evento onfocusout se utiliza a menudo en los campos de entrada. El evento onfocusout se usa a menudo durante la validación del formulario (cuando el usuario abandona el campo del formulario). Todos los elementos HTML EXCEPTO: base, bdo, br, head, html, iframe, meta, param, script, style, y title
Ejecute JavaScript cuando un campo de entrada esté a punto de perder el foco:
<input type="text" onfocusout="myFunction()">
onfullscreenchange
El evento fullscreenchange ocurre cuando un elemento se ve en modo de pantalla completa. Utilice el método element.requestFullscreen() para ver el elemento en modo de pantalla completa. Utilice el método element.exitFullscreen() para cancelar el modo de pantalla completa. Cada navegador requiere un prefijo específico (ver paréntesis): 45.0 (webkit), 11.0 (ms), 47.0 (moz), 5.1 (webkit), 15.0 (webkit)
Mostrar algo de texto al ver una página en modo de pantalla completa:
document.addEventListener("fullscreenchange", function() {
output.innerHTML = "fullscreenchange event fired!";
});
Utilice prefijos para código entre navegadores:
/* Sintaxis estándar */
document.addEventListener("fullscreenchange", function() {
...
});
/* Firefox */
document.addEventListener("mozfullscreenchange", function() {
...
});
/* Chrome, Safari and Opera */
document.addEventListener("webkitfullscreenchange", function() {
...
});
/* IE / Edge */
document.addEventListener("msfullscreenchange", function() {
...
});
onfullscreenerror
El evento fullscreenerror ocurre cuando un elemento no se puede ver en modo de pantalla completa, a pesar de que fue solicitado. Utilice el método element.requestFullscreen() para ver el elemento en modo de pantalla completa. Utilice el método element.exitFullscreen() para cancelar el modo de pantalla completa.
Texto de advertencia si el elemento no se puede ver en modo de pantalla completa:
document.addEventListener("fullscreenerror", function() {
alert("Fullscreen denied")
});
Utilice prefijos para código entre navegadores:
/* Sintaxis estándar */
document.addEventListener("fullscreenerror", function() {
...
});
/* Firefox */
document.addEventListener("mozfullscreenerror", function() {
...
});
/* Chrome, Safari and Opera */
document.addEventListener("webkitfullscreenerror", function() {
...
});
/* IE / Edge */
document.addEventListener("msfullscreenerror", function() {
...
});
onhashchange
– cambiando la encuadernación de parte de la dirección. Soporte de etiquetas HTML: body. El evento onhashchange ocurre cuando se realizan cambios en la parte de anclaje (comienza con el carácter ‘#’) de la URL actual. Un ejemplo de lo que realmente es la parte ancla: digamos que la URL actual es http://www.example.com/test.htm#part2. La parte ancla de esa URL sería #part2.
Para activar este evento puedes:
Cambie la parte vinculante configurando la propiedad location.hash o location.href del objeto Location
Ir a la página actual con otro marcador (use los botones atrás o adelante)
Haga clic en el enlace de anclaje del marcador
Ejecutar JavaScript cuando parte del ancla haya cambiado:
<body onhashchange="myFunction()">
Cómo asignar un evento «onhashchange» a un objeto window:
window.onhashchange = myFunction;
oninput
– inicio de la entrada de datos. El evento oninput ocurre cuando el elemento recibe la entrada del usuario. Este evento ocurre cuando el valor de un elemento cambia input o textarea. Este evento es similar al evento onchange. La diferencia es que el evento oninput ocurre inmediatamente después de que cambia el valor del elemento, mientras que onchange ocurre cuando el elemento pierde el foco después de que su contenido ha cambiado. Otra diferencia es que el evento onchange también funciona en elementos select. Soporte de etiquetas HTML: input type=»color», input type=»date», input type=»datetime», input type=»email», input type=»month», input type=»number», input type=»password», input type=»range», input type=»search», input type=»tel», input type=»text», input type=»time», input type=»url», input type=»week» y textarea
Ejecutar JavaScript cuando el usuario escribe algo en un campo input:
<input type="text" oninput="myFunction()">
Control deslizante de rango: cómo actualizar dinámicamente el valor del control deslizante:
<input type="range" oninput="myFunction(this.value)">
oninvalid
– el artículo está dañado. El evento oninvalid ocurre cuando se envía el elemento input no es válido. Por ejemplo, un campo de entrada no es válido si el atributo requerido está configurado y el campo está vacío (el atributo requerido especifica que el campo de entrada debe completarse antes de poder enviar el formulario). Soporte de etiquetas HTML: input
Advertencia sobre algún texto si el campo de entrada no es válido:
<input type="text" oninvalid="alert('¡Debes llenar el formulario!');" required>
Texto de advertencia si el campo de entrada contiene menos de 6 caracteres:
Имя: <input type="text" id="myInput" name="fname" pattern=".{6,}" required>
<script>
document.getElementById("myInput").addEventListener("invalid", myFunction);
function myFunction() {
alert("Debe contener 6 o más caracteres");
}
</script>
Texto de advertencia si el campo de entrada contiene un número menor que 2 o mayor que 5:
Номер: <input type="number" id="myInput" name="quantity" min="2" max="5" required>
<script>
document.getElementById("myInput").addEventListener("invalid", myFunction);
function myFunction() {
alert("Debes elegir un número del 2 al 5. Has elegido: " + this.value);
}
</script>
onkeydown
– tecla presionada. El evento onkeydown ocurre cuando el usuario presiona una tecla (en el teclado). Orden de eventos asociados con un evento onkeydown: onkeydown, onkeypress, onkeyup. Todos los elementos HTML EXCEPTO: base, bdo, br, head, html, iframe, meta, param, script, style, y title. El evento KeyDown siempre ocurre antes del evento KeyPress. Si onKeyDown regresa false, el evento KeyPress no ocurre. Esto evita que ocurran eventos KeyPress cuando el usuario mantiene presionada una tecla.
type – Indica el tipo de evento.
target – Indica el objeto al que se envió originalmente el evento.
layerX, layerY, pageX, pageY, screenX, screenY – Para un evento sobre ventana, representa la ubicación del cursor en el momento en que ocurrió el evento. Para un evento encima de un formulario, representa la posición del elemento del formulario.
which – ASCII-el valor de la tecla presionada. Para obtener la letra, número o carácter real de la tecla presionada, use el método String.fromCharCode. Para establecer esta propiedad cuando se desconoce el valor ASCII, utilice el String.charCodeAt.
modifiers – Contiene una lista de teclas modificadoras presionadas cuando ocurre el evento..
Ejecutar JavaScript cuando el usuario presiona una tecla:
<input type="text" onkeydown="myFunction()">
Utilice «onkeydown» con evento «onkeyup»:
<input type="text" onkeydown="keydownFunction()" onkeyup="keyupFunction()">
Aquí, la función blockA se utiliza para calcular los caracteres ingresados desde el teclado en el cuadro de texto de entrada de texto. Si el usuario ingresa «a» o «A», la función devuelve false, y el cuadro de texto no muestra el valor. En esta función la propiedad which El evento asigna el valor ASCII de la tecla presionada por el usuario a la variable keyChar. Operador if calcula keyChar y devuelve false para caracteres específicos:
<form name="main">
<input name="textentry"
type=text size=10 maxlength=10>
</form>
<script>
function blockA(e) {
var keyChar = String.fromCharCode(e.which);
if (keyChar == 'A' || keyChar == 'a')
return false;
}
document.main.textentry.onkeydown = blockA;
</script>
onkeypress
– Se presiona una tecla y luego se suelta. Ejecuta código JavaScript cuando ocurre el evento KeyPress; es decir, si el usuario mantiene presionada la tecla. El evento onkeypress ocurre cuando el usuario presiona una tecla (en el teclado). El evento onkeypress no se activa para todas las teclas (por ejemplo, ALT, CTRL, SHIFT, ESC) en todos los navegadores. Para detectar solo si el usuario presionó una tecla, use el evento onkeydown porque funciona para todas las teclas. Orden de eventos asociados con un evento onkeydown: onkeydown, onkeypress, onkeyup. Todos los elementos HTML EXCEPTO: base, bdo, br, head, html, iframe, meta, param, script, style, y title. El evento KeyPress se activa inmediatamente después del evento KeyDown solo cuando onKeyDown devuelve algo distinto a false. El evento KeyPress ocurre repetidamente hasta que el usuario suelta la tecla. Puedes cancelar eventos individuales KeyPress.
type – Indica el tipo de evento.
target – Indica el objeto al que se envió originalmente el evento.
layerX, layerY, pageX, pageY, screenX, screenY – Para un evento, la superposición representa la ubicación del cursor en el momento en que ocurrió el evento. Para un evento de sobreformulario, representa la posición de un elemento de formulario.
which – ASCII-el valor de la tecla presionada. Para obtener la letra, número o carácter real de la tecla presionada, use el método String.fromCharCode. Para establecer esta propiedad cuando se desconoce el valor ASCII, utilice el String.charCodeAt.
modifiers – Contiene una lista de teclas modificadoras presionadas cuando ocurre el evento.
Ejecutar JavaScript cuando el usuario presiona una tecla:
<input type="text" onkeypress="myFunction()">
Aquí, el método captureEvents captura la entrada del teclado y el controlador onKeyPress llama a la función blockA para verificar las pulsaciones de teclas. Si se presionan las teclas «a» o «z», la función desplaza la ventana del Navegador.
function blockA(e) {
var keyChar = String.fromCharCode(e.which);
if (keyChar == 'A' || keyChar == 'a')
self.scrollBy(10,10);
else if(keyChar == 'Z' || keyChar == 'z')
self.scrollBy(-10,-10);
else return false;
}
document.captureEvents(Event.KEYPRESS);
document.onkeypress = blockA;
onkeyup
– tecla liberada. El evento onkeyup ocurre cuando el usuario suelta una tecla (en el teclado). Orden de eventos asociados con un evento onkeydown: onkeydown, onkeypress, onkeyup. Todos los elementos HTML EXCEPTO: base, bdo, br, head, html, iframe, meta, param, script, style, y title.
type – Indica el tipo de evento.
target – Indica el objeto al que se envió originalmente el evento.
layerX, layerY, pageX, pageY, screenX, screenY – Para un evento, la superposición representa la ubicación del cursor en el momento en que ocurrió el evento. Para un evento de sobreformulario, representa la posición de un elemento de formulario.
which – ASCII-el valor de la tecla presionada. Para obtener la letra, número o carácter real de la tecla presionada, use el método String.fromCharCode. Para establecer esta propiedad cuando se desconoce el valor ASCII, utilice el String.charCodeAt.
modifiers – Contiene una lista de teclas modificadoras presionadas cuando ocurre el evento.
Ejecute JavaScript cuando el usuario suelte la clave:
<input type="text" onkeyup="myFunction()">
Utilice «onkeydown» con evento «onkeyup»:
<input type="text" onkeydown="keydownFunction()" onkeyup="keyupFunction()">
Genere la clave real que se emitió dentro del campo de texto:
Введите свое имя: <input type="text" id="fname" onkeyup="myFunction()">
<script>
function myFunction() {
var x = document.getElementById("fname").value;
document.getElementById("demo").innerHTML = x;
}
</script>
Aquí, el método captureEvents captura la entrada del teclado y el controlador onKeyUp llama a la función Key_Up. Método alert la función abre un cuadro de diálogo para mostrar el valor de la tecla presionada.:
function Key_Up(e) {
var keyChar = String.fromCharCode(e.which);
alert("Hold '" + keyChar +"' again for me, okay?");
}
document.onkeyup=Key_Up;
document.captureEvents(Event.KEYUP);
onload
– artículo cargado. El evento onload ocurre cuando se ha cargado un objeto. El evento onload se usa con mayor frecuencia en un elemento body para ejecutar un script después de que la página web haya cargado completamente todo el contenido (incluidas imágenes, archivos de script, archivos CSS, etc.). El evento onload se puede utilizar para verificar el tipo y la versión del navegador del visitante y cargar la versión apropiada de la página web según la información recibida. El evento onload también se puede utilizar para procesar archivos cookie.
El controlador onLoad se utiliza en la etiqueta BODY o FRAMESET, por ejemplo, BODY onLoad=»…». Para etiquetas FRAMESET y FRAME: el evento del controlador onLoad en el marco (colocado en la etiqueta BODY) ocurre antes de la onLoad de la etiqueta FRAMESET (colocada en la etiqueta FRAMESET). Para imágenes, el controlador onLoad especifica el script que se ejecutará cuando se genere la image. No confunda la salida de imágenes con la carga de imágenes. Puede cargar varias imágenes y luego mostrarlas una por una en el mismo objeto Image estableciendo la propiedad src del objeto. Si cambia la salida de la imagen de esta manera, onLoad se ejecuta cada vez que se genera la imagen, no solo cuando las imágenes se cargan en la memoria.
Si especifica un controlador onLoad para un objeto Image que genera un GIF en bucle (GIF de varias imágenes), cada bucle de animación incluye un controlador onLoad y el controlador se ejecuta una vez para cada bucle. Puede utilizar el controlador onLoad para crear una animación JavaScript configurando repetidamente la propiedad src de un objeto Image.
type – Indica el tipo de evento.
target – Indica el objeto al que se envió originalmente el evento.
width, height – Para un evento encima de una ventana, pero no encima de una capa, estas propiedades representan el ancho y el alto de la ventana.
Ejecute JavaScript inmediatamente después de cargar la página:
<body onload="myFunction()">
En JavaScript, use el método addEventListener():
object.addEventListener("load", myScript);
Mostrar un mensaje cuando se carga la página. Aquí el controlador onLoad imprime un saludo después de que se haya cargado la página.
<BODY onLoad="window.alert("Welcome to the Brave New World home page!")>
Muestra un mensaje al cargar una imagen. Aquí se crean dos objetos Image: uno – constructor Image, y el segundo – etiqueta IMG. Cada objeto Image tiene un controlador onLoad que llama a la función displayAlert, que muestra un mensaje. Para una imagen creada con una etiqueta IMG, el cuadro de diálogo alert muestra el nombre de la imagen. Para una imagen creada por el diseñador Image, alert muestra un mensaje sin el nombre de la imagen. Esto ocurre porque el controlador onLoad para el objeto creado por el constructor Image, debe ser el nombre de una función y no puede especificar parámetros para la función displayAlert.
<SCRIPT>
imageA = new Image(50,50)
imageA.onload=displayAlert
imageA.src="cyanball.gif"
function displayAlert(theImage) {
if (theImage==null) {
alert('An image loaded')
}
else alert(theImage.name + ' has been loaded.')
}
</SCRIPT>
<IMG NAME="imageB" SRC="greenball.gif" ALIGN="top" onLoad=displayAlert(this)><BR>
Salida de animación GIF en bucle. La imagen que se muestra aquí es birdie.gif, que es una imagen GIF animada. El controlador onLoad incrementa la variable cycles, que rastrea el número de ciclos de animación. Para ver el valor cycles, el usuario hace clic en el botón Count Loops.
<SCRIPT>
var cycles=0
</SCRIPT>
<IMG ALIGN="top" SRC="birdie.gif" BORDER=0 onLoad="++cycles">
<INPUT TYPE="button" VALUE="Count Loops" onClick="alert('The animation has looped ' + cycles + ' times.')">
Cambia la animación GIF que se muestra. Este ejemplo utiliza el controlador onLoad para rotar seis animaciones GIF. Cada animación se muestra como una secuencia de objetos individuales Image. Cuando se carga el documento, se genera !anim0.html. Cuando se completa esta animación, el controlador onLoad hace que se cargue el siguiente archivo, !anim1.html, en lugar del primer archivo. Una vez completada la última animación, !anim5.html, se muestra nuevamente el primer archivo. Tenga en cuenta que la función changeAnimation no se llama a sí misma después de cambiar la propiedad src de un objeto Image. Esto sucede porque se cambia la propiedad src, el controlador onLoad de la imagen está habilitado y se llama a la función changeAnimation.
<SCRIPT>
var whichImage=0
var maxImages=5
function changeAnimation(theImage) {
++whichImage
if (whichImage <= maxImages) {
var imageName="!anim" + whichImage + ".gif"
theImage.src=imageName
} else {
whichImage=-1
return
}
}
</SCRIPT>
<IMG NAME="changingAnimation" SRC="!anim0.gif" BORDER=0 ALIGN="top" onLoad="changeAnimation(this)">
Utilice el evento onload para el elemento img. Notificación «Imagen cargada» inmediatamente después de cargar la imagen:
<img src="javascriptw3.gif" onload="loadImage()" width="100" height="132">
<script>
function loadImage() {
alert("Image is loaded");
}
</script>
Utilice el evento onload para procesar archivos cookie:
<body onload="checkCookies()">
<script>
function checkCookies() {
var text = "";
if (navigator.cookieEnabled == true) {
text = "Cookies incluido.";
} else {
text = "Cookies no incluido.";
}
document.getElementById("demo").innerHTML = text;
}
</script>
onloadeddata
– datos del archivo cargado. Controlador de eventos loadeddata, lo que ocurre cuando el audio/vídeo ya se puede reproducir en la posición actual, pero la carga de datos multimedia continúa. El evento onloadeddata ocurre cuando se carga el marco multimedia, pero no garantiza que haya suficientes datos disponibles para comenzar la reproducción. El evento onloadeddata ocurre después de onloadedmetadata y antes oncanplay.
Al cargar medios, ocurren 7 eventos en el siguiente orden:
1. onloadstart
2. ondurationchange
3. onloadedmetadata
4. onloadeddata
5. onprogress
6. oncanplay
7. oncanplaythrough
Ejecute JavaScript cuando haya datos disponibles para el fotograma actual (por video):
<video onloadeddata="myFunction()">
Ejecute JavaScript cuando haya datos disponibles para el fotograma actual (por audio):
<audio onloadeddata="myFunction()">
onloadedmetadata
– metadatos del archivo cargado. Controlador de eventos loadedmetadata, que ocurre cuando se han cargado los metadatos (duración, dimensiones del cuadro (para video) y texto de la pista) para el archivo de audio/video especificado. El evento onloadedmetadata ocurre cuando se han cargado los metadatos del medio.
Los metadatos de audio o vídeo constan de:
Duración
Dimensiones (vídeo)
Pistas
Ejecute JavaScript al cargar metadatos de video:
<video onloadedmetadata="myFunction()">
En JavaScript:
object.onloadedmetadata = function(){myScript};
En JavaScript, use el método addEventListener():
object.addEventListener("loadedmetadata", myScript);
onloadstart
– comience a cargar el elemento. Controlador de eventos loadstart, que ocurre cuando comienza el proceso de descarga de un archivo de audio/video.
onmessage
– aparece el mensaje. El evento onmessage ocurre cuando se recibe un mensaje a través de una fuente de evento. El objeto de evento para el evento onmessage admite las siguientes propiedades:
datos: contiene el mensaje real
origin — URL del documento que generó el evento.
LastEventId — ID del último mensaje visto en el flujo de eventos.
Eventos relacionados:
onopen: ocurre cuando una conexión al servidor está abierta.
onerror: ocurre cuando ocurre un problema
Cree un nuevo objeto EventSource y especifique la URL de la página que envía las actualizaciones. Cada vez que se recibe una actualización, se produce el evento onmessage. Cuando ocurre el evento onmessage, coloque los datos recibidos en un elemento div con id=»myDIV»:
var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
document.getElementById("myDIV").innerHTML += event.data + "<br>";
};
onmousedown
– se presiona el botón del mouse. Controlador de eventos mousedown, que ocurre cuando se presiona el botón izquierdo del mouse. Diferencia con evento click es eso click es una combinación de eventos mousedown y mouseup. Ejecuta código JavaScript cuando ocurre un evento MouseDown; es decir, cuando el usuario presiona una tecla del mouse. Si onMouseDown regresa false, acción predeterminada (entrar en modo drag, entrando en modo selection o activación de hipervínculo) se cancela. La activación se desencadena por un evento MouseDown en el hipervínculo. Si el enlace está activado, cambia de color para indicar el nuevo estado. La acción predeterminada varía: iniciar arrastre, selección de texto, desplazamiento o zoom (combinado con presionar la rueda cuando sea compatible)
El evento onmousedown ocurre cuando el usuario presiona el botón del mouse sobre un elemento HTML. Orden de eventos para los botones izquierdo y central del mouse:
onmousedown
onmouseup
по клику
Orden de eventos para el botón derecho del mouse:
onmousedown
onmouseup
oncontextmenu
type – Indica el tipo de evento.
target – Indica el objeto al que se envió originalmente el evento.
layerX, layerY, pageX, pageY, screenX, screenY- La ubicación del cursor cuando ocurrió el evento MouseDown.
which – Representa 1 para un clic izquierdo del mouse y 3 para un clic derecho del mouse.
modifiers – Contiene una lista de teclas modificadoras presionadas cuando ocurrió el evento MouseDown.
Llamar a una función cuando se presiona el botón del mouse sobre un párrafo:
<p onmousedown="myFunction()">Click the text!</p>
Aquí el usuario puede mover la imagen en la página HTML arrastrándola con el mouse. Su código HTML define la imagen y la posiciona en una capa llamada container1. En el código JavaScript, los controladores de eventos establecen propiedades de posicionamiento container1 cuando el usuario arrastra una imagen, creando una animación. El atributo ID del elemento P que contiene la imagen se establece en container1, haciendo container1 Identificador único del párrafo y la imagen. La etiqueta STYLE crea una capa para container1 y lo posiciona. El siguiente código JavaScript define los controladores onMouseDown, onMouseUp y onMouseMove. Usando hojas de estilo/style sheets, la imagen se define inicialmente y se posiciona así:
<HEAD>
<STYLE type="text/css">
#container1 {
position:absolute; left:200; top:200}
</STYLE>
</HEAD>
<BODY>
<P ID="container1">
<img src="backgrnd.gif" name="myImage" width=96 height=96>
</P>
</BODY>
En este código, el método captureEvents captura eventos MouseUp y MouseDown. Las funciones DRAG_begindrag y DRAG_enddrag se llaman respectivamente para manejar estos eventos. Si el usuario presiona el botón izquierdo del mouse, se inicia la función DRAG_begindrag, capturando los eventos MouseMove y decirle a la función DRAG_drag que los procese. Luego asigna el valor de la propiedad pageX del evento MouseDown a la propiedad DRAG_lastX, el valor de la propiedad pageY a la propiedad DRAG_lastY y true – propiedad DRAG_dragging. La función DRAG_drag calcula DRAG_dragging para garantizar que el evento MouseMove fue capturado por la función DRAG_begindrag, luego usa el método moveBy para posicionar el objeto y asigna valores a las propiedades DRAG_lastX y DRAG_lastY. Cuando el usuario suelta el botón izquierdo del mouse, la función DRAG_enddrag deja de capturar eventos MouseMove. DRAG_enddrag luego garantiza que no se llame a ninguna otra función configurando onmousemove en Null y DRAG_dragging – en false.
<SCRIPT>
container1.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);
container1.onmousedown=DRAG_begindrag;
container1.onmouseup=DRAG_enddrag;
var DRAG_lastX, DRAG_lastY, DRAG_dragging;
function DRAG_begindrag(e) {
if (e.which == 1) {
window.captureEvents(Event.MOUSEMOVE);
window.onmousemove=DRAG_drag;
DRAG_lastX=e.pageX;
DRAG_lastY=e.pageY;
DRAG_dragging=true;
return false;
}
else {
/*Aquí hay algunos trabajos sobre cómo manejar los clics derecho del mouse*/
return true;
}
}
function DRAG_enddrag(e) {
if (e.which == 1) {
window.releaseEvents(Event.MOUSEMOVE);
window.onmousemove=null
DRAG_dragging=false;
return false;
}
else {
/*Aquí hay algunos trabajos sobre cómo manejar los clics derecho del mouse*/
return true;
}
}
function DRAG_drag(e) {
if (DRAG_dragging) {
/*Esta función se llama solo cuando se captura MOUSEMOVE*/
moveBy(e.pageX-DRAG_lastX, e.pageY-DRAG_lastY);
DRAG_lastX = e.pageX;
DRAG_lastY = e.pageY;
return false;
}
else {
return true;
}
}
</SCRIPT>
onmouseenter
– El puntero del mouse está sobre un elemento. Controlador de eventos mouseenter, que ocurre cuando el cursor del mouse ingresa al área del elemento. A diferencia de mouseover evento mouseenter no aparece («no burbujea»), es decir, no ocurre si el cursor del mouse toca un elemento secundario del elemento especificado. Evento onmouseenter Ocurre cuando el puntero del mouse ingresa a un elemento. Evento onmouseenter a menudo se usa junto con el evento onmouseleave, que ocurre cuando el puntero del mouse abandona un elemento. El evento onmouseenter es similar al evento onmouseover. La diferencia es que el evento onmouseenter no aparece (no se propaga hacia arriba en la jerarquía del documento).
Ver también... Los científicos tienen grandes esperanzas puestas en las cuevas lunares Estudio de los órganos sensoriales en condiciones de microgravedad: métodos y resultados en 2026 |
Un evento mouseenter enviado a cada elemento de la jerarquía a medida que ingresan. Aquí se envían 4 eventos a los cuatro elementos de la jerarquía cuando el puntero llega al texto. Evento único al pasar el mouse mouseover se envía al elemento más profundo del árbol DOM, luego asciende en la jerarquía hasta que un controlador lo cancela o llega a la raíz. Si hay una jerarquía profunda, el número de eventos enviados mouseover puede ser bastante grande y causar importantes problemas de rendimiento. En tales casos es mejor manejar los eventos mouseenter. En combinación con el evento correspondiente mouseleave (que se activa en el elemento cuando el mouse abandona el área de contenido), evento mouseenter actúa de manera muy similar a una pseudoclase CSS :hover.
Llama a una función cuando pasas el cursor sobre una imagen:
<img onmouseenter="bigImg(this)" src="smiley.gif" alt="Smiley">
JavaScript:
object.onmouseenter = function(){myScript};
JavaScript, using the addEventListener() method:
object.addEventListener("mouseenter", myScript);
Este ejemplo demuestra la diferencia entre los eventos onmousemove, onmouseenter y mouseover:
<div onmousemove="myMoveFunction()"> <p id="demo1">I will demonstrate onmousemove!</p> </div> <div onmouseenter="myEnterFunction()"> <p id="demo2">I will demonstrate onmouseenter!</p> </div> <div onmouseover="myOverFunction()"> <p id="demo3">I will demonstrate onmouseover!</p> </div>
En el siguiente ejemplo trivial, el evento mouseenter se utiliza para cambiar el borde de un elemento div cuando el mouse ingresa al espacio asignado. Luego agrega un elemento a la lista con el número de evento mouseenter o mouseleave.
<SCRIPT>
var enterEventCount = 0;
var leaveEventCount = 0;
const mouseTarget = document.getElementById("mouseTarget");
const unorderedList = document.getElementById("unorderedList");
mouseTarget.addEventListener("mouseenter", (e) => {
mouseTarget.style.border = "5px dotted orange";
enterEventCount++;
addListItem("This is mouseenter event " + enterEventCount + ".");
});
mouseTarget.addEventListener("mouseleave", (e) => {
mouseTarget.style.border = "1px solid #333";
leaveEventCount++;
addListItem("This is mouseleave event " + leaveEventCount + ".");
});
function addListItem(text) {
// Cree un nuevo nodo de texto usando el texto proporcionado
var newTextNode = document.createTextNode(text);
// Crear un nuevo elemento li
var newListItem = document.createElement("li");
// Agregar un nodo de texto a un elemento li
newListItem.appendChild(newTextNode);
// Agregue el elemento de lista recién creado a la lista
unorderedList.appendChild(newListItem);
}
<SCRIPT>
<style>
#mouseTarget {
box-sizing: border-box;
width: 15rem;
border: 1px solid #333;
}
</style>
<div id="mouseTarget">
<ul id="unorderedList">
<li>No events yet!</li>
</ul>
</div>
onmouseleave
– el puntero del mouse ha abandonado el elemento. Controlador de eventos mouseleave, que ocurre cuando el cursor del mouse sale del área del elemento. A diferencia de mouseout evento mouseenter no aparece («no burbujea»), es decir, no ocurre si el cursor del mouse toca un elemento secundario del elemento especificado. El evento onmouseleave ocurre cuando el puntero del mouse abandona el elemento. El evento onmouseleave se usa a menudo junto con el evento onmouseenter, que ocurre cuando el puntero del mouse ingresa a un elemento. El evento onmouseleave es similar al evento onmouseout. La diferencia es que el evento onmouseleave no aparece (no se propaga hacia arriba en la jerarquía del documento).
Un evento mouseleave se activa cuando el cursor de un manipulador (normalmente un ratón) se mueve más allá de los límites de un elemento. mouseleave y mouseout similares, pero diferentes en eso mouseleave no flota, pero mouseout aparece. Esto significa que mouseleave se activa cuando el cursor se mueve más allá de los límites de un elemento y todos sus hijos, mientras mouseout se activa cuando el cursor sale de los límites de un elemento o uno de sus elementos secundarios (incluso si el cursor todavía está dentro del elemento).
Llamar a una función cuando el puntero del mouse se mueve fuera de la imagen:
<img onmouseleave="normalImg(this)" src="smiley.gif" alt="Smiley">
JavaScript:
object.onmouseleave = function(){myScript};
JavaScript, using the addEventListener() method:
object.addEventListener("mouseleave", myScript);
Este ejemplo demuestra la diferencia entre los eventos onmousemove, onmouseleave y onmouseout:
<div onmousemove="myMoveFunction()"> <p id="demo1">I will demonstrate onmousemove!</p> </div> <div onmouseleave="myLeaveFunction()"> <p id="demo2">I will demonstrate onmouseleave!</p> </div> <div onmouseout="myOutFunction()"> <p id="demo3">I will demonstrate onmouseout!</p> </div>
En la documentacion mouseout hay un ejemplo que ilustra la diferencia entre mouseout y mouseleave. El siguiente ejemplo muestra cómo utilizar mouseout para simular el principio de delegación de eventos mouseleave.
<ul id="test">
<li>
<ul class="leave-sensitive">
<li>item 1-1</li>
<li>item 1-2</li>
</ul>
</li>
<li>
<ul class="leave-sensitive">
<li>item 2-1</li>
<li>item 2-2</li>
</ul>
</li>
</ul>
<script>
var delegationSelector = ".leave-sensitive";
document.getElementById("test").addEventListener(
"mouseout",
function (event) {
var target = event.target,
related = event.relatedTarget,
match;
// search for a parent node matching the delegation selector
while (
target &&
target != document &&
!(match = matches(target, delegationSelector))
) {
target = target.parentNode;
}
// exit if no matching node has been found
if (!match) {
return;
}
// loop through the parent of the related target to make sure that it's not a child of the target
while (related && related != target && related != document) {
related = related.parentNode;
}
// exit if this is the case
if (related == target) {
return;
}
// the "delegated mouseleave" handler can now be executed
// change the color of the text
target.style.color = "orange";
// reset the color after a small amount of time
setTimeout(function () {
target.style.color = "";
}, 500);
},
false,
);
// function used to check if a DOM element matches a given selector
// the following code can be replaced by this IE8 compatible function: https://gist.github.com/2851541
function matches(elem, selector) {
// the matchesSelector is prefixed in most (if not all) browsers
return elem.matchesSelector(selector);
}
</script>
onmousemove
– El puntero del ratón se mueve sobre el elemento. Controlador de eventos mousemove, que ocurre cuando el puntero del mouse se mueve sobre un elemento.
type – Indica el tipo de evento.
target – Indica el objeto al que se envió originalmente el evento.
layerX, layerY, pageX, pageY, screenX, screenY – La ubicación del cursor cuando ocurrió el evento MouseMove.
JavaScript:
object.onmousemove = function(){myScript};
JavaScript, using the addEventListener() method:
object.addEventListener("mousemove", myScript);
Llama a una función cuando pasas el cursor sobre un elemento div:
<div onmousemove="myFunction()">Move the cursor over me</div>
El siguiente ejemplo utiliza eventos mousedown, mousemove y mouseup, permitiendo al usuario dibujar en el lienzo HTML. Su funcionalidad es sencilla: el grosor de la línea se establece en 1 y el color es siempre negro. Cuando se carga la página, las constantes myPics y context para almacenar una referencia al lienzo y al contexto 2D que usaremos para dibujar. El sorteo comienza cuando se activa el evento mousedown. Primero almacenamos las coordenadas xey del puntero del mouse en variables xey y luego configuramos isDrawing en true. Cuando el puntero del mouse se mueve por la página, se activa el evento mousemove. Si isDrawing tiene un valor true, el controlador de eventos llama a la función drawLine para dibujar una línea desde los valores xey almacenados hasta la ubicación actual. Cuando regresa la función drawLine(), ajustamos las coordenadas y luego las almacenamos en las coordenadas xey. Evento mouseup dibuja el último segmento de línea, establece xey en 0 y detiene el dibujo estableciendo isDrawing en false.
<script>
// When true, moving the mouse draws on the canvas
let isDrawing = false;
let x = 0;
let y = 0;
const myPics = document.getElementById("myPics");
const context = myPics.getContext("2d");
// event.offsetX, event.offsetY gives the (x,y) offset from the edge of the canvas.
// Add the event listeners for mousedown, mousemove, and mouseup
myPics.addEventListener("mousedown", (e) => {
x = e.offsetX;
y = e.offsetY;
isDrawing = true;
});
myPics.addEventListener("mousemove", (e) => {
if (isDrawing) {
drawLine(context, x, y, e.offsetX, e.offsetY);
x = e.offsetX;
y = e.offsetY;
}
});
window.addEventListener("mouseup", (e) => {
if (isDrawing) {
drawLine(context, x, y, e.offsetX, e.offsetY);
x = 0;
y = 0;
isDrawing = false;
}
});
function drawLine(context, x1, y1, x2, y2) {
context.beginPath();
context.strokeStyle = "black";
context.lineWidth = 1;
context.moveTo(x1, y1);
context.lineTo(x2, y2);
context.stroke();
context.closePath();
}
</script>
<style>
canvas {
border: 1px solid black;
width: 560px;
height: 360px;
}
</style>
<h1>Drawing with mouse events</h1>
<canvas id="myPics" width="560" height="360"></canvas>
onmouseout
– el puntero del ratón sale del elemento. Controlador de eventos mouseout, que ocurre cuando el puntero del mouse se mueve más allá de los límites de un elemento. Ejecuta código JavaScript cuando ocurre un evento MouseOut; es decir, cada vez que el puntero del mouse sale del área (en el mapa de imagen del cliente) o hipervínculo. Si el puntero del mouse se mueve de un área del mapa de imagen del cliente a otra, primero recibirá onMouseOut para la primera área y luego onMouseOver para la segunda área. Las etiquetas de área que utilizan onMouseOut deben tener un atributo HREF en la etiqueta AREA. Debe ser devuelto true en el controlador de eventos si desea establecer propiedades status o defaultStatus usando onMouseOver.
El evento onmouseout ocurre cuando el puntero del mouse se mueve fuera de un elemento. El evento onmouseout se usa a menudo junto con el evento onmouseover, que ocurre cuando pasa el cursor sobre un elemento. El evento onmouseout es similar al evento onmouseleave. La diferencia es que el evento onmouseleave no aparece (no se propaga hacia arriba en la jerarquía del documento).
type – Indica el tipo de evento.
target – Indica el objeto al que se envió originalmente el evento.
layerX, layerY, pageX, pageY, screenX, screenY – La ubicación del cursor cuando ocurrió el evento MouseOut
Llamar a una función cuando el puntero del mouse se mueve fuera de la imagen:
<img onmouseout="normalImg(this)" src="smiley.gif" alt="Smiley">
El siguiente ejemplo ilustra la diferencia entre los eventos mouseout y mouseleave. Un evento mouseleave añadido a ul, colorear la lista de color púrpura cada vez que el mouse sale ul. mouseout se agrega a la lista para colorear el elemento de destino de naranja cuando el mouse lo abandona. Cuando intente esto, encontrará que el mouseout se pasa a elementos de lista individuales y mouseleave — la lista completa, gracias a la jerarquía de elementos y al hecho de que los elementos de la lista ocultan el subyacente ul.
<script>
const test = document.getElementById("test");
// Briefly make the list purple when the mouse moves off the
// <ul> element
test.addEventListener(
"mouseleave",
(event) => {
// highlight the mouseleave target
event.target.style.color = "purple";
// reset the color after a short delay
setTimeout(() => {
event.target.style.color = "";
}, 1000);
},
false,
);
// Briefly make an <li> orange when the mouse moves off of it
test.addEventListener(
"mouseout",
(event) => {
// highlight the mouseout target
event.target.style.color = "orange";
// reset the color after a short delay
setTimeout(() => {
event.target.style.color = "";
}, 500);
},
false,
);
</script>
<ul id="test">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
onmouseover
– El puntero del mouse se mueve sobre el elemento. Controlador de eventos mouseover, que ocurre cuando el cursor del mouse se coloca sobre un elemento. El evento onmouseover ocurre cuando el puntero del mouse ingresa a un elemento. El evento onmouseover se usa a menudo junto con el evento onmouseout, que ocurre cuando el puntero del mouse abandona un elemento. El evento onmouseover es similar al evento onmouseenter. La diferencia es que el evento onmouseenter no aparece (no se propaga hacia arriba en la jerarquía del documento). Evento mouseover Se llama a un elemento cuando se utiliza un dispositivo señalador (como un mouse o trackpad) para mover el cursor sobre el elemento o uno de sus elementos secundarios.
Llama a una función cuando pasas el cursor sobre una imagen:
<img onmouseover="bigImg(this)" src="smiley.gif" alt="Smiley">
De forma predeterminada, el valor HREF de un ancla se muestra en la barra de estado en la parte inferior del navegador cuando el usuario pasa el mouse sobre el ancla. En el siguiente ejemplo, onMouseOver muestra un mensaje especial «Click this if you dare.»
<A HREF="http://home.netscape.com/" onMouseOver="window.status='Click this if you dare!'; return true">Click me</A>
onmouseup
– el botón del ratón se suelta sobre el elemento. Controlador de eventos mouseup, que ocurre cuando se suelta el botón del mouse sobre un elemento. Si onMouseUp regresa false, La promoción se cancela por defecto. Por ejemplo, si onMouseUp devuelve false cuando un hipervínculo está activo, el enlace no se incluye. Entonces si MouseUp ocurre cuando el hipervínculo está inactivo (posiblemente cuando onMouseDown devuelve false), el enlace no está incluido. La activación se desencadena por un evento MouseDown en el enlace. Si el enlace está activo, cambia de color para reflejar el nuevo estado. El evento onmouseup ocurre cuando se suelta el botón del mouse sobre un elemento.
Evento mouseup Se llama a un elemento cuando se suelta un botón de un dispositivo señalador (como un mouse o trackpad) mientras el puntero está dentro de él. Eventos mouseup son lo opuesto a los eventos mousedown.
Orden de eventos para los botones izquierdo y central del mouse:
onmousedown
onmouseup
по клику
Orden de eventos para el botón derecho del mouse:
onmousedown
onmouseup
oncontextmenu
type – Indica el tipo de evento.
target – Indica el objeto al que se envió originalmente el evento.
layerX, layerY, pageX, pageY, screenX, screenY – La ubicación del cursor cuando ocurrió el evento MouseUp.
which – Representa 1 para la tecla izquierda y 3 para la tecla derecha del mouse.
modifiers – Contiene una lista de teclas modificadoras presionadas cuando ocurrió el evento MouseUp.
Llamar a una función cuando se suelta el botón del mouse sobre un párrafo:
<p onmouseup="mouseUp()">Click the text!</p>
onmousewheel (onwheel)
– Se utiliza la rueda del ratón. Controlador de eventos wheel, que ocurre cuando la rueda del mouse se desplaza hacia adelante o hacia atrás en un elemento. El evento onwheel ocurre cuando la rueda del mouse se coloca sobre un elemento. El evento onwheel también ocurre cuando el usuario se desplaza por la página usando el panel táctil. Este evento reemplaza el evento de rueda del mouse obsoleto y no estándar. No confunda el evento rueda con el evento desplazamiento. El evento de la rueda no necesariamente envía un evento de desplazamiento. Por ejemplo, es posible que el elemento no se pueda desplazar en absoluto. Las acciones de zoom que utilizan la rueda o el trackpad también activan eventos de la rueda. El evento de desplazamiento no necesariamente es activado por el evento de rueda. Los elementos también se pueden desplazar usando el teclado, arrastrando la barra de desplazamiento o usando JavaScript.
Ver también... Un nuevo método para observar átomos individuales confirma una teoría mecánica cuántica centenaria |
Incluso si el evento de la rueda activa el desplazamiento, los valores delta* en el evento de la rueda no reflejan necesariamente la dirección en la que se desplaza el contenido. Por lo tanto, no confíe en las propiedades delta* del evento rueda para obtener la dirección de desplazamiento. Detectar cambios de valores en su lugar ScrollLeft y ScrollTop objetivos en evento de desplazamiento.
El evento Wheel se puede cancelar. Si se cancela el evento, no se produce desplazamiento ni zoom. Esto puede causar problemas de rendimiento porque el navegador tiene que esperar a que se procese cada evento de la rueda antes de desplazarse por el contenido. Esto se puede evitar configurándolo en pasivo: true al llamar a addEventListener(), lo que puede hacer que el navegador genere eventos de rueda no cancelables.
Cuando el usuario desplaza la rueda del mouse sobre un div, cambia su tamaño de fuente:
document.getElementById("myDIV").addEventListener("wheel", myFunction);
function myFunction() {
this.style.fontSize = "35px";
}
Este ejemplo muestra cómo escalar un elemento usando la rueda del mouse (u otro dispositivo señalador).
<script>
function zoom(event) {
event.preventDefault();
scale += event.deltaY * -0.01;
// Restrict scale
scale = Math.min(Math.max(0.125, scale), 4);
// Apply scale transform
el.style.transform = `scale(${scale})`;
}
let scale = 1;
const el = document.querySelector("div");
el.onwheel = zoom;
</script>
<style>
body {
min-height: 100vh;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
div {
width: 105px;
height: 105px;
background: #cdf;
padding: 5px;
}
</style>
<div>Scale me with your mouse wheel.</div>
onoffline
– el navegador se ejecuta en modo fuera de línea. Evento onoffline ocurre cuando el navegador se desconecta. Evento onoffline es lo contrario del evento ononline.
Llame a la función cuando el navegador se desconecte:
<body onoffline="myFunction()">
ononline
– el navegador se inicia en modo en línea. Evento ononline ocurre cuando el navegador comienza a funcionar en línea. Evento online es lo contrario del evento onoffline.
Llame a la función cuando el navegador se inicie en línea:
<body ononline="myFunction()">
onpagehide
– el usuario sale de la página. El evento onpagehide ocurre cuando el usuario abandona una página web. Hay varias formas de salir de una página. Por ejemplo. hacer clic en un enlace, actualizar la página, enviar un formulario, cerrar la ventana del navegador, etc. El evento onpagehide a veces se usa en lugar del evento onunload porque el evento onunload hace que la página no se almacene en caché. Para saber si una página se carga directamente desde el servidor o está almacenada en caché, puede utilizar la propiedad persisted objeto PageTransitionEvent. Esta propiedad regresa true, si la página está almacenada en caché por el navegador, y false de lo contrario.
Llamar a una función cuando el usuario abandona la página web:
<body onpagehide="myFunction()">
onpageshow
– el usuario navega a la página. El evento onpageshow ocurre cuando el usuario navega a una página web. El evento onpageshow es similar al onload, excepto que ocurre después del evento onload cuando la página se carga por primera vez. Además, el evento onpageshow ocurre cada vez que se carga la página, mientras que el onload no ocurre al cargar una página desde el caché. Para saber si una página se carga directamente desde el servidor o está almacenada en caché, puede utilizar la propiedad persisted objeto PageTransitionEvent. Esta propiedad regresa true, si la página está almacenada en caché por el navegador, y false de lo contrario
Llamar a una función cuando el usuario navega a una página web:
<body onpageshow="myFunction()">
onpaste
– Se ha insertado contenido. El evento onpaste ocurre cuando el usuario pega algún contenido en un elemento. El evento onpaste se usa con mayor frecuencia para elementos input con type=»text». El evento de pegado de la API del Portapapeles se activa cuando el usuario inicia una acción de «pegar» a través de la interfaz de usuario del navegador. Si el cursor está en un contexto editable (por ejemplo, en textarea o un elemento con el atributo contenteditable establecido en true), entonces la acción predeterminada es pegar el contenido del portapapeles en el documento en la posición del cursor. Un controlador de este evento puede acceder al contenido del portapapeles llamando al método getData() en la propiedad clipboardData del evento. Para anular el comportamiento predeterminado (por ejemplo, pegar datos diferentes o convertir el contenido del portapapeles), el controlador de eventos debe anular la acción predeterminada usando event.preventDefault() y luego insertar manualmente los datos requeridos. Puede crear y enviar un evento de inserción sintético, pero esto no afectará el contenido del documento. Este evento aparece, se puede cancelar y se compone. Se utiliza sólo para campos de entrada.
Llamar a una función cuando se inserta texto en un elemento input:
<input type="text" onpaste="myFunction()" value="Paste something here">
Llame a la función cuando se inserte texto en el elemento p. (Tenga en cuenta que contenteditable está configurado en «true»):
<p contenteditable="true" onpaste="myFunction()">Try to paste something inside this paragraph.</p>
Ejemplo
<script>
const target = document.querySelector("div.target");
target.addEventListener("paste", (event) => {
event.preventDefault();
let paste = (event.clipboardData || window.clipboardData).getData("text");
paste = paste.toUpperCase();
const selection = window.getSelection();
if (!selection.rangeCount) return;
selection.deleteFromDocument();
selection.getRangeAt(0).insertNode(document.createTextNode(paste));
selection.collapseToEnd();
});
<script>
<div class="source" contenteditable="true">Copy text from this box.</div>
<div class="target" contenteditable="true">And paste it into this one.</div>
onpause
– pausar la reproducción. Controlador de eventos pause, que ocurre cuando el usuario o el software pausan la reproducción de audio/vídeo. Evento onpause ocurre cuando el audio/vídeo está en pausa. Evento onpause también ocurre cuando el audio/vídeo ha llegado al final.
Llamar a una función cuando el vídeo haya sido pausado:
<video onpause="myFunction()">
onplay
– iniciar la reproducción. Controlador de eventos play, que ocurre cuando se ha iniciado la reproducción de un archivo de audio/vídeo.
Llame a la función cuando el video comience a reproducirse:
<video onplay="myFunction()">
onplaying
– reproducción de archivos. Controlador de eventos playing, que ocurre cuando ha comenzado la reproducción de un archivo de audio/vídeo. Evento onplaying ocurre cuando comienza la reproducción de audio/vídeo. Evento onplaying También ocurre cuando el audio/vídeo se reanuda después de haber sido pausado o almacenado en el búfer.
Llamar a una función cuando comience el video:
<video onplaying="myFunction()">
onprogress
– obtener metadatos de archivos. Un controlador para el evento de progreso, que ocurre cuando el archivo de audio/vídeo especificado se descarga del servidor. Evento onprogress ocurre cuando el navegador carga audio o vídeo.
Llamar a una función al cargar un vídeo:
<video onprogress="myFunction()">
onratechange
– cambiar la velocidad de reproducción. Controlador de eventos ratechange, que ocurre cuando cambia la velocidad de reproducción de audio/vídeo (por ejemplo, cuando el usuario cambia al modo de reproducción lenta o rápida). Evento onratechange ocurre cuando cambia la velocidad de reproducción multimedia (por ejemplo, cuando el usuario cambia al modo de reproducción lenta o rápida). Este evento lo genera la propiedad playbackRate del objeto Audio/Video, que establece o devuelve la velocidad de reproducción actual del audio/video.
Llame a una función cuando cambie la velocidad de reproducción del video:
<video onratechange="myFunction()">
onreset
– restablecimiento de datos completado. Controlador de eventos reset, que ocurre cuando el formulario se borra cuando se hace clic en el botón Reset. Ejecuta código JavaScript cuando ocurre un evento reset; es decir, cuando el usuario restaura los valores de los elementos del formulario (haciendo clic en el botón Reset).
Llamar a una función cuando se restablece el formulario:
<form onreset="myFunction()"> Enter name: <input type="text"> <input type="reset"> </form>
El siguiente ejemplo genera un objeto Text con valor predeterminado «CA» y botón reset. Si el usuario ingresa una abreviatura de estado en un objeto Text y hace clic en el botón reset, se restablece el valor original «CA». Entrenador de animales onReset el formulario muestra un mensaje indicando que los valores predeterminados han sido restaurados.
<FORM NAME="form1" onReset="alert('Defaults have been restored.')">
State:
<INPUT TYPE="text" NAME="state" VALUE="CA" SIZE="2"><P>
<INPUT TYPE="reset" VALUE="Clear Form" NAME="reset1">
</FORM>
onresize
– cambiar el tamaño de un elemento. Ejecuta código JavaScript cuando ocurre un evento resize; es decir, cuando el usuario o script ha cambiado el tamaño de la ventana o marco. Evento onresize ocurre cuando se ha cambiado el tamaño de la ventana del navegador. Consejo: Para obtener el tamaño de un elemento, utilice las propiedades clientWidth, clientHeight, InnerWidth, InnerHeight, OuterWidth, OuterHeight, OffsetWidth y/o OffsetHeight. Este controlador se envía después de que el HTML haya terminado de renderizarse con los nuevos tamaños de ventana internos. Esto permite colocar elementos y anclajes con nombre para que tengan el tamaño y la ubicación final solicitados, las propiedades SRC de la imagen se pueden restaurar dinámicamente, etc.
Llame a la función cuando se cambia el tamaño de la ventana del navegador:
<body onresize="myFunction()">
Usando el método addEventListener() para adjuntar un evento de «cambio de tamaño» a un objeto de ventana.
window.addEventListener("resize", myFunction);
Aquí la función open_now crea una ventana myWin y captura eventos Resize. El controlador onResize llama a la función alert_me, que muestra un mensaje si el usuario cambia el tamaño de la ventana myWin.
function open_now(){
var myWin;
myWin=window.open("","displayWin","width=400,height=300,resizable=yes,
menubar=no,location=no,alwaysRaised=yes");
var text="<html><head><title>Test</title></head>"
+"<body bgcolor=white><h1>Please resize me</h1></body>"
+"</html>";
myWin.document.write(text);
myWin.captureEvents(Event.RESIZE);
myWin.onresize=alert_me;
}
function alert_me(){
alert("You resized me! \nNow my outer width: " + this.outerWidth +
"\n and my outer height: " +this.outerHeight);
this.focus();
}
onscroll
– Desplazando el contenido del elemento. Evento onscroll Ocurre cuando se desplaza la barra de desplazamiento del elemento. Consejo: utilice la propiedad de estilo de desbordamiento de CSS para crear una barra de desplazamiento para un elemento. El evento de desplazamiento se activa cuando se desplaza el elemento. Para determinar cuándo se ha completado el desplazamiento, observe el evento de desplazamiento del elemento.
Llamar a una función cuando se desplaza un elemento div:
<div onscroll="myFunction()">
Cambie entre nombres de clases en diferentes posiciones de desplazamiento. Cuando el usuario se desplaza hacia abajo 50 píxeles desde la parte superior de la página, el nombre de clase «test» se agrega al elemento (y se elimina cuando se desplaza hacia arriba nuevamente).
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
document.getElementById("myP").className = "test";
} else {
document.getElementById("myP").className = "";
}
}
Inserte un elemento cuando el usuario se haya desplazado hacia abajo 350px (agregue una clase slideUp):
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
document.getElementById("myImg").className = "slideUp";
}
}
El siguiente ejemplo muestra cómo utilizar el evento de desplazamiento para detectar cuando el usuario se desplaza por un elemento:
<script>
const element = document.querySelector("div#scroll-box");
const output = document.querySelector("p#output");
element.addEventListener("scroll", (event) => {
output.textContent = "Scroll event fired!";
setTimeout(() => {
output.textContent = "Waiting on scroll events...";
}, 1000);
});
</script>
<div id="scroll-box" style="overflow: scroll; height: 100px; width: 100px; float: left;">
<p style="height: 200px; width: 200px;">Scroll me!</p>
</div>
<p style="text-align: center;" id="output">Waiting on scroll events...</p>
El siguiente ejemplo muestra cómo utilizar la propiedad del controlador de eventos onscroll para detectar cuando el usuario se desplaza:
<script>
const element = document.querySelector("div#scroll-box");
const output = document.querySelector("p#output");
element.onscroll = (event) => {
output.textContent = "Element scroll event fired!";
setTimeout(() => {
output.textContent = "Waiting on scroll events...";
}, 1000);
};
</script>
<div id="scroll-box" style="overflow: scroll; height: 100px; width: 100px; float: left;">
<p style="height: 200px; width: 200px;">Scroll me!</p>
</div>
<p id="output" style="text-align: center;">Waiting on scroll events...</p>
onsearch
– búsqueda completada. Evento onsearch ocurre cuando el usuario presiona la tecla «ENTER» o el botón «x» en un elemento input con type=»search».
Llamar a una función al enviar una búsqueda:
<input type="search" onsearch="myFunction()">
onseeked
– La búsqueda ha terminado. Controlador de eventos seeked, que ocurre cuando el usuario ha completado el movimiento a una nueva posición de reproducción de audio/vídeo. Evento onseeked ocurre cuando el usuario busca una nueva posición en los medios.
Llame a la función cuando el usuario busque una nueva posición en el vídeo:
<video onseeked="myFunction()">
Este ejemplo demuestra la diferencia entre el evento onseeking y onseeked:
<video onseeking="myFunction()" onseeked="mySecondFunction()">
Usando la propiedad currentTime objeto Video para mostrar la posición actual durante la reproducción cuando el usuario haya terminado de moverse/moverse a una nueva posición:
// Get the video element:
const video = document.getElementById("myVideo");
// Attach a seeked event to the video element:
video.addEventListener("seeked", myFunction);
// Function to display the time position of the playback:
function myFunction() {
document.getElementById("demo").innerHTML = video.currentTime;
}
onseeking
– la búsqueda está activa. Controlador de eventos seeking, que ocurre cuando el usuario comienza a moverse a una nueva posición de reproducción de audio/video. Evento onseeking ocurre cuando el usuario comienza a buscar una nueva posición en los medios.
Llame a la función cuando el usuario comience a moverse o moverse a una nueva posición en el video:
<video onseeking="myFunction()">
onselect
– seleccionando algún texto o valor. Controlador de eventos select, que es cuando el usuario selecciona algún texto dentro de un elemento usando el mouse o el teclado. Evento onselect ocurre después de seleccionar algún texto en un elemento. Evento onselect más utilizado para elementos input type=»text» o textarea.
Aquí onSelect utilizado en el objeto valueField Text para llamar a una función selectState.
<INPUT TYPE="text" VALUE="" NAME="valueField" onSelect="selectState()">
Llamar a una función cuando se selecciona algún texto:
<input type="text" onselect="myFunction()">
Usando el método select() ingrese un objeto de texto HTML DOM para seleccionar algún contenido de campo de texto. Cuando esto sucede, el evento se dispara onselect, que activa la función de alerta.
// Select the contents of a text field
function mySelectFunction() {
document.getElementById("myText").select();
}
// Alert some text when the text in the text field has been selected
function myAlertFunction() {
alert("You selected some text!");
}
onshow
– visualización del artículo. Controlador de eventos show, que ocurre cuando el elemento menu aparece como un menú contextual. Evento onshow ocurre cuando un elemento menu aparece como un menú contextual.
Llame a la función cuando el elemento del menú se muestra como un menú contextual:
<div contextmenu="mymenu">
<p>Right-click inside this box to see the context menu!
<menu type="context" id="mymenu" onshow="myFunction()">
<menuitem label="Refresh" onclick="window.location.reload();"></menuitem>
</menu>
</div>
onstalled
– El navegador no puede recibir datos multimedia por ningún motivo stalled, lo que ocurre cuando el navegador intenta recuperar datos multimedia, pero no están disponibles. Evento onstalled Ocurre cuando el navegador intenta recuperar datos multimedia inaccesibles.
Llame a la función cuando el navegador intente recuperar medios no disponibles:
<video onstalled="myFunction()">
onsubmit
– confirmación del envío de los datos del formulario. Controlador de eventos submit, que ocurre cuando se envía el formulario. Ejecuta código JavaScript cuando ocurre un evento submit; es decir, cuando el usuario envía el formulario al servidor. Se puede utilizar onSubmit para impedir el envío de formularios; para hacer esto, coloque el operador return, regresando false, a este controlador de eventos. Cualquier otro valor permite enviar el formulario. En ausencia de un operador return se enviará el formulario.
Aquí onSubmit llama a una función validate para calcular los datos enviados. Si los datos son correctos se envía el formulario; de lo contrario el formulario no se envía.
<FORM onSubmit="return validate(this)"> ... </FORM>
Llamar a una función cuando se envía un formulario:
<form onsubmit="myFunction()"> Enter name: <input type="text"> <input type="submit"> </form>
onsuspend
– detener la extracción de metadatos. Controlador de eventos suspend, lo que ocurre cuando la recepción de datos de archivos multimedia se detiene antes de que se complete la descarga completa por cualquier motivo. Evento onsuspend Ocurre cuando el navegador no recibe datos multimedia. El evento onsuspend ocurre cuando se impide o suspende una descarga.
Llamar a una función cuando el navegador no recibe datos multimedia:
<video onsuspend="myFunction()">
ontimeupdate
– cambiar la posición (tiempo) de reproducción del archivo, es decir, rebobinar el archivo. Controlador de eventos timeupdate, que ocurre cuando la posición de reproducción de audio/vídeo ha cambiado (por ejemplo, cuando el usuario ha seleccionado un punto de reproducción mucho más alejado del actual). Evento ontimeupdate ocurre cuando cambia el tiempo de reproducción multimedia. Evento ontimeupdate ocurre durante la reproducción multimedia. Evento ontimeupdate Ocurre cuando el usuario mueve la posición de reproducción.
Llamar a la función cuando el tiempo de reproducción ha cambiado:
<video ontimeupdate="myFunction()">
Usando la propiedad currentTime para establecer la posición de reproducción actual en 5 segundos:
document.getElementById("myVideo").currentTime = 5;
ontoggle
– el usuario abre o cierra el elemento details controlador de eventos toggle, que ocurre cuando el usuario abre o cierra un elemento details. Evento ontoggle ocurre cuando el usuario abre o cierra un elemento details. Elemento details especifica información adicional que el usuario puede ver u ocultar si lo solicita.
Llamar a una función cuando se abre o cierra un elemento details:
<details ontoggle="myFunction()">
onunload
– Se completó la descarga, tras lo cual se cerró el documento. Evento onunload ocurre después de que la página se ha descargado (o se ha cerrado la ventana del navegador). onunload ocurre cuando el usuario sale de la página (haciendo clic en un enlace, enviando un formulario, cerrando la ventana del navegador, etc.). Nota. Evento onunload también se activa cuando el usuario recarga la página (y el evento onload). Usar onUnload con etiquetas BODY o FRAMESET, por ejemplo, BODY onUnload=»…». Respecto a marcos y conjunto de marcos – controlador onUnload el marco (colocado en la etiqueta BODY) aparece antes de que aparezca el controlador onUnload conjunto de marcos (colocados en la etiqueta FRAMESET).
Llamar a una función cuando el usuario sube un documento:
<body onunload="myFunction()">
Aquí onUnload llama a una función cleanUp realizar algún procesamiento al finalizar el trabajo, cuando el usuario sale de la página (la cierra):
<BODY onUnload="cleanUp()">
onvolumechange
– Se ha cambiado el volumen. Controlador de eventos volumechange, que ocurre cuando se cambia el valor del volumen del sonido (incluso silenciar completamente el sonido). Evento onvolumechange ocurre cuando cambia el volumen del medio. Evento onvolumechange ocurre cuando el volumen aumenta o disminuye. El evento onvolumechange ocurre cuando el audio está silenciado o activado.
Llamar a una función cuando cambie el volumen del vídeo:
<video onvolumechange="myFunction()">
Usando la propiedad Volume para configurar el volumen:
document.getElementById("myVideo").volume = 0.2;
onwaiting
– esperando a que se reanude la reproducción. Controlador de eventos waiting, que ocurre cuando un archivo multimedia se detiene pero se espera que se reanude (por ejemplo, cuando el archivo se detiene para almacenar en el buffer los datos restantes). Evento onwaiting ocurre cuando los medios deben esperar el siguiente fotograma.
Llame a la función cuando el vídeo esté detenido porque es necesario almacenar en el búfer el siguiente fotograma:
<video onwaiting="myFunction()">
Related Posts
Metadatos HTML con ejemplos y contenido HEAD
La metaetiqueta contiene metadatos sobre el documento HTML. Puede incluir…
Lista completa de atributos HTML globales con ejemplos
Se pueden especificar atributos globales para cualquier elemento HTML, incluso…
Métodos pushState() y replaceState() para agregar y cambiar entradas del historial en combinación con el evento onpopstate
pushState() le permite cambiar la referencia que se utiliza en…
