\u2013 haga clic en un elemento; ocurre cuando se hace clic en el elemento con el bot\u00f3n izquierdo del mouse (en dispositivos con pantallas t\u00e1ctiles ocurre cuando se toca).<\/p>\n
![](\"https:\/\/planeta21vek.ru\/elina732\/wp-content\/uploads\/2024\/11\/sobytiya251124.jpg\")
<\/p>\n
Opciones de grabaci\u00f3n de ventanas emergentes<\/p>\n
\r\n<input value="Haz clic en m\u00ed" onclick="alert('\u00a1Haz clic!')" type="bot\u00f3n">\r\n<a href="#" onclick="alert('Ejemplo 1 funcion\u00f3'); return false;">Ejemplo 1<\/a>\r\n<\/pre>\nSecuencia de n\u00fameros que comienzan con 1<\/p>\n
\r\n<script>\r\n function countRabbits() {\r\n for(let i=1; i<=3; i++) {\r\n alert("numero de conejo " + i);\r\n }\r\n }\r\n<\/script>\r\n<input type="button" onclick="countRabbits()" value="\u00a1Cuenta conejos!">\r\n<input id="elem" type="bot\u00f3n" valor="\u00a1Presioname!">\r\n<gui\u00f3n>\r\n elem.onclick = funci\u00f3n() {\r\n alerta('Gracias');\r\n };\r\n<\/script>\r\n<tipo de entrada="bot\u00f3n" id="bot\u00f3n" valor="Bot\u00f3n">\r\n<script>\r\n button.onclick = function() {\r\n alert('\u041a\u043b\u0438\u043a!');\r\n };\r\n<\/script>\r\n<\/pre>\nMuestra \u00abPresioname\u00bb en una ventana emergente: el contenido del bot\u00f3n<\/p>\n
\r\n<button onclick="alert(this.innerHTML)">Haz clic en m\u00ed<\/button>\r\n<\/pre>\nM\u00faltiples controladores de eventos emergentes<\/p>\n
\r\n<input id="elem" type="bot\u00f3n" valor="Haz clic en m\u00ed"\/>\r\n<script>\r\n function handler1() {\r\n alert('\u0421\u043f\u0430\u0441\u0438\u0431\u043e!');\r\n };\r\n function handler2() {\r\n alert('\u0421\u043f\u0430\u0441\u0438\u0431\u043e \u0435\u0449\u0451 \u0440\u0430\u0437!');\r\n }\r\n elem.onclick = () => alert("Hola");\r\n elem.addEventListener("clic", handler1); \/\/ \u00a1Gracias!\r\n elem.addEventListener("clic", handler2); \/\/ \u00a1Gracias de nuevo!\r\n<\/script>\r\n<\/pre>\nObtener las coordenadas del mouse desde un objeto de evento<\/p>\n
\r\n<tipo de entrada="bot\u00f3n" valor="Presioname" id="elem">\r\n<gui\u00f3n>\r\n elem.onclick = funci\u00f3n (evento) {\r\n \/\/ muestra el tipo de evento, el elemento y las coordenadas de clic\r\n alert(event.type + " \u043d\u0430 " + event.currentTarget);\r\n alert("Coordenadas: " + event.clientX + ":" + event.clientY);\r\n };\r\n<\/script>\r\n<\/pre>\nCambiar el fondo de un objeto<\/p>\n
\r\n<button>Change color<\/button>\r\n<script>\r\nconst btn = document.querySelector("button");\r\nfunction random(number) {\r\n return Math.floor(Math.random() * (number + 1));\r\n}\r\nbtn.onclick = function () {\r\n const rndCol =\r\n "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";\r\n document.body.style.backgroundColor = rndCol;\r\n};\r\n<\/script>\r\n<button onclick="bgChange()">Press me<\/button>\r\n<script>\r\nfunction bgChange() {\r\n const rndCol =\r\n "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";\r\n document.body.style.backgroundColor = rndCol;\r\n}\r\n<\/script>\r\n<\/pre>\nCambiando el fondo de un div<\/p>\n
\r\n<div id='myDiv'>Elemento de cambio de color<\/div>\r\n<button onclick='changeColor()'>Cambiar color<\/button>\r\n<script>\r\nfunction changeColor() {\r\n document.getElementById('myDiv').style.backgroundColor = 'red';\r\n}\r\n<\/script>\r\n<\/pre>\nCambiar color de enlace<\/p>\n
\r\n<script>\r\nfunction ChangeColor(Element) {\r\n\tif (Element.style.color == 'green') Element.style.color = 'red';\r\n\telse Element.style.color = 'green';\r\n\treturn false;\r\n}\r\n<\/script>\r\n<a href="#" style="color: green;" onclick="return ChangeColor(this);">Cambiar color<\/a>\r\n<\/pre>\nValidaci\u00f3n de formulario<\/p>\n
\r\n<formulario>\r\n <div>\r\n <label for="fname">Nombre: <\/label>\r\n <entrada id="fname" tipo="texto" \/>\r\n <\/div>\r\n <div>\r\n <label for="lname">Apellido: <\/label>\r\n <input id="lname" type="text" \/>\r\n <\/div>\r\n <div>\r\n <input id="submit" type="submit" \/>\r\n <\/div>\r\n<\/form>\r\n<p><\/p>\r\n<script>\r\nvar form = document.querySelector("form");\r\nvar fname = document.getElementById("fname");\r\nvar lname = document.getElementById("lname");\r\nvar submit = document.getElementById("submit");\r\nvar para = document.querySelector("p");\r\n\r\nform.onsubmit = function (e) {\r\n if (fname.value === "" || lname.value === "") {\r\n e.preventDefault();\r\n para.textContent = "\u00a1Ambos campos deben ser completados!";\r\n }\r\n};\r\n<\/script>\r\n<\/pre>\nCapture eventos de CSS en video con la funci\u00f3n 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\u00e1s abajo en la cadena<\/p>\n
\r\n<button>Display video<\/button>\r\n<div class="hidden">\r\n <video>\r\n <source src="rabbit320.mp4" type="video\/mp4" \/>\r\n <source src="rabbit320.webm" type="video\/webm" \/>\r\n <p>\r\n Your browser doesn't support HTML5 video. Here is a\r\n <a href="rabbit320.mp4">link to the video<\/a> instead.\r\n <\/p>\r\n <\/video>\r\n<\/div>\r\ndiv { position: absolute;\r\n top: 50%;\r\n transform: translate(-50%,-50%);\r\n ... }\r\n.hidden {\r\n left: -50%;\r\n }\r\n.showing {\r\n left: 50%;\r\n }\r\n<script>\r\nvar videoBox = document.querySelector("div");\r\nvar video = document.querySelector("video");\r\nvideoBox.onclick = function () {\r\n videoBox.setAttribute("class", "hidden");\r\n};\r\nvideo.onclick = function () {\r\n video.play();\r\n};\r\nvideo.onclick = function (e) {\r\n e.stopPropagation();\r\n video.play();\r\n};\r\n<\/script>\r\n<p style="text-align: justify;">Mostrar y ocultar texto<\/p>\r\n<button onclick='toggleVisibility()'>Mostrar\/Ocultar<\/button>\r\n<div id='hiddenDiv' style='display:none'>Texto oculto<\/div>\r\n<script>\r\nfunction toggleVisibility() {\r\n let element = document.getElementById('hiddenDiv');\r\n if (element.style.display === 'none') {\r\n element.style.display = 'block';\r\n } else {\r\n element.style.display = 'none';\r\n }\r\n}\r\n<\/script>\r\n<\/pre>\nCarga de datos v\u00eda AJAX, para cargar datos desde el servidor sin recargar la p\u00e1gina<\/p>\n
\r\nfunci\u00f3n recuperar datos() {\r\n \/\/ Aqu\u00ed est\u00e1 tu c\u00f3digo para la solicitud AJAX\r\n}\r\n<onclick="fetchData()">Cargar datos<\/button>\r\n<\/pre>\nCambiar el nombre del enlace de Activado a Desactivado<\/p>\n
\r\n<gui\u00f3n>\r\n\/\/esperamos a que la p\u00e1gina se cargue por completo\r\nventana.onload = funci\u00f3n() {\r\n\r\n \/\/obtenemos el identificador del elemento\r\n var a = document.getElementById('cambiar');\r\n \r\n \/\/adjuntarle un evento\r\n a.onclick = funci\u00f3n() {\r\n \/\/realiza algunas acciones\r\n if (this.innerHTML=='Activado') this.innerHTML = 'Desactivado';\r\n de lo contrario this.innerHTML = 'Activado';\r\n \/\/evitar hacer clic en el enlace href\r\n return false;\r\n }\r\n}\r\n<\/script>\r\n<a id="switch" href="#">On<\/a>\r\n<\/pre>\nonabort<\/span><\/h2>\n\u2013 interrupci\u00f3n de la reproducci\u00f3n. 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.<\/p>\n
Notificaci\u00f3n de que se ha interrumpido la carga del v\u00eddeo<\/p>\n
\r\n<video id="myVideo" onabort="alert('Carga de video cancelada')">\r\n<\/pre>\nAlerta de que se ha interrumpido la carga de la imagen<\/p>\n
\r\n<img id="myImage" src="example.jpg" onabort="imageAborted()">\r\n<script>\r\n function imageAborted() {\r\n alert("Image load was aborted by the user.");\r\n }\r\n<\/script>\r\n<\/pre>\nNotificaci\u00f3n de que el env\u00edo del formulario ha sido interrumpido<\/p>\n
\r\n<form id="myForm">\r\n <input type="text" placeholder="Enter your name">\r\n <input type="submit" value="Submit">\r\n<\/form>\r\n<script>\r\n var form = document.getElementById("myForm");\r\n form.addEventListener("abort", formAborted);\r\n\r\n function formAborted() {\r\n alert("Form submission was aborted by the user.");\r\n }\r\n<\/script>\r\n<\/pre>\nonafterprint \u2013 impresi\u00f3n terminada<\/span><\/h2>\nEl evento onafterprint ocurre cuando la p\u00e1gina comienza a imprimirse. El evento onafterprint ocurre cuando se cierra el cuadro de di\u00e1logo de impresi\u00f3n. El navegador ejecuta onafterprint y onbeforeprint para que se puedan agregar notas, explicaciones y comentarios al proceso de impresi\u00f3n. Aplicable para body.<\/p>\n
\r\n<body onafterprint="myFunction()">\r\n<\/pre>\nonautocomplete \u2013 Autocompletar formulario completado<\/span><\/h2>\nUn atributo con el que se completa el formulario con un solo clic: el navegador insertar\u00e1 los valores en los campos correspondientes.<\/p>\n
\r\n<form>\r\n <label for="name">Nombre:<\/label>\r\n <input type="text" id="name" name="name" autocomplete="on">\r\n<\/form>\r\n<\/pre>\nonautocompleteerror \u2013 error al autocompletar el formulario<\/span><\/h2>\nonbeforeprint \u2013 preparaci\u00f3n para la impresi\u00f3n<\/span><\/h2>\nonbeforeunload: el documento se ha descargado<\/span><\/h2>\nCuando un usuario abandona la p\u00e1gina, 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\u00e1gina unload. Este evento permite que la p\u00e1gina web active un cuadro de di\u00e1logo de confirmaci\u00f3n preguntando al usuario si realmente desea abandonar la p\u00e1gina. Si el usuario confirma, el navegador navega a una nueva p\u00e1gina, en caso contrario cancela la navegaci\u00f3n. Seg\u00fan la especificaci\u00f3n, para mostrar un cuadro de di\u00e1logo de confirmaci\u00f3n, el controlador de eventos debe llamar a preventDefault() en el evento. Aplicable para body.<\/p>\n
\r\n<body onbeforeunload="return myFunction()">\r\n<script>\r\nfunction myFunction() {\r\n return "\u00bfEst\u00e1s seguro de que quieres cerrar la p\u00e1gina?...";\r\n}\r\n<\/script>\r\n<\/pre>\nonblur \u2013 p\u00e9rdida de concentraci\u00f3n<\/span><\/h2>\nEvento focus llamado en el momento de enfocar, y blur \u2013 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 \u2013 de forma predeterminada no puede recibir el foco. M\u00e9todo elem.focus() no funciona para ellos, y eventos focus\/blur nunca trabajar. Esto se puede cambiar usando el atributo HTML tabindex.<\/p>\n
Validaci\u00f3n (verificaci\u00f3n) de los datos ingresados \u200b\u200bcon una inscripci\u00f3n debajo del formulario<\/p>\n
\r\n<style>\r\n .invalid { border-color: red; }\r\n #error { color: red }\r\n<\/style>\r\n<script>\r\ninput.onblur = function() {\r\n if (!input.value.includes('@')) { \/\/ \u043d\u0435 email\r\n input.classList.add('invalid');\r\n error.innerHTML = 'Por favor ingrese un correo electr\u00f3nico correcto.'\r\n }\r\n};\r\nentrada.onfocus = funci\u00f3n() {\r\n if (this.classList.contains('inv\u00e1lido')) {\r\n \/\/ elimina el indicador de error, porque el usuario quiere volver a ingresar datos\r\n this.classList.remove('invalid');\r\n error.innerHTML = "";\r\n }\r\n};\r\n<\/script>\r\n\u0412\u0430\u0448 email: <input type="email" id="input">\r\n<div id="error"><\/div>\r\n<\/pre>\nValidaci\u00f3n (verificaci\u00f3n) de los datos ingresados \u200b\u200bllenando el formulario con color<\/p>\n
\r\n<style>\r\n .error {\r\n background: red;\r\n }\r\n<\/style>\r\n<script>\r\n input.onblur = function() {\r\n if (!this.value.includes('@')) { \/\/ \u043d\u0435 email\r\n \/\/ mostrar error\r\n this.classList.add("error");\r\n \/\/ ...y devolver el enfoque\r\n input.focus();\r\n } else {\r\n this.classList.remove("error");\r\n }\r\n };\r\n<\/script>\r\n\u0412\u0430\u0448 email: <input type="email" id="input">\r\n<input type="text" style="width:280px" placeholder="ingrese un correo electr\u00f3nico incorrecto y haga clic aqu\u00ed">\r\n<\/pre>\nCambiar el texto del formulario CLICK HERE<\/p>\n
\r\n<input type="text" value="CLICK HERE" \/>\r\n<script>\r\nlet input = document.querySelector("input");\r\ninput.onblur = inputBlur;\r\ninput.onfocus = inputFocus;\r\nfunction inputBlur() {\r\n input.value = "Focus has been lost";\r\n}\r\nfunction inputFocus() {\r\n input.value = "Focus is here";\r\n}\r\n<\/script>\r\n<\/pre>\nComprobando la forma con un contorno de marco<\/p>\n
\r\n<!DOCTYPE html>\r\n<html lang="ru">\r\n <head>\r\n <meta charset="utf-8">\r\n <title>\u0421\u043e\u0431\u044b\u0442\u0438\u0435 onblur<\/title>\r\n <style>\r\n .warning {\r\n background-color: #ffe;\r\n outline: 1px solid #dc143c;\r\n }\r\n <\/style>\r\n <script>\r\n function warning(field) {\r\n if (field.value == '') field.classList.add('warning');\r\n else field.classList.remove('warning');\r\n }\r\n <\/script>\r\n <\/head> \r\n <body>\r\n <form> \r\n <p><input placeholder="Nombre" onblur="advertencia(esta)"><\/p>\r\n <p><input placeholder="Apellido" onblur="advertencia(esto)"><\/p>\r\n <p><input placeholder="Direcci\u00f3n" onblur="advertencia(esta)"><\/p>\r\n <\/formulario>\r\n <\/cuerpo>\r\n<\/html>\r\n<\/pre>\nIluminaci\u00f3n al enfocar sin onblur<\/p>\n
\r\n<style>\r\n*!*input:focus*\/!* {\r\n background: #FA6;\r\n outline: none; \/* quitar marco *\/\r\n}\r\n<\/style>\r\n<input type="text">\r\n<p>El selector de enfoque resaltar\u00e1 un elemento cuando usted lo enfoque y eliminar\u00e1 el borde que el navegador usa para resaltar ese elemento de forma predeterminada.<\/p>\r\n<\/pre>\nMarcador de posici\u00f3n: valor de sugerencia dentro INPUT, que desaparece autom\u00e1ticamente al enfocar y existe hasta que el visitante comienza a ingresar texto, sin onblur<\/p>\n
\r\n<style>\r\n.my*!*::-webkit-input-placeholder*\/!* {\r\n color: red;\r\n font-style: italic;\r\n}\r\n.my*!*::-moz-input-placeholder*\/!* {\r\n color: red;\r\n font-style: italic;\r\n}\r\n.my*!*::-ms-input-placeholder*\/!* {\r\n color: red;\r\n font-style: italic;\r\n}\r\n<\/style>\r\n<input class="my" type="text" placeholder="E-mail">\r\n<\/pre>\noncancel \u2013 cancelar acci\u00f3n<\/span><\/h2>\nCancelar la operaci\u00f3n actual en el dispositivo. Se utiliza para el control de dispositivos as\u00edncronos. Si realiza esta funci\u00f3n antes de iniciar una operaci\u00f3n, la operaci\u00f3n se cancelar\u00e1.<\/p>\n
\r\nDevice.Cancel ();\r\n<\/pre>\noncanplay<\/span><\/h2>\n– puede comenzar a reproducir el archivo multimedia especificado<\/p>\n
El evento oncanplay ocurre cuando el navegador puede comenzar a reproducir el audio\/video especificado (cuando est\u00e1 lo suficientemente almacenado en el buffer para empezar). Durante el proceso de carga de audio\/v\u00eddeo, ocurren los siguientes eventos en este orden: onloadstart, ondurationchange, onloadedmetadata, onloadeddata, onprogress, oncanplay, oncanplaythrough<\/p>\n
Ejecute JavaScript cuando el video est\u00e9 listo para reproducirse:<\/p>\n
\r\n<video oncanplay="myFunction()">\r\n<\/pre>\noncanplaythrough<\/span><\/h2>\n– Puede comenzar a reproducir el archivo multimedia especificado sin tener que detenerlo para almacenarlo en el b\u00fafer. El evento oncanplaythrough ocurre cuando el navegador considera que puede reproducir el medio especificado sin tener que detenerse para almacenar en b\u00fafer.<\/p>\n
Ejecutar JavaScript cuando el v\u00eddeo se pueda reproducir en su totalidad, sin parar:<\/p>\n
\r\n<video oncanplaythrough="myFunction()">\r\n<\/pre>\nonchange \u2013 cambiar valor<\/span><\/h2>\nEl evento onchange ocurre cuando se ha cambiado el valor del elemento. Para botones de opci\u00f3n y casillas de verificaci\u00f3n, 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\u00e9s de que cambia el valor del elemento, mientras que onchange ocurre cuando el elemento pierde el foco despu\u00e9s de que el contenido ha cambiado. Otra diferencia es que el evento onchange tambi\u00e9n 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\u00e1s pistas est\u00e1n habilitadas\/deshabilitadas. Ejecuta c\u00f3digo JavaScript cuando ocurre un evento change; es decir, si el campo Select, Text o Textarea pierde el foco y su valor ha sido cambiado.<\/p>\n
type – Indica el tipo de evento.
\ntarget – Indica el objeto al que se envi\u00f3 originalmente el evento<\/p>\n
Ejecutar JavaScript cuando el usuario cambie la opci\u00f3n seleccionada de un elemento select:<\/p>\n
\r\n<select onchange="myFunction()">\r\n<\/pre>\nAqu\u00ed userName este es un campo de texto. Si el usuario cambia el texto y abandona el campo, el controlador onChange llama a la funci\u00f3n checkValue para confirmar que el valor es v\u00e1lido userName:<\/p>\n
\r\n<INPUT TYPE="text" VALUE="" NAME="userName" onChange="checkValue(this.value)">\r\n<\/pre>\nonclose \u2013 cerrando algo<\/span><\/h2>\nControlador de eventos para eventos de cierre, enviado a la ventana. El evento OnClose ocurre cuando se cierra el cuadro de di\u00e1logo. Puede crear un controlador de eventos para el evento OnClose para realizar acciones espec\u00edficas cuando se cierra el cuadro de di\u00e1logo. Controlador de eventos close, que se invoca en los elementos del di\u00e1logo cuando se cierran, y tambi\u00e9n en los elementos WebSocket cuando se completa la conexi\u00f3n.<\/p>\n
oncontextmenu: abre el men\u00fa contextual<\/span><\/h2>\nEl evento oncontextmenu ocurre cuando el usuario hace clic derecho en un elemento HTML para abrir el men\u00fa contextual. Propiedad del controlador de eventos para el evento de clic derecho dentro de un elemento window. Si no se evita el comportamiento est\u00e1ndar, entonces se activa el men\u00fa contextual del navegador (en IE8 hay un error relacionado con el hecho de que el men\u00fa contextual no se activar\u00e1 si se define un controlador de eventos contextmenu). El evento ocurrir\u00e1 junto con otros eventos right-click y no depende de \u00abcontextmenu\u00bb atributo del elemento.<\/p>\n
Ejecute JavaScript cuando el usuario haga clic derecho en el elemento div con el men\u00fa contextual:<\/p>\n
\r\n<div oncontextmenu="myFunction()" contextmenu="mymenu">\r\n<\/pre>\nEl c\u00f3digo de este ejemplo cambia el comportamiento predeterminado del navegador al desactivar el clic derecho.<\/p>\n
\r\ndocument.oncontextmenu = function () {\r\n \/\/ Usar objeto "document" en lugar de "window" por compatibilidad con IE8.\r\n return false;\r\n};\r\nwindow.addEventListener(\r\n "contextmenu",\r\n function (e) {\r\n \/\/ No es compatible con versiones de IE anteriores a la 9\r\n e.preventDefault();\r\n },\r\n false,\r\n);\r\n<\/pre>\noncopy \u2013 copia completada<\/span><\/h2>\nEl evento oncopy ocurre cuando el usuario copia el contenido de un elemento. El evento oncopy tambi\u00e9n ocurre cuando el usuario copia un elemento, como una imagen creada usando el elemento img. El evento oncopy se utiliza principalmente para elementos \u00abinput\u00bb con type=\u00bbtext\u00bb. Se activa al insertar\/copiar\/eliminar texto. Si cancela la acci\u00f3n del navegador en sus controladores, no se producir\u00e1 la inserci\u00f3n\/copia\/eliminaci\u00f3n. El valor insertado no se puede obtener: en el momento en que se activa el evento, el elemento todav\u00eda tiene el valor anterior y el nuevo no est\u00e1 disponible.<\/p>\n
Ejecutar JavaScript al copiar alg\u00fan texto de elemento input:<\/p>\n
\r\n<input type="text" oncopy="myFunction()" value="Intenta copiar este texto">\r\n<\/pre>\noncuechange – cambiar la etiqueta de un elemento track<\/span><\/h2>\nUn controlador para el evento cuechange, que se activa cuando el elemento TextTrack cambia las marcas de tiempo mostradas actualmente (cue).<\/p>\n
oncut \u2013 el contenido ha sido cortado<\/span><\/h2>\nEl 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 \u00abtrue\u00bb. El evento oncut se utiliza principalmente para elementos input con type=\u00bbtext\u00bb.<\/p>\n
Ejecute JavaScript al recortar texto en un elemento input:<\/p>\n
\r\n<input type="text" oncut="myFunction()" value="Intenta acortar este texto">\r\n<\/pre>\nondblclick \u2013 doble clic en el elemento<\/span><\/h2>\nControlador del evento dblclick, que ocurre cuando se hace doble clic con el bot\u00f3n 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\u00ednculo.<\/p>\n
type – Indica el tipo de evento.
\ntarget – Indica el objeto al que se envi\u00f3 originalmente el evento.
\nlayerX, layerY, pageX, pageY, screenX, screenY – Representa la ubicaci\u00f3n del cursor cuando ocurre el evento.
\nwhich – Representa 1 para un clic izquierdo del mouse y 3 para un clic derecho del mouse.
\nmodifiers – Contiene una lista de teclas modificadoras presionadas cuando ocurri\u00f3 el evento.<\/p>\n
Ejecute JavaScript cuando haga doble clic en un elemento p:<\/p>\n
\r\n<p ondblclick="myFunction()">Haz doble clic en m\u00ed<\/p>\r\n<\/pre>\nAqu\u00ed est\u00e1 el di\u00e1logo alert salida cuando el usuario hace doble clic en el bot\u00f3n:<\/p>\n
\r\n<form>\r\n<INPUT Type="button" Value="Double Click Me!" onDblClick="alert('You just double clicked me!')">\r\n<\/form>\r\n<\/pre>\nondrag – arrastrando un elemento<\/span><\/h2>\nEl evento ondrag ocurre cuando arrastras un elemento o texto seleccionado. Arrastrar y soltar es una caracter\u00edstica muy com\u00fan en HTML5. Esto es cuando \u00abagarras\u00bb un objeto y lo arrastras a otra ubicaci\u00f3n.<\/p>\n
type – Indica el tipo de evento.
\ntarget – Indica el objeto al que se envi\u00f3 originalmente el evento.
\ndata – Devuelve una matriz de cadenas que contienen las URL de los objetos liberados.
\nmodifiers – Contiene una lista de teclas modificadoras presionadas cuando ocurre el evento.
\nscreenX, screenY – Representa la ubicaci\u00f3n del cursor en el momento en que ocurri\u00f3 el evento.<\/p>\n
Ejecutar JavaScript cuando se arrastra el elemento p:<\/p>\n
\r\n<p draggable="true" ondrag="myFunction(event)">\u0422\u0430\u0449\u0438 \u043c\u0435\u043d\u044f!<\/p>\r\n<\/pre>\nondragend – arrastre de elementos completado<\/span><\/h2>\nEl evento ondragend ocurre cuando el usuario ha terminado de arrastrar un elemento o selecci\u00f3n de texto.<\/p>\n
Ejecutar JavaScript cuando el usuario termine de arrastrar el elemento p:<\/p>\n
\r\n<p draggable="true" ondragend="myFunction(event)">\u00a1Arr\u00e1strame!<\/p>\r\n<\/pre>\nondragenter<\/span><\/h2>\n– el elemento se arrastra a una zona objetivo v\u00e1lida. El evento ondragenter ocurre cuando el elemento arrastrado o el texto seleccionado alcanza un objetivo de eliminaci\u00f3n v\u00e1lido. Los eventos ondragenter y ondragleave pueden ayudar al usuario a comprender que el elemento arrastrado est\u00e1 a punto de entrar o salir del destino de colocaci\u00f3n. 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.<\/p>\n
Ejecutar JavaScript cuando el elemento arrastrado llegue al objetivo de arrastre:<\/p>\n
\r\n<div ondragenter="myFunction(event)"><\/div>\r\n<\/pre>\nondragexit<\/span><\/h2>\n\u2013 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.<\/p>\n
ondragleave<\/span><\/h2>\n– El elemento deja un objetivo v\u00e1lido. El evento ondragleave ocurre cuando un elemento arrastrado o una selecci\u00f3n de texto deja un destino de colocaci\u00f3n v\u00e1lido.<\/p>\n
Ejecute JavaScript cuando el elemento arrastrado se aleje del objetivo de arrastre:<\/p>\n
\r\n<div ondragleave="myFunction(event)"><\/div>\r\n<\/pre>\nondragover<\/span><\/h2>\n– el elemento se arrastra a un punto de destino v\u00e1lido. El evento ondragover ocurre cuando un elemento arrastrado o un texto seleccionado se arrastra sobre un destino de colocaci\u00f3n v\u00e1lido. De forma predeterminada, los datos\/elementos no se pueden eliminar de otros elementos. Para permitir la eliminaci\u00f3n, debemos desactivar el procesamiento de elementos de forma predeterminada. Esto se hace llamando al m\u00e9todo event.preventDefault() en el evento ondragover.<\/p>\n
Ejecutar JavaScript cuando se arrastra un elemento sobre el objetivo de arrastre:<\/p>\n
\r\n<div ondragover="myFunction(event)"><\/div>\r\n<\/pre>\nondragstart<\/span><\/h2>\n\u2013 inicio de la operaci\u00f3n de arrastrar y soltar. El evento ondragstart ocurre cuando el usuario comienza a arrastrar un elemento o texto seleccionado.<\/p>\n
Ejecutar JavaScript cuando el usuario comience a arrastrar un elemento p:<\/p>\n
\r\n<p draggable="true" ondragstart="myFunction(event)">\u00a1Arr\u00e1strame!<\/p>\r\n<\/pre>\nondrop<\/span><\/h2>\n\u2013 el elemento arrastrado se suelta. El evento ondrop ocurre cuando el elemento arrastrado o el texto seleccionado se suelta en un destino de colocaci\u00f3n v\u00e1lido.<\/p>\n
Ejecutar JavaScript cuando el elemento arrastrado se elimina del elemento div:<\/p>\n
\r\n<div ondrop="myFunction(event)"><\/div>\r\n<\/pre>\nondurationchange<\/span><\/h2>\n– cambio en la longitud del medio. Evento ondurationchange Ocurre cuando cambia la duraci\u00f3n del audio\/v\u00eddeo. Al cargar audio\/v\u00eddeo, la duraci\u00f3n cambiar\u00e1 de \u00abNaN\u00bb a la duraci\u00f3n real del audio\/v\u00eddeo. Durante el proceso de carga de audio\/v\u00eddeo, ocurren los siguientes eventos en este orden: onloadstart, ondurationchange, onloadedmetadata, onloadeddata, onprogress, oncanplay, oncanplaythrough<\/p>\n
Ejecute JavaScript cuando la duraci\u00f3n del video haya cambiado:<\/p>\n
\r\n<video ondurationchange="myFunction()">\r\n<\/pre>\nonemptied<\/span><\/h2>\n\u2013 De repente, el archivo dej\u00f3 de estar disponible. Controlador de eventos emptied, que ocurre cuando la lista de reproducci\u00f3n actual de un elemento de audio o video est\u00e1 vac\u00eda. La mayor\u00eda de las veces se debe a un fallo de conexi\u00f3n.<\/p>\n
onended<\/span><\/h2>\n\u2013 la reproducci\u00f3n est\u00e1 completa. El evento finalizado ocurre cuando el audio\/v\u00eddeo llega al final. Este evento es \u00fatil para mensajes como \u00abgracias por escuchar\u00bb, \u00abgracias por mirar\u00bb, etc.<\/p>\n
Ejecutar JavaScript cuando finalice el audio:<\/p>\n
\r\n<audio onended="myFunction()">\r\n<\/pre>\nonerror<\/span><\/h2>\n\u2013 ocurri\u00f3 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\u00f3n en el proceso de carga de medios son: onabort, onemptied, onstalled, onsuspend.<\/p>\n
Evento error ocurre solo cuando ocurre un error de sintaxis de JavaScript o un error de tiempo de ejecuci\u00f3n, 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\u00e1 el mensaje del navegador; por lo tanto, onError no interceptar\u00e1 este mensaje. Sin embargo, el evento error se incluir\u00e1 en una URL no v\u00e1lida en la etiqueta IMG o en datos de imagen no v\u00e1lidos.<\/p>\n
window.onerror solo se aplica a errores que ocurren en la ventana que contiene window.onerror, y no a errores en otras ventanas.<\/p>\n
onError puede tener los siguientes valores:
\n– null para suprimir todos los cuadros de di\u00e1logo de error de JavaScript. Estableciendo window.onerror en null \u043esignifica que sus usuarios no ver\u00e1n errores de JavaScript causados \u200b\u200bpor su c\u00f3digo.
\n– El nombre de la funci\u00f3n que maneja los errores (los argumentos son el texto del mensaje, la URL y el n\u00famero de l\u00ednea con el error). Para suprimir el cuadro de di\u00e1logo de error de JavaScript est\u00e1ndar, esta funci\u00f3n debe devolver true. Vea el Ejemplo 3 a continuaci\u00f3n.
\n– Variable o propiedad que contiene null o una referencia v\u00e1lida a la funci\u00f3n.
\nSi est\u00e1 escribiendo una funci\u00f3n de manejo de errores, tiene tres opciones para informar errores:
\n– Realice un seguimiento de los errores, pero permita que se informen a trav\u00e9s de un cuadro de di\u00e1logo JavaScript est\u00e1ndar (use una funci\u00f3n de manejo de errores que devuelva false o no devuelve un valor).
\n– Informe los errores usted mismo y desactive el cuadro de di\u00e1logo est\u00e1ndar (use la funci\u00f3n de manejo de errores que devuelve true).
\n– Desactivar todos los mensajes de error (establecer null en el controlador onError).<\/p>\n
type – Indica el tipo de evento.
\ntarget – Indica el objeto al que se envi\u00f3 originalmente el evento<\/p>\n
Ejecute JavaScript si se produce un error al cargar una imagen:<\/p>\n
\r\n<img src="image.gif" onerror="myFunction()">\r\n<\/pre>\nEjemplo 1: controlador con valor Null. En esta etiqueta c\u00f3digo IMG onError=\u00bbnull\u00bb suprime los mensajes de error si se produce un error al cargar una imagen.<\/p>\n
\r\n<IMG NAME="imageBad1" SRC="corrupt.gif" ALIGN="left" BORDER="2" onError="null">\r\n<\/pre>\nEjemplo 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\u00fasculas, en la etiqueta SCRIPT. El siguiente c\u00f3digo 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.<\/p>\n
\r\n<SCRIPT>\r\nwindow.onerror=null\r\n<\/SCRIPT>\r\n<IMG NAME="imageBad1" SRC="corrupt.gif" ALIGN="left" BORDER="2">\r\n<\/pre>\nSin embargo, si el objeto Image tiene su propio controlador onError especial; este controlador se ejecutar\u00e1 cuando ocurra un error con la imagen. Esto ocurre porque window.onerror=null suprime los mensajes de error de JavaScript, no los controladores onError.<\/p>\n
\r\n<SCRIPT>\r\nwindow.onerror=null\r\nfunction myErrorFunc() {\r\n alert("The image had a nasty error.")\r\n}\r\n<\/SCRIPT>\r\n<IMG NAME="imageBad1" SRC="corrupt.gif" ALIGN="left" BORDER="2" onError="myErrorFunc()">\r\n<\/pre>\nEn el siguiente ejemplo, window.onerror=null suprime todos los mensajes de error. Sin onerror=null el c\u00f3digo causar\u00e1 un error de desbordamiento de pila porque hay recursividad infinita.<\/p>\n
\r\n<SCRIPT>\r\nwindow.onerror = null;\r\nfunction testErrorFunction() {\r\n testErrorFunction();\r\n}\r\n<\/SCRIPT>\r\n<BODY onload="testErrorFunction()">\r\ntest message\r\n<\/BODY>\r\n<\/pre>\nEjemplo 3: funci\u00f3n de manejo de errores. Aqu\u00ed se define la funci\u00f3n myOnError, que detecta errores de JavaScript. Esta funci\u00f3n utiliza tres matrices para almacenar el mensaje, la URL y la cadena ofensiva para cada error. Si el usuario hace clic en el bot\u00f3n Display Error Report, La funci\u00f3n displayErrors abre una ventana y crea un mensaje de error en ella. Tenga en cuenta que esta funci\u00f3n devuelve true para suprimir el cuadro de di\u00e1logo de error est\u00e1ndar de JavaScript.<\/p>\n
\r\n<SCRIPT>\r\nwindow.onerror = myOnError\r\nmsgArray = new Array()\r\nurlArray = new Array()\r\nlnoArray = new Array()\r\nfunction myOnError(msg, url, lno) {\r\n msgArray[msgArray.length]\r\n= msg\r\n urlArray[urlArray.length] = url\r\n lnoArray[lnoArray.length]\r\n= lno\r\n return true\r\n}\r\nfunction displayErrors() {\r\n win2=window.open('','window2','scrollbars=yes')\r\n win2.document.writeln('<B>Error Report<\/B><P>')\r\n for (var i=0; i < msgArray.length; i++) {\r\n win2.document.writeln('<B>Error in file:<\/B> '\r\n+ urlArray[i] + '<BR>')\r\n win2.document.writeln('<B>Line\r\nnumber:<\/B> ' + lnoArray[i] + '<BR>')\r\n win2.document.writeln('<B>Message:<\/B> '\r\n+ msgArray[i] + '<P>')\r\n }\r\n win2.document.close()\r\n}\r\n<\/SCRIPT>\r\n<BODY onload="noSuchFunction()">\r\n<FORM>\r\n<BR><INPUT TYPE="button" VALUE="This button has a syntax error" onClick="alert('unterminated string')">\r\n<P><INPUT TYPE="button" VALUE="Display Error Report" onClick="displayErrors()">\r\n<\/FORM>\r\n<\/pre>\nEste ejemplo dar\u00e1 el resultado:<\/p>\n
\r\nError Report\r\nError in file:\r\nfile:\/\/\/c%7C\/temp\/onerror.html\r\nLine number: 34\r\nMessage: unterminated string literal\r\nError in file: file:\/\/\/c%7C\/temp\/onerror.html\r\nLine number:\r\n34\r\nMessage: missing ) after argument list\r\nError in file: file:\/\/\/c%7C\/temp\/onerror.html\r\nLine number: 30\r\nMessage: noSuchFunction is not defined\r\n<\/pre>\nEjemplo 4: un controlador de eventos llama a una funci\u00f3n. En la etiqueta IMG, el controlador onError llama a la funci\u00f3n badImage cuando ocurren errores al cargar la imagen.<\/p>\n
\r\n<SCRIPT>\r\nfunction badImage(theImage) {\r\n alert('Error: ' + theImage.name + ' did not load properly.')\r\n}\r\n<\/SCRIPT>\r\n<FORM>\r\n<IMG NAME="imageBad2" SRC="orca.gif" ALIGN="left" BORDER="2" onError="badImage(this)">\r\n<\/FORM>\r\n<\/pre>\nonfocus<\/span><\/h2>\n\u2013 establecer el foco en un elemento. Ejecuta c\u00f3digo 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<\/p>\n
Ejecute JavaScript cuando el campo de entrada reciba el foco:<\/p>\n
\r\n<input type="text" onfocus="myFunction()">\r\n<\/pre>\nAqu\u00ed el controlador onFocus se usa en el objeto valueField Textarea para llamar a la funci\u00f3n valueCheck.<\/p>\n
\r\n<INPUT TYPE="textarea" VALUE="" NAME="valueField" onFocus="valueCheck()">\r\n<\/pre>\nonfocusin<\/span><\/h2>\nEl 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<\/p>\n
Ejecute JavaScript cuando un campo de entrada est\u00e9 a punto de recibir el foco:<\/p>\n
\r\n<input type="text" onfocusin="myFunction()">\r\n<\/pre>\nonfocusout<\/span><\/h2>\nEl 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\u00f3n 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<\/p>\n
Ejecute JavaScript cuando un campo de entrada est\u00e9 a punto de perder el foco:<\/p>\n
\r\n<input type="text" onfocusout="myFunction()">\r\n<\/pre>\nonfullscreenchange<\/span><\/h2>\nEl evento fullscreenchange ocurre cuando un elemento se ve en modo de pantalla completa. Utilice el m\u00e9todo element.requestFullscreen() para ver el elemento en modo de pantalla completa. Utilice el m\u00e9todo element.exitFullscreen() para cancelar el modo de pantalla completa. Cada navegador requiere un prefijo espec\u00edfico (ver par\u00e9ntesis): 45.0 (webkit), 11.0 (ms), 47.0 (moz), 5.1 (webkit), 15.0 (webkit)<\/p>\n
Mostrar algo de texto al ver una p\u00e1gina en modo de pantalla completa:<\/p>\n
\r\ndocument.addEventListener("fullscreenchange", function() {\r\n output.innerHTML = "fullscreenchange event fired!";\r\n});\r\n<\/pre>\nUtilice prefijos para c\u00f3digo entre navegadores:<\/p>\n
\r\n\/* Sintaxis est\u00e1ndar *\/\r\ndocument.addEventListener("fullscreenchange", function() {\r\n ...\r\n});\r\n\/* Firefox *\/\r\ndocument.addEventListener("mozfullscreenchange", function() {\r\n ...\r\n});\r\n\/* Chrome, Safari and Opera *\/\r\ndocument.addEventListener("webkitfullscreenchange", function() {\r\n ...\r\n});\r\n\/* IE \/ Edge *\/\r\ndocument.addEventListener("msfullscreenchange", function() {\r\n ...\r\n});\r\n<\/pre>\nonfullscreenerror<\/span><\/h2>\nEl evento fullscreenerror ocurre cuando un elemento no se puede ver en modo de pantalla completa, a pesar de que fue solicitado. Utilice el m\u00e9todo element.requestFullscreen() para ver el elemento en modo de pantalla completa. Utilice el m\u00e9todo element.exitFullscreen() para cancelar el modo de pantalla completa.<\/p>\n
Texto de advertencia si el elemento no se puede ver en modo de pantalla completa:<\/p>\n
\r\ndocument.addEventListener("fullscreenerror", function() {\r\n alert("Fullscreen denied")\r\n});\r\n<\/pre>\nUtilice prefijos para c\u00f3digo entre navegadores:<\/p>\n
\r\n\/* Sintaxis est\u00e1ndar *\/\r\ndocument.addEventListener("fullscreenerror", function() {\r\n ...\r\n});\r\n\/* Firefox *\/\r\ndocument.addEventListener("mozfullscreenerror", function() {\r\n ...\r\n});\r\n\/* Chrome, Safari and Opera *\/\r\ndocument.addEventListener("webkitfullscreenerror", function() {\r\n ...\r\n});\r\n\/* IE \/ Edge *\/\r\ndocument.addEventListener("msfullscreenerror", function() {\r\n ...\r\n});\r\n<\/pre>\nonhashchange<\/span><\/h2>\n– cambiando la encuadernaci\u00f3n de parte de la direcci\u00f3n. Soporte de etiquetas HTML: body. El evento onhashchange ocurre cuando se realizan cambios en la parte de anclaje (comienza con el car\u00e1cter ‘#’) 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\u00eda #part2.
\nPara activar este evento puedes:
\nCambie la parte vinculante configurando la propiedad location.hash o location.href del objeto Location
\nIr a la p\u00e1gina actual con otro marcador (use los botones atr\u00e1s o adelante)
\nHaga clic en el enlace de anclaje del marcador<\/p>\n
Ejecutar JavaScript cuando parte del ancla haya cambiado:<\/p>\n
\r\n<body onhashchange="myFunction()">\r\n<\/pre>\nC\u00f3mo asignar un evento \u00abonhashchange\u00bb a un objeto window:<\/p>\n
\r\nwindow.onhashchange = myFunction;\r\n<\/pre>\noninput<\/span><\/h2>\n\u2013 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\u00e9s de que cambia el valor del elemento, mientras que onchange ocurre cuando el elemento pierde el foco despu\u00e9s de que su contenido ha cambiado. Otra diferencia es que el evento onchange tambi\u00e9n funciona en elementos select. Soporte de etiquetas HTML: input type=\u00bbcolor\u00bb, input type=\u00bbdate\u00bb, input type=\u00bbdatetime\u00bb, input type=\u00bbemail\u00bb, input type=\u00bbmonth\u00bb, input type=\u00bbnumber\u00bb, input type=\u00bbpassword\u00bb, input type=\u00bbrange\u00bb, input type=\u00bbsearch\u00bb, input type=\u00bbtel\u00bb, input type=\u00bbtext\u00bb, input type=\u00bbtime\u00bb, input type=\u00bburl\u00bb, input type=\u00bbweek\u00bb y textarea<\/p>\n
Ejecutar JavaScript cuando el usuario escribe algo en un campo input:<\/p>\n
\r\n<input type="text" oninput="myFunction()">\r\n<\/pre>\nControl deslizante de rango: c\u00f3mo actualizar din\u00e1micamente el valor del control deslizante:<\/p>\n
\r\n<input type="range" oninput="myFunction(this.value)">\r\n<\/pre>\noninvalid<\/span><\/h2>\n\u2013 el art\u00edculo est\u00e1 da\u00f1ado. El evento oninvalid ocurre cuando se env\u00eda el elemento input no es v\u00e1lido. Por ejemplo, un campo de entrada no es v\u00e1lido si el atributo requerido est\u00e1 configurado y el campo est\u00e1 vac\u00edo (el atributo requerido especifica que el campo de entrada debe completarse antes de poder enviar el formulario). Soporte de etiquetas HTML: input<\/p>\n
Advertencia sobre alg\u00fan texto si el campo de entrada no es v\u00e1lido:<\/p>\n
\r\n<input type="text" oninvalid="alert('\u00a1Debes llenar el formulario!');" required>\r\n<\/pre>\nTexto de advertencia si el campo de entrada contiene menos de 6 caracteres:<\/p>\n
\r\n\u0418\u043c\u044f: <input type="text" id="myInput" name="fname" pattern=".{6,}" required>\r\n<script>\r\ndocument.getElementById("myInput").addEventListener("invalid", myFunction);\r\nfunction myFunction() {\r\n alert("Debe contener 6 o m\u00e1s caracteres");\r\n}\r\n<\/script>\r\n<\/pre>\nTexto de advertencia si el campo de entrada contiene un n\u00famero menor que 2 o mayor que 5:<\/p>\n
\r\n\u041d\u043e\u043c\u0435\u0440: <input type="number" id="myInput" name="quantity" min="2" max="5" required>\r\n<script>\r\ndocument.getElementById("myInput").addEventListener("invalid", myFunction);\r\nfunction myFunction() {\r\n alert("Debes elegir un n\u00famero del 2 al 5. Has elegido: " + this.value);\r\n}\r\n<\/script>\r\n<\/pre>\nonkeydown<\/span><\/h2>\n\u2013 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.<\/p>\n
type – Indica el tipo de evento.
\ntarget – Indica el objeto al que se envi\u00f3 originalmente el evento.
\nlayerX, layerY, pageX, pageY, screenX, screenY – Para un evento sobre ventana, representa la ubicaci\u00f3n del cursor en el momento en que ocurri\u00f3 el evento. Para un evento encima de un formulario, representa la posici\u00f3n del elemento del formulario.
\nwhich – ASCII-el valor de la tecla presionada. Para obtener la letra, n\u00famero o car\u00e1cter real de la tecla presionada, use el m\u00e9todo String.fromCharCode. Para establecer esta propiedad cuando se desconoce el valor ASCII, utilice el String.charCodeAt.
\nmodifiers – Contiene una lista de teclas modificadoras presionadas cuando ocurre el evento..<\/p>\n
Ejecutar JavaScript cuando el usuario presiona una tecla:<\/p>\n
\r\n<input type="text" onkeydown="myFunction()">\r\n<\/pre>\nUtilice \u00abonkeydown\u00bb con evento \u00abonkeyup\u00bb:<\/p>\n
\r\n<input type="text" onkeydown="keydownFunction()" onkeyup="keyupFunction()">\r\n<\/pre>\nAqu\u00ed, la funci\u00f3n blockA se utiliza para calcular los caracteres ingresados \u200b\u200bdesde el teclado en el cuadro de texto de entrada de texto. Si el usuario ingresa \u00aba\u00bb o \u00abA\u00bb, la funci\u00f3n devuelve false, y el cuadro de texto no muestra el valor. En esta funci\u00f3n 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\u00edficos:<\/p>\n
\r\n<form name="main">\r\n <input name="textentry"\r\ntype=text size=10 maxlength=10>\r\n<\/form>\r\n<script>\r\nfunction blockA(e) {\r\nvar keyChar = String.fromCharCode(e.which);\r\nif (keyChar == 'A' || keyChar == 'a')\r\nreturn false;\r\n}\r\ndocument.main.textentry.onkeydown = blockA;\r\n<\/script>\r\n<\/pre>\nonkeypress<\/span><\/h2>\n– Se presiona una tecla y luego se suelta. Ejecuta c\u00f3digo 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\u00f3 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\u00e9s 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.<\/p>\n
type – Indica el tipo de evento.
\ntarget – Indica el objeto al que se envi\u00f3 originalmente el evento.
\nlayerX, layerY, pageX, pageY, screenX, screenY – Para un evento, la superposici\u00f3n representa la ubicaci\u00f3n del cursor en el momento en que ocurri\u00f3 el evento. Para un evento de sobreformulario, representa la posici\u00f3n de un elemento de formulario.
\nwhich – ASCII-el valor de la tecla presionada. Para obtener la letra, n\u00famero o car\u00e1cter real de la tecla presionada, use el m\u00e9todo String.fromCharCode. Para establecer esta propiedad cuando se desconoce el valor ASCII, utilice el String.charCodeAt.
\nmodifiers – Contiene una lista de teclas modificadoras presionadas cuando ocurre el evento.<\/p>\n
Ejecutar JavaScript cuando el usuario presiona una tecla:<\/p>\n
\r\n<input type="text" onkeypress="myFunction()">\r\n<\/pre>\nAqu\u00ed, el m\u00e9todo captureEvents captura la entrada del teclado y el controlador onKeyPress llama a la funci\u00f3n blockA para verificar las pulsaciones de teclas. Si se presionan las teclas \u00aba\u00bb o \u00abz\u00bb, la funci\u00f3n desplaza la ventana del Navegador.<\/p>\n
\r\nfunction blockA(e) {\r\nvar keyChar = String.fromCharCode(e.which);\r\nif (keyChar == 'A' || keyChar == 'a')\r\nself.scrollBy(10,10);\r\nelse if(keyChar == 'Z' || keyChar == 'z')\r\nself.scrollBy(-10,-10);\r\nelse return false;\r\n}\r\ndocument.captureEvents(Event.KEYPRESS);\r\ndocument.onkeypress = blockA;\r\n<\/pre>\nonkeyup<\/span><\/h2>\n\u2013 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.<\/p>\n
type – Indica el tipo de evento.
\ntarget – Indica el objeto al que se envi\u00f3 originalmente el evento.
\nlayerX, layerY, pageX, pageY, screenX, screenY – Para un evento, la superposici\u00f3n representa la ubicaci\u00f3n del cursor en el momento en que ocurri\u00f3 el evento. Para un evento de sobreformulario, representa la posici\u00f3n de un elemento de formulario.
\nwhich – ASCII-el valor de la tecla presionada. Para obtener la letra, n\u00famero o car\u00e1cter real de la tecla presionada, use el m\u00e9todo String.fromCharCode. Para establecer esta propiedad cuando se desconoce el valor ASCII, utilice el String.charCodeAt.
\nmodifiers – Contiene una lista de teclas modificadoras presionadas cuando ocurre el evento.<\/p>\n
Ejecute JavaScript cuando el usuario suelte la clave:<\/p>\n
\r\n<input type="text" onkeyup="myFunction()">\r\n<\/pre>\nUtilice \u00abonkeydown\u00bb con evento \u00abonkeyup\u00bb:<\/p>\n
\r\n<input type="text" onkeydown="keydownFunction()" onkeyup="keyupFunction()">\r\n<\/pre>\nGenere la clave real que se emiti\u00f3 dentro del campo de texto:<\/p>\n
\r\n\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0441\u0432\u043e\u0435 \u0438\u043c\u044f: <input type="text" id="fname" onkeyup="myFunction()">\r\n<script>\r\nfunction myFunction() {\r\n var x = document.getElementById("fname").value;\r\n document.getElementById("demo").innerHTML = x;\r\n}\r\n<\/script>\r\n<\/pre>\nAqu\u00ed, el m\u00e9todo captureEvents captura la entrada del teclado y el controlador onKeyUp llama a la funci\u00f3n Key_Up. M\u00e9todo alert la funci\u00f3n abre un cuadro de di\u00e1logo para mostrar el valor de la tecla presionada.:<\/p>\n
\r\nfunction Key_Up(e) {\r\nvar keyChar = String.fromCharCode(e.which);\r\nalert("Hold '" + keyChar +"' again for me, okay?");\r\n}\r\ndocument.onkeyup=Key_Up;\r\ndocument.captureEvents(Event.KEYUP);\r\n<\/pre>\nonload<\/span><\/h2>\n\u2013 art\u00edculo 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\u00e9s de que la p\u00e1gina web haya cargado completamente todo el contenido (incluidas im\u00e1genes, archivos de script, archivos CSS, etc.). El evento onload se puede utilizar para verificar el tipo y la versi\u00f3n del navegador del visitante y cargar la versi\u00f3n apropiada de la p\u00e1gina web seg\u00fan la informaci\u00f3n recibida. El evento onload tambi\u00e9n se puede utilizar para procesar archivos cookie.<\/p>\n
El controlador onLoad se utiliza en la etiqueta BODY o FRAMESET, por ejemplo, BODY onLoad=\u00bb…\u00bb. 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\u00e1genes, el controlador onLoad especifica el script que se ejecutar\u00e1 cuando se genere la image. No confunda la salida de im\u00e1genes con la carga de im\u00e1genes. Puede cargar varias im\u00e1genes 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\u00e1genes se cargan en la memoria.<\/p>\n
Si especifica un controlador onLoad para un objeto Image que genera un GIF en bucle (GIF de varias im\u00e1genes), cada bucle de animaci\u00f3n incluye un controlador onLoad y el controlador se ejecuta una vez para cada bucle. Puede utilizar el controlador onLoad para crear una animaci\u00f3n JavaScript configurando repetidamente la propiedad src de un objeto Image.<\/p>\n
type – Indica el tipo de evento.
\ntarget – Indica el objeto al que se envi\u00f3 originalmente el evento.
\nwidth, 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.<\/p>\n
Ejecute JavaScript inmediatamente despu\u00e9s de cargar la p\u00e1gina:<\/p>\n
\r\n<body onload="myFunction()">\r\n<\/pre>\nEn JavaScript, use el m\u00e9todo addEventListener():<\/p>\n
\r\nobject.addEventListener("load", myScript);\r\n<\/pre>\nMostrar un mensaje cuando se carga la p\u00e1gina. Aqu\u00ed el controlador onLoad imprime un saludo despu\u00e9s de que se haya cargado la p\u00e1gina.<\/p>\n
\r\n<BODY onLoad="window.alert("Welcome to the Brave New World home page!")>\r\n<\/pre>\nMuestra un mensaje al cargar una imagen. Aqu\u00ed 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\u00f3n displayAlert, que muestra un mensaje. Para una imagen creada con una etiqueta IMG, el cuadro de di\u00e1logo alert muestra el nombre de la imagen. Para una imagen creada por el dise\u00f1ador 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\u00f3n y no puede especificar par\u00e1metros para la funci\u00f3n displayAlert.<\/p>\n
\r\n<SCRIPT>\r\nimageA = new Image(50,50)\r\nimageA.onload=displayAlert\r\nimageA.src="cyanball.gif"\r\nfunction displayAlert(theImage) {\r\n if (theImage==null) {\r\n alert('An image loaded')\r\n }\r\n else alert(theImage.name + ' has been loaded.')\r\n}\r\n<\/SCRIPT>\r\n<IMG NAME="imageB" SRC="greenball.gif" ALIGN="top" onLoad=displayAlert(this)><BR>\r\n<\/pre>\nSalida de animaci\u00f3n GIF en bucle. La imagen que se muestra aqu\u00ed es birdie.gif, que es una imagen GIF animada. El controlador onLoad incrementa la variable cycles, que rastrea el n\u00famero de ciclos de animaci\u00f3n. Para ver el valor cycles, el usuario hace clic en el bot\u00f3n Count Loops.<\/p>\n
\r\n<SCRIPT>\r\nvar cycles=0\r\n<\/SCRIPT>\r\n<IMG ALIGN="top" SRC="birdie.gif" BORDER=0 onLoad="++cycles">\r\n<INPUT TYPE="button" VALUE="Count Loops" onClick="alert('The animation has looped ' + cycles + ' times.')">\r\n<\/pre>\nCambia la animaci\u00f3n GIF que se muestra. Este ejemplo utiliza el controlador onLoad para rotar seis animaciones GIF. Cada animaci\u00f3n se muestra como una secuencia de objetos individuales Image. Cuando se carga el documento, se genera !anim0.html. Cuando se completa esta animaci\u00f3n, el controlador onLoad hace que se cargue el siguiente archivo, !anim1.html, en lugar del primer archivo. Una vez completada la \u00faltima animaci\u00f3n, !anim5.html, se muestra nuevamente el primer archivo. Tenga en cuenta que la funci\u00f3n changeAnimation no se llama a s\u00ed misma despu\u00e9s de cambiar la propiedad src de un objeto Image. Esto sucede porque se cambia la propiedad src, el controlador onLoad de la imagen est\u00e1 habilitado y se llama a la funci\u00f3n changeAnimation.<\/p>\n
\r\n<SCRIPT>\r\nvar whichImage=0\r\nvar maxImages=5\r\nfunction changeAnimation(theImage) {\r\n ++whichImage\r\n if (whichImage <= maxImages) {\r\n var imageName="!anim" + whichImage + ".gif"\r\n theImage.src=imageName\r\n } else {\r\n whichImage=-1\r\n return\r\n }\r\n}\r\n<\/SCRIPT>\r\n<IMG NAME="changingAnimation" SRC="!anim0.gif" BORDER=0 ALIGN="top" onLoad="changeAnimation(this)">\r\n<\/pre>\nUtilice el evento onload para el elemento img. Notificaci\u00f3n \u00abImagen cargada\u00bb inmediatamente despu\u00e9s de cargar la imagen:<\/p>\n
\r\n<img src="javascriptw3.gif" onload="loadImage()" width="100" height="132">\r\n<script>\r\nfunction loadImage() {\r\n alert("Image is loaded");\r\n}\r\n<\/script>\r\n<\/pre>\nUtilice el evento onload para procesar archivos cookie:<\/p>\n
\r\n<body onload="checkCookies()">\r\n<script>\r\nfunction checkCookies() {\r\n var text = "";\r\n if (navigator.cookieEnabled == true) {\r\n text = "Cookies incluido.";\r\n } else {\r\n text = "Cookies no incluido.";\r\n }\r\n document.getElementById("demo").innerHTML = text;\r\n}\r\n<\/script>\r\n<\/pre>\nonloadeddata<\/span><\/h2>\n\u2013 datos del archivo cargado. Controlador de eventos loadeddata, lo que ocurre cuando el audio\/v\u00eddeo ya se puede reproducir en la posici\u00f3n actual, pero la carga de datos multimedia contin\u00faa. El evento onloadeddata ocurre cuando se carga el marco multimedia, pero no garantiza que haya suficientes datos disponibles para comenzar la reproducci\u00f3n. El evento onloadeddata ocurre despu\u00e9s de onloadedmetadata y antes oncanplay.<\/p>\n
Al cargar medios, ocurren 7 eventos en el siguiente orden:
\n1. onloadstart
\n2. ondurationchange
\n3. onloadedmetadata
\n4. onloadeddata
\n5. onprogress
\n6. oncanplay
\n7. oncanplaythrough<\/p>\n
Ejecute JavaScript cuando haya datos disponibles para el fotograma actual (por video):<\/p>\n
\r\n<video onloadeddata="myFunction()">\r\n<\/pre>\nEjecute JavaScript cuando haya datos disponibles para el fotograma actual (por audio):<\/p>\n
\r\n<audio onloadeddata="myFunction()">\r\n<\/pre>\nonloadedmetadata<\/span><\/h2>\n\u2013 metadatos del archivo cargado. Controlador de eventos loadedmetadata, que ocurre cuando se han cargado los metadatos (duraci\u00f3n, 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.<\/p>\n
Los metadatos de audio o v\u00eddeo constan de:
\nDuraci\u00f3n
\nDimensiones (v\u00eddeo)
\nPistas<\/p>\n
Ejecute JavaScript al cargar metadatos de video:<\/p>\n
\r\n<video onloadedmetadata="myFunction()">\r\n<\/pre>\nEn JavaScript:<\/p>\n
\r\nobject.onloadedmetadata = function(){myScript};\r\n<\/pre>\nEn JavaScript, use el m\u00e9todo addEventListener():<\/p>\n
\r\nobject.addEventListener("loadedmetadata", myScript);\r\n<\/pre>\nonloadstart<\/span><\/h2>\n\u2013 comience a cargar el elemento. Controlador de eventos loadstart, que ocurre cuando comienza el proceso de descarga de un archivo de audio\/video.<\/p>\n
onmessage<\/span><\/h2>\n– aparece el mensaje. El evento onmessage ocurre cuando se recibe un mensaje a trav\u00e9s de una fuente de evento. El objeto de evento para el evento onmessage admite las siguientes propiedades:
\ndatos: contiene el mensaje real
\norigin \u2014 URL del documento que gener\u00f3 el evento.
\nLastEventId \u2014 ID del \u00faltimo mensaje visto en el flujo de eventos.
\nEventos relacionados:
\nonopen: ocurre cuando una conexi\u00f3n al servidor est\u00e1 abierta.
\nonerror: ocurre cuando ocurre un problema<\/p>\n
Cree un nuevo objeto EventSource y especifique la URL de la p\u00e1gina que env\u00eda las actualizaciones. Cada vez que se recibe una actualizaci\u00f3n, se produce el evento onmessage. Cuando ocurre el evento onmessage, coloque los datos recibidos en un elemento div con id=\u00bbmyDIV\u00bb:<\/p>\n
\r\nvar source = new EventSource("demo_sse.php");\r\nsource.onmessage = function(event) {\r\n document.getElementById("myDIV").innerHTML += event.data + "<br>";\r\n};\r\n<\/pre>\nonmousedown<\/span><\/h2>\n\u2013 se presiona el bot\u00f3n del mouse. Controlador de eventos mousedown, que ocurre cuando se presiona el bot\u00f3n izquierdo del mouse. Diferencia con evento click es eso click es una combinaci\u00f3n de eventos mousedown y mouseup. Ejecuta c\u00f3digo JavaScript cuando ocurre un evento MouseDown; es decir, cuando el usuario presiona una tecla del mouse. Si onMouseDown regresa false, acci\u00f3n predeterminada (entrar en modo drag, entrando en modo selection o activaci\u00f3n de hiperv\u00ednculo) se cancela. La activaci\u00f3n se desencadena por un evento MouseDown en el hiperv\u00ednculo. Si el enlace est\u00e1 activado, cambia de color para indicar el nuevo estado. La acci\u00f3n predeterminada var\u00eda: iniciar arrastre, selecci\u00f3n de texto, desplazamiento o zoom (combinado con presionar la rueda cuando sea compatible)<\/p>\n
El evento onmousedown ocurre cuando el usuario presiona el bot\u00f3n del mouse sobre un elemento HTML. Orden de eventos para los botones izquierdo y central del mouse:
\nonmousedown
\nonmouseup
\n\u043f\u043e \u043a\u043b\u0438\u043a\u0443
\nOrden de eventos para el bot\u00f3n derecho del mouse:
\nonmousedown
\nonmouseup
\noncontextmenu<\/p>\n
type – Indica el tipo de evento.
\ntarget – Indica el objeto al que se envi\u00f3 originalmente el evento.
\nlayerX, layerY, pageX, pageY, screenX, screenY- La ubicaci\u00f3n del cursor cuando ocurri\u00f3 el evento MouseDown.
\nwhich – Representa 1 para un clic izquierdo del mouse y 3 para un clic derecho del mouse.
\nmodifiers – Contiene una lista de teclas modificadoras presionadas cuando ocurri\u00f3 el evento MouseDown.<\/p>\n
Llamar a una funci\u00f3n cuando se presiona el bot\u00f3n del mouse sobre un p\u00e1rrafo:<\/p>\n
\r\n<p onmousedown="myFunction()">Click the text!<\/p>\r\n<\/pre>\nAqu\u00ed el usuario puede mover la imagen en la p\u00e1gina HTML arrastr\u00e1ndola con el mouse. Su c\u00f3digo HTML define la imagen y la posiciona en una capa llamada container1. En el c\u00f3digo JavaScript, los controladores de eventos establecen propiedades de posicionamiento container1 cuando el usuario arrastra una imagen, creando una animaci\u00f3n. El atributo ID del elemento P que contiene la imagen se establece en container1, haciendo container1 Identificador \u00fanico del p\u00e1rrafo y la imagen. La etiqueta STYLE crea una capa para container1 y lo posiciona. El siguiente c\u00f3digo JavaScript define los controladores onMouseDown, onMouseUp y onMouseMove. Usando hojas de estilo\/style sheets, la imagen se define inicialmente y se posiciona as\u00ed:<\/p>\n
\r\n<HEAD>\r\n<STYLE type="text\/css">\r\n #container1 {\r\nposition:absolute; left:200; top:200}\r\n<\/STYLE>\r\n<\/HEAD>\r\n<BODY>\r\n<P ID="container1">\r\n<img src="backgrnd.gif" name="myImage" width=96 height=96>\r\n<\/P>\r\n<\/BODY>\r\n<\/pre>\nEn este c\u00f3digo, el m\u00e9todo 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\u00f3n izquierdo del mouse, se inicia la funci\u00f3n DRAG_begindrag, capturando los eventos MouseMove y decirle a la funci\u00f3n 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\u00f3n DRAG_drag calcula DRAG_dragging para garantizar que el evento MouseMove fue capturado por la funci\u00f3n DRAG_begindrag, luego usa el m\u00e9todo moveBy para posicionar el objeto y asigna valores a las propiedades DRAG_lastX y DRAG_lastY. Cuando el usuario suelta el bot\u00f3n izquierdo del mouse, la funci\u00f3n DRAG_enddrag deja de capturar eventos MouseMove. DRAG_enddrag luego garantiza que no se llame a ninguna otra funci\u00f3n configurando onmousemove en Null y DRAG_dragging – en false.<\/p>\n
\r\n<SCRIPT>\r\ncontainer1.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);\r\ncontainer1.onmousedown=DRAG_begindrag;\r\ncontainer1.onmouseup=DRAG_enddrag;\r\nvar DRAG_lastX, DRAG_lastY, DRAG_dragging;\r\nfunction DRAG_begindrag(e) {\r\nif (e.which == 1) {\r\nwindow.captureEvents(Event.MOUSEMOVE);\r\n window.onmousemove=DRAG_drag;\r\nDRAG_lastX=e.pageX;\r\nDRAG_lastY=e.pageY;\r\nDRAG_dragging=true;\r\nreturn false;\r\n}\r\nelse {\r\n\/*Aqu\u00ed hay algunos trabajos sobre c\u00f3mo manejar los clics derecho del mouse*\/\r\nreturn true;\r\n}\r\n}\r\nfunction DRAG_enddrag(e) {\r\nif (e.which == 1) {\r\nwindow.releaseEvents(Event.MOUSEMOVE);\r\n window.onmousemove=null\r\nDRAG_dragging=false;\r\nreturn false;\r\n}\r\nelse {\r\n\/*Aqu\u00ed hay algunos trabajos sobre c\u00f3mo manejar los clics derecho del mouse*\/\r\nreturn true;\r\n}\r\n}\r\nfunction DRAG_drag(e) {\r\nif (DRAG_dragging) {\r\n\/*Esta funci\u00f3n se llama solo cuando se captura MOUSEMOVE*\/\r\nmoveBy(e.pageX-DRAG_lastX, e.pageY-DRAG_lastY);\r\nDRAG_lastX = e.pageX;\r\nDRAG_lastY = e.pageY;\r\nreturn false;\r\n}\r\nelse {\r\nreturn true;\r\n}\r\n}\r\n<\/SCRIPT>\r\n<\/pre>\nonmouseenter<\/span><\/h2>\n\u2013 El puntero del mouse est\u00e1 sobre un elemento. Controlador de eventos mouseenter, que ocurre cuando el cursor del mouse ingresa al \u00e1rea del elemento. A diferencia de mouseover evento mouseenter no aparece (\u00abno burbujea\u00bb), 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\u00eda del documento).<\/p>\n\n
Un evento mouseenter enviado a cada elemento de la jerarqu\u00eda a medida que ingresan. Aqu\u00ed se env\u00edan 4 eventos a los cuatro elementos de la jerarqu\u00eda cuando el puntero llega al texto. Evento \u00fanico al pasar el mouse mouseover se env\u00eda al elemento m\u00e1s profundo del \u00e1rbol DOM, luego asciende en la jerarqu\u00eda hasta que un controlador lo cancela o llega a la ra\u00edz. Si hay una jerarqu\u00eda profunda, el n\u00famero 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\u00f3n con el evento correspondiente mouseleave (que se activa en el elemento cuando el mouse abandona el \u00e1rea de contenido), evento mouseenter act\u00faa de manera muy similar a una pseudoclase CSS :hover.<\/p>\n
Llama a una funci\u00f3n cuando pasas el cursor sobre una imagen:<\/p>\n
\r\n<img onmouseenter="bigImg(this)" src="smiley.gif" alt="Smiley">\r\n<\/pre>\nJavaScript:<\/p>\n
\r\nobject.onmouseenter = function(){myScript};\r\nJavaScript, using the addEventListener() method:\r\nobject.addEventListener("mouseenter", myScript);\r\n<\/pre>\nEste ejemplo demuestra la diferencia entre los eventos onmousemove, onmouseenter y mouseover:<\/p>\n
\r\n<div onmousemove="myMoveFunction()">\r\n <p id="demo1">I will demonstrate onmousemove!<\/p>\r\n<\/div>\r\n<div onmouseenter="myEnterFunction()">\r\n <p id="demo2">I will demonstrate onmouseenter!<\/p>\r\n<\/div>\r\n<div onmouseover="myOverFunction()">\r\n <p id="demo3">I will demonstrate onmouseover!<\/p>\r\n<\/div>\r\n<\/pre>\nEn 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\u00famero de evento mouseenter o mouseleave.<\/p>\n
\r\n<SCRIPT>\r\nvar enterEventCount = 0;\r\nvar leaveEventCount = 0;\r\nconst mouseTarget = document.getElementById("mouseTarget");\r\nconst unorderedList = document.getElementById("unorderedList");\r\nmouseTarget.addEventListener("mouseenter", (e) => {\r\n mouseTarget.style.border = "5px dotted orange";\r\n enterEventCount++;\r\n addListItem("This is mouseenter event " + enterEventCount + ".");\r\n});\r\nmouseTarget.addEventListener("mouseleave", (e) => {\r\n mouseTarget.style.border = "1px solid #333";\r\n leaveEventCount++;\r\n addListItem("This is mouseleave event " + leaveEventCount + ".");\r\n});\r\nfunction addListItem(text) {\r\n \/\/ Cree un nuevo nodo de texto usando el texto proporcionado\r\n var newTextNode = document.createTextNode(text);\r\n \/\/ Crear un nuevo elemento li\r\n var newListItem = document.createElement("li");\r\n \/\/ Agregar un nodo de texto a un elemento li\r\n newListItem.appendChild(newTextNode);\r\n \/\/ Agregue el elemento de lista reci\u00e9n creado a la lista\r\n unorderedList.appendChild(newListItem);\r\n}\r\n<SCRIPT>\r\n<style>\r\n#mouseTarget {\r\n box-sizing: border-box;\r\n width: 15rem;\r\n border: 1px solid #333;\r\n}\r\n<\/style>\r\n<div id="mouseTarget">\r\n <ul id="unorderedList">\r\n <li>No events yet!<\/li>\r\n <\/ul>\r\n<\/div>\r\n<\/pre>\nonmouseleave<\/span><\/h2>\n\u2013 el puntero del mouse ha abandonado el elemento. Controlador de eventos mouseleave, que ocurre cuando el cursor del mouse sale del \u00e1rea del elemento. A diferencia de mouseout evento mouseenter no aparece (\u00abno burbujea\u00bb), 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\u00eda del documento).<\/p>\n
Un evento mouseleave se activa cuando el cursor de un manipulador (normalmente un rat\u00f3n) se mueve m\u00e1s all\u00e1 de los l\u00edmites 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\u00e1s all\u00e1 de los l\u00edmites de un elemento y todos sus hijos, mientras mouseout se activa cuando el cursor sale de los l\u00edmites de un elemento o uno de sus elementos secundarios (incluso si el cursor todav\u00eda est\u00e1 dentro del elemento).<\/p>\n
Llamar a una funci\u00f3n cuando el puntero del mouse se mueve fuera de la imagen:<\/p>\n
\r\n<img onmouseleave="normalImg(this)" src="smiley.gif" alt="Smiley">\r\n<\/pre>\nJavaScript:<\/p>\n
\r\nobject.onmouseleave = function(){myScript};\r\nJavaScript, using the addEventListener() method:\r\nobject.addEventListener("mouseleave", myScript);\r\n<\/pre>\nEste ejemplo demuestra la diferencia entre los eventos onmousemove, onmouseleave y onmouseout:<\/p>\n
\r\n<div onmousemove="myMoveFunction()">\r\n <p id="demo1">I will demonstrate onmousemove!<\/p>\r\n<\/div>\r\n<div onmouseleave="myLeaveFunction()">\r\n <p id="demo2">I will demonstrate onmouseleave!<\/p>\r\n<\/div>\r\n<div onmouseout="myOutFunction()">\r\n <p id="demo3">I will demonstrate onmouseout!<\/p>\r\n<\/div>\r\n<\/pre>\nEn la documentacion mouseout hay un ejemplo que ilustra la diferencia entre mouseout y mouseleave. El siguiente ejemplo muestra c\u00f3mo utilizar mouseout para simular el principio de delegaci\u00f3n de eventos mouseleave.<\/p>\n
\r\n<ul id="test">\r\n <li>\r\n <ul class="leave-sensitive">\r\n <li>item 1-1<\/li>\r\n <li>item 1-2<\/li>\r\n <\/ul>\r\n <\/li>\r\n <li>\r\n <ul class="leave-sensitive">\r\n <li>item 2-1<\/li>\r\n <li>item 2-2<\/li>\r\n <\/ul>\r\n <\/li>\r\n<\/ul>\r\n<script>\r\n var delegationSelector = ".leave-sensitive";\r\n document.getElementById("test").addEventListener(\r\n "mouseout",\r\n function (event) {\r\n var target = event.target,\r\n related = event.relatedTarget,\r\n match;\r\n \/\/ search for a parent node matching the delegation selector\r\n while (\r\n target &&\r\n target != document &&\r\n !(match = matches(target, delegationSelector))\r\n ) {\r\n target = target.parentNode;\r\n }\r\n\r\n \/\/ exit if no matching node has been found\r\n if (!match) {\r\n return;\r\n }\r\n \/\/ loop through the parent of the related target to make sure that it's not a child of the target\r\n while (related && related != target && related != document) {\r\n related = related.parentNode;\r\n }\r\n \/\/ exit if this is the case\r\n if (related == target) {\r\n return;\r\n }\r\n \/\/ the "delegated mouseleave" handler can now be executed\r\n \/\/ change the color of the text\r\n target.style.color = "orange";\r\n \/\/ reset the color after a small amount of time\r\n setTimeout(function () {\r\n target.style.color = "";\r\n }, 500);\r\n },\r\n false,\r\n );\r\n \/\/ function used to check if a DOM element matches a given selector\r\n \/\/ the following code can be replaced by this IE8 compatible function: https:\/\/gist.github.com\/2851541\r\n function matches(elem, selector) {\r\n \/\/ the matchesSelector is prefixed in most (if not all) browsers\r\n return elem.matchesSelector(selector);\r\n }\r\n<\/script>\r\n<\/pre>\nonmousemove<\/span><\/h2>\n– El puntero del rat\u00f3n se mueve sobre el elemento. Controlador de eventos mousemove, que ocurre cuando el puntero del mouse se mueve sobre un elemento.
\ntype – Indica el tipo de evento.
\ntarget – Indica el objeto al que se envi\u00f3 originalmente el evento.
\nlayerX, layerY, pageX, pageY, screenX, screenY – La ubicaci\u00f3n del cursor cuando ocurri\u00f3 el evento MouseMove.<\/p>\n
JavaScript:<\/p>\n
\r\nobject.onmousemove = function(){myScript};\r\nJavaScript, using the addEventListener() method:\r\nobject.addEventListener("mousemove", myScript);\r\n<\/pre>\nLlama a una funci\u00f3n cuando pasas el cursor sobre un elemento div:<\/p>\n
\r\n<div onmousemove="myFunction()">Move the cursor over me<\/div>\r\n<\/pre>\nEl 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\u00ednea se establece en 1 y el color es siempre negro. Cuando se carga la p\u00e1gina, 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\u00e1gina, se activa el evento mousemove. Si isDrawing tiene un valor true, el controlador de eventos llama a la funci\u00f3n drawLine para dibujar una l\u00ednea desde los valores xey almacenados hasta la ubicaci\u00f3n actual. Cuando regresa la funci\u00f3n drawLine(), ajustamos las coordenadas y luego las almacenamos en las coordenadas xey. Evento mouseup dibuja el \u00faltimo segmento de l\u00ednea, establece xey en 0 y detiene el dibujo estableciendo isDrawing en false.<\/p>\n
\r\n<script>\r\n\/\/ When true, moving the mouse draws on the canvas\r\nlet isDrawing = false;\r\nlet x = 0;\r\nlet y = 0;\r\nconst myPics = document.getElementById("myPics");\r\nconst context = myPics.getContext("2d");\r\n\/\/ event.offsetX, event.offsetY gives the (x,y) offset from the edge of the canvas.\r\n\/\/ Add the event listeners for mousedown, mousemove, and mouseup\r\nmyPics.addEventListener("mousedown", (e) => {\r\n x = e.offsetX;\r\n y = e.offsetY;\r\n isDrawing = true;\r\n});\r\nmyPics.addEventListener("mousemove", (e) => {\r\n if (isDrawing) {\r\n drawLine(context, x, y, e.offsetX, e.offsetY);\r\n x = e.offsetX;\r\n y = e.offsetY;\r\n }\r\n});\r\nwindow.addEventListener("mouseup", (e) => {\r\n if (isDrawing) {\r\n drawLine(context, x, y, e.offsetX, e.offsetY);\r\n x = 0;\r\n y = 0;\r\n isDrawing = false;\r\n }\r\n});\r\nfunction drawLine(context, x1, y1, x2, y2) {\r\n context.beginPath();\r\n context.strokeStyle = "black";\r\n context.lineWidth = 1;\r\n context.moveTo(x1, y1);\r\n context.lineTo(x2, y2);\r\n context.stroke();\r\n context.closePath();\r\n}\r\n<\/script>\r\n<style>\r\ncanvas {\r\n border: 1px solid black;\r\n width: 560px;\r\n height: 360px;\r\n}\r\n<\/style>\r\n<h1>Drawing with mouse events<\/h1>\r\n<canvas id="myPics" width="560" height="360"><\/canvas>\r\n<\/pre>\nonmouseout<\/span><\/h2>\n– el puntero del rat\u00f3n sale del elemento. Controlador de eventos mouseout, que ocurre cuando el puntero del mouse se mueve m\u00e1s all\u00e1 de los l\u00edmites de un elemento. Ejecuta c\u00f3digo JavaScript cuando ocurre un evento MouseOut; es decir, cada vez que el puntero del mouse sale del \u00e1rea (en el mapa de imagen del cliente) o hiperv\u00ednculo. Si el puntero del mouse se mueve de un \u00e1rea del mapa de imagen del cliente a otra, primero recibir\u00e1 onMouseOut para la primera \u00e1rea y luego onMouseOver para la segunda \u00e1rea. Las etiquetas de \u00e1rea 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.<\/p>\n
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\u00eda del documento). <\/p>\n
type – Indica el tipo de evento.
\ntarget – Indica el objeto al que se envi\u00f3 originalmente el evento.
\nlayerX, layerY, pageX, pageY, screenX, screenY – La ubicaci\u00f3n del cursor cuando ocurri\u00f3 el evento MouseOut<\/p>\n
Llamar a una funci\u00f3n cuando el puntero del mouse se mueve fuera de la imagen:<\/p>\n
\r\n<img onmouseout="normalImg(this)" src="smiley.gif" alt="Smiley">\r\n<\/pre>\nEl siguiente ejemplo ilustra la diferencia entre los eventos mouseout y mouseleave. Un evento mouseleave a\u00f1adido a ul, colorear la lista de color p\u00farpura 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\u00e1 que el mouseout se pasa a elementos de lista individuales y mouseleave \u2014 la lista completa, gracias a la jerarqu\u00eda de elementos y al hecho de que los elementos de la lista ocultan el subyacente ul.<\/p>\n
\r\n<script>\r\nconst test = document.getElementById("test");\r\n\/\/ Briefly make the list purple when the mouse moves off the\r\n\/\/ <ul> element\r\ntest.addEventListener(\r\n "mouseleave",\r\n (event) => {\r\n \/\/ highlight the mouseleave target\r\n event.target.style.color = "purple";\r\n\r\n \/\/ reset the color after a short delay\r\n setTimeout(() => {\r\n event.target.style.color = "";\r\n }, 1000);\r\n },\r\n false,\r\n);\r\n\/\/ Briefly make an <li> orange when the mouse moves off of it\r\ntest.addEventListener(\r\n "mouseout",\r\n (event) => {\r\n \/\/ highlight the mouseout target\r\n event.target.style.color = "orange";\r\n\r\n \/\/ reset the color after a short delay\r\n setTimeout(() => {\r\n event.target.style.color = "";\r\n }, 500);\r\n },\r\n false,\r\n);\r\n<\/script>\r\n<ul id="test">\r\n <li>item 1<\/li>\r\n <li>item 2<\/li>\r\n <li>item 3<\/li>\r\n<\/ul>\r\n<\/pre>\nonmouseover<\/span><\/h2>\n– 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\u00eda del documento). Evento mouseover Se llama a un elemento cuando se utiliza un dispositivo se\u00f1alador (como un mouse o trackpad) para mover el cursor sobre el elemento o uno de sus elementos secundarios.<\/p>\n
Llama a una funci\u00f3n cuando pasas el cursor sobre una imagen:<\/p>\n
\r\n<img onmouseover="bigImg(this)" src="smiley.gif" alt="Smiley">\r\n<\/pre>\nDe 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 \u00abClick this if you dare.\u00bb<\/p>\n
\r\n<A HREF="http:\/\/home.netscape.com\/" onMouseOver="window.status='Click this if you dare!'; return true">Click me<\/A>\r\n<\/pre>\nonmouseup<\/span><\/h2>\n– el bot\u00f3n del rat\u00f3n se suelta sobre el elemento. Controlador de eventos mouseup, que ocurre cuando se suelta el bot\u00f3n del mouse sobre un elemento. Si onMouseUp regresa false, La promoci\u00f3n se cancela por defecto. Por ejemplo, si onMouseUp devuelve false cuando un hiperv\u00ednculo est\u00e1 activo, el enlace no se incluye. Entonces si MouseUp ocurre cuando el hiperv\u00ednculo est\u00e1 inactivo (posiblemente cuando onMouseDown devuelve false), el enlace no est\u00e1 incluido. La activaci\u00f3n se desencadena por un evento MouseDown en el enlace. Si el enlace est\u00e1 activo, cambia de color para reflejar el nuevo estado. El evento onmouseup ocurre cuando se suelta el bot\u00f3n del mouse sobre un elemento.<\/p>\n
Evento mouseup Se llama a un elemento cuando se suelta un bot\u00f3n de un dispositivo se\u00f1alador (como un mouse o trackpad) mientras el puntero est\u00e1 dentro de \u00e9l. Eventos mouseup son lo opuesto a los eventos mousedown.<\/p>\n
Orden de eventos para los botones izquierdo y central del mouse:
\nonmousedown
\nonmouseup
\n\u043f\u043e \u043a\u043b\u0438\u043a\u0443
\nOrden de eventos para el bot\u00f3n derecho del mouse:
\nonmousedown
\nonmouseup
\noncontextmenu<\/p>\n
type – Indica el tipo de evento.
\ntarget – Indica el objeto al que se envi\u00f3 originalmente el evento.
\nlayerX, layerY, pageX, pageY, screenX, screenY – La ubicaci\u00f3n del cursor cuando ocurri\u00f3 el evento MouseUp.
\nwhich – Representa 1 para la tecla izquierda y 3 para la tecla derecha del mouse.
\nmodifiers – Contiene una lista de teclas modificadoras presionadas cuando ocurri\u00f3 el evento MouseUp.<\/p>\n
Llamar a una funci\u00f3n cuando se suelta el bot\u00f3n del mouse sobre un p\u00e1rrafo:<\/p>\n
\r\n<p onmouseup="mouseUp()">Click the text!<\/p>\r\n<\/pre>\nonmousewheel (onwheel)<\/span><\/h2>\n\u2013 Se utiliza la rueda del rat\u00f3n. Controlador de eventos wheel, que ocurre cuando la rueda del mouse se desplaza hacia adelante o hacia atr\u00e1s en un elemento. El evento onwheel ocurre cuando la rueda del mouse se coloca sobre un elemento. El evento onwheel tambi\u00e9n ocurre cuando el usuario se desplaza por la p\u00e1gina usando el panel t\u00e1ctil. Este evento reemplaza el evento de rueda del mouse obsoleto y no est\u00e1ndar. No confunda el evento rueda con el evento desplazamiento. El evento de la rueda no necesariamente env\u00eda 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\u00e9n activan eventos de la rueda. El evento de desplazamiento no necesariamente es activado por el evento de rueda. Los elementos tambi\u00e9n se pueden desplazar usando el teclado, arrastrando la barra de desplazamiento o usando JavaScript.<\/p>\n\n
Incluso si el evento de la rueda activa el desplazamiento, los valores delta* en el evento de la rueda no reflejan necesariamente la direcci\u00f3n en la que se desplaza el contenido. Por lo tanto, no conf\u00ede en las propiedades delta* del evento rueda para obtener la direcci\u00f3n de desplazamiento. Detectar cambios de valores en su lugar ScrollLeft y ScrollTop objetivos en evento de desplazamiento.<\/p>\n
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\u00e1ndolo en pasivo: true al llamar a addEventListener(), lo que puede hacer que el navegador genere eventos de rueda no cancelables.<\/p>\n
Cuando el usuario desplaza la rueda del mouse sobre un div, cambia su tama\u00f1o de fuente:<\/p>\n
\r\ndocument.getElementById("myDIV").addEventListener("wheel", myFunction);\r\nfunction myFunction() {\r\n this.style.fontSize = "35px";\r\n}\r\n<\/pre>\nEste ejemplo muestra c\u00f3mo escalar un elemento usando la rueda del mouse (u otro dispositivo se\u00f1alador).<\/p>\n
\r\n<script>\r\nfunction zoom(event) {\r\n event.preventDefault();\r\n scale += event.deltaY * -0.01;\r\n \/\/ Restrict scale\r\n scale = Math.min(Math.max(0.125, scale), 4);\r\n\r\n \/\/ Apply scale transform\r\n el.style.transform = `scale(${scale})`;\r\n}\r\nlet scale = 1;\r\nconst el = document.querySelector("div");\r\nel.onwheel = zoom;\r\n<\/script>\r\n<style>\r\nbody {\r\n min-height: 100vh;\r\n margin: 0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\ndiv {\r\n width: 105px;\r\n height: 105px;\r\n background: #cdf;\r\n padding: 5px;\r\n}\r\n<\/style>\r\n<div>Scale me with your mouse wheel.<\/div>\r\n<\/pre>\nonoffline<\/span><\/h2>\n\u2013 el navegador se ejecuta en modo fuera de l\u00ednea. Evento onoffline ocurre cuando el navegador se desconecta. Evento onoffline es lo contrario del evento ononline.<\/p>\n
Llame a la funci\u00f3n cuando el navegador se desconecte:<\/p>\n
\r\n<body onoffline="myFunction()">\r\n<\/pre>\nononline<\/span><\/h2>\n\u2013 el navegador se inicia en modo en l\u00ednea. Evento ononline ocurre cuando el navegador comienza a funcionar en l\u00ednea. Evento online es lo contrario del evento onoffline.<\/p>\n
Llame a la funci\u00f3n cuando el navegador se inicie en l\u00ednea:<\/p>\n
\r\n<body ononline="myFunction()">\r\n<\/pre>\nonpagehide<\/span><\/h2>\n– el usuario sale de la p\u00e1gina. El evento onpagehide ocurre cuando el usuario abandona una p\u00e1gina web. Hay varias formas de salir de una p\u00e1gina. Por ejemplo. hacer clic en un enlace, actualizar la p\u00e1gina, 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\u00e1gina no se almacene en cach\u00e9. Para saber si una p\u00e1gina se carga directamente desde el servidor o est\u00e1 almacenada en cach\u00e9, puede utilizar la propiedad persisted objeto PageTransitionEvent. Esta propiedad regresa true, si la p\u00e1gina est\u00e1 almacenada en cach\u00e9 por el navegador, y false de lo contrario.<\/p>\n
Llamar a una funci\u00f3n cuando el usuario abandona la p\u00e1gina web:<\/p>\n
\r\n<body onpagehide="myFunction()">\r\n<\/pre>\nonpageshow<\/span><\/h2>\n– el usuario navega a la p\u00e1gina. El evento onpageshow ocurre cuando el usuario navega a una p\u00e1gina web. El evento onpageshow es similar al onload, excepto que ocurre despu\u00e9s del evento onload cuando la p\u00e1gina se carga por primera vez. Adem\u00e1s, el evento onpageshow ocurre cada vez que se carga la p\u00e1gina, mientras que el onload no ocurre al cargar una p\u00e1gina desde el cach\u00e9. Para saber si una p\u00e1gina se carga directamente desde el servidor o est\u00e1 almacenada en cach\u00e9, puede utilizar la propiedad persisted objeto PageTransitionEvent. Esta propiedad regresa true, si la p\u00e1gina est\u00e1 almacenada en cach\u00e9 por el navegador, y false de lo contrario<\/p>\n
Llamar a una funci\u00f3n cuando el usuario navega a una p\u00e1gina web:<\/p>\n
\r\n<body onpageshow="myFunction()">\r\n<\/pre>\nonpaste<\/span><\/h2>\n\u2013 Se ha insertado contenido. El evento onpaste ocurre cuando el usuario pega alg\u00fan contenido en un elemento. El evento onpaste se usa con mayor frecuencia para elementos input con type=\u00bbtext\u00bb. El evento de pegado de la API del Portapapeles se activa cuando el usuario inicia una acci\u00f3n de \u00abpegar\u00bb a trav\u00e9s de la interfaz de usuario del navegador. Si el cursor est\u00e1 en un contexto editable (por ejemplo, en textarea o un elemento con el atributo contenteditable establecido en true), entonces la acci\u00f3n predeterminada es pegar el contenido del portapapeles en el documento en la posici\u00f3n del cursor. Un controlador de este evento puede acceder al contenido del portapapeles llamando al m\u00e9todo 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\u00f3n predeterminada usando event.preventDefault() y luego insertar manualmente los datos requeridos. Puede crear y enviar un evento de inserci\u00f3n sint\u00e9tico, pero esto no afectar\u00e1 el contenido del documento. Este evento aparece, se puede cancelar y se compone. Se utiliza s\u00f3lo para campos de entrada.<\/p>\n
Llamar a una funci\u00f3n cuando se inserta texto en un elemento input:<\/p>\n
\r\n<input type="text" onpaste="myFunction()" value="Paste something here">\r\n<\/pre>\nLlame a la funci\u00f3n cuando se inserte texto en el elemento p. (Tenga en cuenta que contenteditable est\u00e1 configurado en \u00abtrue\u00bb):<\/p>\n
\r\n<p contenteditable="true" onpaste="myFunction()">Try to paste something inside this paragraph.<\/p>\r\n<\/pre>\nEjemplo<\/p>\n
\r\n<script>\r\nconst target = document.querySelector("div.target");\r\ntarget.addEventListener("paste", (event) => {\r\n event.preventDefault();\r\n let paste = (event.clipboardData || window.clipboardData).getData("text");\r\n paste = paste.toUpperCase();\r\n const selection = window.getSelection();\r\n if (!selection.rangeCount) return;\r\n selection.deleteFromDocument();\r\n selection.getRangeAt(0).insertNode(document.createTextNode(paste));\r\n selection.collapseToEnd();\r\n});\r\n<script>\r\n<div class="source" contenteditable="true">Copy text from this box.<\/div>\r\n<div class="target" contenteditable="true">And paste it into this one.<\/div>\r\n<\/pre>\nonpause<\/span><\/h2>\n\u2013 pausar la reproducci\u00f3n. Controlador de eventos pause, que ocurre cuando el usuario o el software pausan la reproducci\u00f3n de audio\/v\u00eddeo. Evento onpause ocurre cuando el audio\/v\u00eddeo est\u00e1 en pausa. Evento onpause tambi\u00e9n ocurre cuando el audio\/v\u00eddeo ha llegado al final.<\/p>\n
Llamar a una funci\u00f3n cuando el v\u00eddeo haya sido pausado:<\/p>\n
\r\n<video onpause="myFunction()">\r\n<\/pre>\nonplay<\/span><\/h2>\n\u2013 iniciar la reproducci\u00f3n. Controlador de eventos play, que ocurre cuando se ha iniciado la reproducci\u00f3n de un archivo de audio\/v\u00eddeo.<\/p>\n
Llame a la funci\u00f3n cuando el video comience a reproducirse:<\/p>\n
\r\n<video onplay="myFunction()">\r\n<\/pre>\nonplaying<\/span><\/h2>\n\u2013 reproducci\u00f3n de archivos. Controlador de eventos playing, que ocurre cuando ha comenzado la reproducci\u00f3n de un archivo de audio\/v\u00eddeo. Evento onplaying ocurre cuando comienza la reproducci\u00f3n de audio\/v\u00eddeo. Evento onplaying Tambi\u00e9n ocurre cuando el audio\/v\u00eddeo se reanuda despu\u00e9s de haber sido pausado o almacenado en el b\u00fafer.<\/p>\n
Llamar a una funci\u00f3n cuando comience el video:<\/p>\n
\r\n<video onplaying="myFunction()">\r\n<\/pre>\nonprogress<\/span><\/h2>\n\u2013 obtener metadatos de archivos. Un controlador para el evento de progreso, que ocurre cuando el archivo de audio\/v\u00eddeo especificado se descarga del servidor. Evento onprogress ocurre cuando el navegador carga audio o v\u00eddeo.<\/p>\n
Llamar a una funci\u00f3n al cargar un v\u00eddeo:<\/p>\n
\r\n<video onprogress="myFunction()">\r\n<\/pre>\nonratechange<\/span><\/h2>\n– cambiar la velocidad de reproducci\u00f3n. Controlador de eventos ratechange, que ocurre cuando cambia la velocidad de reproducci\u00f3n de audio\/v\u00eddeo (por ejemplo, cuando el usuario cambia al modo de reproducci\u00f3n lenta o r\u00e1pida). Evento onratechange ocurre cuando cambia la velocidad de reproducci\u00f3n multimedia (por ejemplo, cuando el usuario cambia al modo de reproducci\u00f3n lenta o r\u00e1pida). Este evento lo genera la propiedad playbackRate del objeto Audio\/Video, que establece o devuelve la velocidad de reproducci\u00f3n actual del audio\/video.<\/p>\n
Llame a una funci\u00f3n cuando cambie la velocidad de reproducci\u00f3n del video:<\/p>\n
\r\n<video onratechange="myFunction()">\r\n<\/pre>\nonreset<\/span><\/h2>\n\u2013 restablecimiento de datos completado. Controlador de eventos reset, que ocurre cuando el formulario se borra cuando se hace clic en el bot\u00f3n Reset. Ejecuta c\u00f3digo JavaScript cuando ocurre un evento reset; es decir, cuando el usuario restaura los valores de los elementos del formulario (haciendo clic en el bot\u00f3n Reset).<\/p>\n
Llamar a una funci\u00f3n cuando se restablece el formulario:<\/p>\n
\r\n<form onreset="myFunction()">\r\n Enter name: <input type="text">\r\n <input type="reset">\r\n<\/form>\r\n<\/pre>\n