Atributos de eventos HTML - Los 5 principales atributos de eventos HTML con ejemplos

• Introducción a los atributos de eventos HTML
• 

Windows onafterprint Event

Windows onafterprint Event
This attribute works in IE and Mozilla

function myfun() (
alert("Document is being printed");
)


• 

body (
color: #9370DB;
background-color: #BC8F8F;
text-align: center;
padding: 20px;
)
p (
font-size: 2rem;
)

Attribute Demo

• 
Welcometo educba tutorial

• 

Form onblur
body (
text-align:center;
)
h1 (
color:pink;
)

EDUCBA
onblur="myfunc()">
Submit
function myfunc() (
var a = document.getElementById("aaa");
a.value = a.value.toUpperCase();
)


• 

HTML oninput

body (
text-align:center;
)
h1 (
color:red;
)

Event Attribute
Enter the text:

function myon()
(
var x = document.getElementById("EDUCBA").value;
document.getElementById("sid").innerHTML = "Enter the text : " +x;
)


• 

onselect demo
h1 (
color:magenta;
)
body (
text-align:center;
)

function eduhtml() (
alert("text highlighted!");
)

EDUCBA Online tutorial
Text Box:


• 

HTML onclick Event

• 

body (
color: "#ff0000";
height: 120vh;
background-color: #610000;
text-align: center;
)
.polygon (
float: right;
shape-inside: polygon(0 0, 0 200px, 100px 200px);
clip-path: polygon(0 0, 0 250px, 100px 300px);
height: 200px;
width: 200px;
background: linear-gradient(to bottom left, #7CFC00, #8B008B);
)
p (
margin: 30px auto;
)

HTML onmouseup Demo

• 

Example demonstrating Onmouseover.
Mouse over
function A() (
document.getElementById("sample").style.color = "yellow";)
function B() (
document.getElementById("sample").style.color = "green";
)


• 

#b1, #b2 (
float:left;padding:11px;margin:11px; -moz-user-select:none;
)
#b1 ( background-color: #FF6699; width:65px; height:85px; )
#b2 ( background-color: #808000; width:180px; height:180px; )

function dStart(e) (
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData("Text", e.target.getAttribute('id'));
e.dataTransfer.setDragImage(e.target, 0, 0);
return true;
)


Drag demo
Drag the box.
ondragstart = "return dStart(e)">
Drag it
welcome


• 

#b1, #b2 (
float:left;padding:11px;margin:11px; -moz-user-select:none;
)
#b1 ( background-color: #FF6699; width:65px; height:85px; )
#b2 ( background-color: #808000; width:180px; height:180px; )

function dStart(e) (
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData("Text", e.target.getAttribute('id'));
e.dataTransfer.setDragImage(e.target, 0, 0);
return true;
)


Drag dropdemo
drop the box.
ondragstart = "return dStart(e)">
Drag it
ondrop="drop(event)"
ondragover="allowDrop(event)">
welcome
dropzone



Introducción a los atributos de eventos HTML

En este artículo, discutiremos en detalle sobre los atributos de eventos HTML. Los eventos son las acciones que se realizan como resultado de la acción del usuario. Por ejemplo, cuando un usuario presiona una tecla en un teclado para leer los datos, se dice que son eventos de teclado. Estas actividades se realizan cuando un usuario busca en un sitio web y hace clic en un botón o cuando se carga una página al presionar el botón de actualización donde el navegador manipula las páginas, todas estas acciones se consideran un evento. Aquí veremos una comprensión básica de los eventos y cómo funciona en el navegador en las acciones del usuario. Hay un tipo diferente de eventos que ocurren en todas las ventanas del navegador que se explican en las siguientes secciones.

Los 5 principales atributos de eventos HTML

Hay una variante diferente de eventos disponibles en el HTML. Y todos estos eventos tienen un pequeño bloque de código denominado controlador de eventos que se activa cuando se realiza la acción del evento. Estos se adjuntan a los elementos HTML. Los controladores de eventos u oyentes de eventos juegan un papel importante en los atributos de eventos HTML. Veamos diferentes tipos de atributos de eventos que se declaran y aplican globalmente a elementos HTML y también su trabajo en detalle. Se utilizan principalmente cuatro atributos de eventos principales. Son:

1. Evento de ventana
2. Eventos de formulario
3. Eventos de mouse
4. Eventos de teclado
5. Arrastrar y soltar eventos

Describiremos todos estos atributos uno por uno con un ejemplo. Primero, iremos con.

1. Evento de ventana

• onafterprintEvent: este atributo es compatible con todas las etiquetas Html y funciona cuando una página comienza a imprimirse y tiene un script de valor único. Aquí viene un ejemplo de código HTML. Este ejemplo muestra que cuando se presiona un botón, imprime un mensaje que se imprime en un mensaje de diálogo.

Código:



Windows onafterprint Event

Windows onafterprint Event
This attribute works in IE and Mozilla

function myfun() (
alert("Document is being printed");
)





Windows onafterprint Event

Windows onafterprint Event
This attribute works in IE and Mozilla

function myfun() (
alert("Document is being printed");
)





Windows onafterprint Event

Windows onafterprint Event
This attribute works in IE and Mozilla

function myfun() (
alert("Document is being printed");
)





Windows onafterprint Event

Windows onafterprint Event
This attribute works in IE and Mozilla

function myfun() (
alert("Document is being printed");
)





Windows onafterprint Event

Windows onafterprint Event
This attribute works in IE and Mozilla

function myfun() (
alert("Document is being printed");
)



Salida:

• onbeforeprint: funciona antes de imprimir. El evento se dispara después del proceso de impresión. A continuación se muestra el código de ejemplo.

Código:



body (
color: #9370DB;
background-color: #BC8F8F;
text-align: center;
padding: 20px;
)
p (
font-size: 2rem;
)

Attribute Demo




body (
color: #9370DB;
background-color: #BC8F8F;
text-align: center;
padding: 20px;
)
p (
font-size: 2rem;
)

Attribute Demo




body (
color: #9370DB;
background-color: #BC8F8F;
text-align: center;
padding: 20px;
)
p (
font-size: 2rem;
)

Attribute Demo


disparador para imprimir.

función get () (
document.body.style.background = "# 00BFFF";
)

Salida:

• onerror: esta función se activa cuando se produce un error mientras no existe ningún elemento.

Código:






Hola Mundo.

función myFun () (
alerta ("problema con la carga de la imagen");
)

Salida:

• onload: esta función ayuda a cargar un objeto y funciona bien para ver si una página web está cargada correctamente.

Código:



onload event demo


function ldImg() (
alert("image loaded without error");
)



Salida:

• onresize: este evento se activa cuando la ventana del navegador cambia de tamaño y cualquier elemento puede activarse bajo el atributo de cambio de tamaño.

Código:


onresize event

function cmg() (
alert('welcome to educba');
)
window.onresize = cmg;

onclick="alert(window.onresize);">


Salida:

• onunload: este evento se desencadena cuando se cierra una ventana de página web o cuando un usuario abandona la página web. El siguiente código descarga la página cuando un usuario se va y lanza una alerta gracias por buscar. Este evento funciona a veces en todos los navegadores.

Código:


Welcometo educba tutorial



Welcometo educba tutorial



Welcometo educba tutorial


Sal de la página.

función onfunc () (
alerta ("¡Gracias por buscar!");
)

Salida:

2. Eventos de formulario

Funciona con controles de formulario. Los siguientes son los atributos que ocurren cuando el usuario interactúa con los navegadores.

• onblur: este evento ocurre cuando la atención del usuario está lejos de la ventana del formulario. El siguiente ejemplo toma la entrada en minúscula y cuando se hace clic en el botón Enviar, convierte la salida en mayúscula.

Código:



Form onblur
body (
text-align:center;
)
h1 (
color:pink;
)

EDUCBA
onblur="myfunc()">
Submit
function myfunc() (
var a = document.getElementById("aaa");
a.value = a.value.toUpperCase();
)





Form onblur
body (
text-align:center;
)
h1 (
color:pink;
)

EDUCBA
onblur="myfunc()">
Submit
function myfunc() (
var a = document.getElementById("aaa");
a.value = a.value.toUpperCase();
)





Form onblur
body (
text-align:center;
)
h1 (
color:pink;
)

EDUCBA
onblur="myfunc()">
Submit
function myfunc() (
var a = document.getElementById("aaa");
a.value = a.value.toUpperCase();
)



Salida:

• onchange: este evento ocurre cuando un usuario cambia el elemento existente en el formulario. Sucede cuando un elemento pierde el foco.

Código:



HTML onchange


select the dress color
pink
Yellow
White


Nota: seleccione cualquier opción

Descríbete en resumen:

Enviar

Salida:

• onfocus: este atributo se habilita cuando el usuario presta atención al elemento en una página web o cuando la entrada está enfocada. El siguiente ejemplo se destaca cuando ingresamos una entrada en el campo.

Código:





Este evento se activa cuando se enfoca un elemento.

Nombre:
Ubicación:
función onfoc (a) (
document.getElementById (a) .style.background = "rosa";
)

Salida:

• oninput: este evento se dispara cuando la entrada se ingresa en el campo de entrada. Se activa cuando se cambia el valor en el campo de texto. Se refleja una vez que se cambia el valor del elemento.



HTML oninput

body (
text-align:center;
)
h1 (
color:red;
)

Event Attribute
Enter the text:

function myon()
(
var x = document.getElementById("EDUCBA").value;
document.getElementById("sid").innerHTML = "Enter the text : " +x;
)





HTML oninput

body (
text-align:center;
)
h1 (
color:red;
)

Event Attribute
Enter the text:

function myon()
(
var x = document.getElementById("EDUCBA").value;
document.getElementById("sid").innerHTML = "Enter the text : " +x;
)





HTML oninput

body (
text-align:center;
)
h1 (
color:red;
)

Event Attribute
Enter the text:

function myon()
(
var x = document.getElementById("EDUCBA").value;
document.getElementById("sid").innerHTML = "Enter the text : " +x;
)



Salida:

• oninvalid: este atributo llama a los eventos cuando el texto ingresado en el tipo de entrada no es válido o permanece vacío. Este atributo de evento debe llenar el elemento de entrada.

Código:



example oninvalid Event
p (
color:orange;
)
body (
text-align:center;
)



HTML se usa para crear una página web

Ingrese el nombre:

Salida:

• onreset: se dispara cuando un formulario está en reposo. El siguiente ejemplo dice que cuando envía el botón se procesa un formulario y nuevamente cuando hace clic para restablecer el formulario se está restableciendo.

Código:



body (font-family:calibri;)
label (font-variant:small-caps;)
ol (background-color:#610000; margin-top:35px;)
li (margin-top:3px; padding:3px; background-color:rose; font-size:15px;)
div (position:absolute;top:250px;left:70px; font-size:1.5em;
)

Form with input to reset and submit

Enter input:



function onInva() (
alert("Input field cannot be empty!");
)
function onInp() (
var input_value = document.getElementById("iv").value;
document.getElementById("a_box").innerHTML = "Input value:
" + iv;
)
function onRes() (
alert("form is reset!");
)
function onSubmitEvent() (
alert("Form is loading");
location.reload();
)





body (font-family:calibri;)
label (font-variant:small-caps;)
ol (background-color:#610000; margin-top:35px;)
li (margin-top:3px; padding:3px; background-color:rose; font-size:15px;)
div (position:absolute;top:250px;left:70px; font-size:1.5em;
)

Form with input to reset and submit

Enter input:



function onInva() (
alert("Input field cannot be empty!");
)
function onInp() (
var input_value = document.getElementById("iv").value;
document.getElementById("a_box").innerHTML = "Input value:
" + iv;
)
function onRes() (
alert("form is reset!");
)
function onSubmitEvent() (
alert("Form is loading");
location.reload();
)


1. 

body (font-family:calibri;)
label (font-variant:small-caps;)
ol (background-color:#610000; margin-top:35px;)
li (margin-top:3px; padding:3px; background-color:rose; font-size:15px;)
div (position:absolute;top:250px;left:70px; font-size:1.5em;
)

Form with input to reset and submit

Enter input:



function onInva() (
alert("Input field cannot be empty!");
)
function onInp() (
var input_value = document.getElementById("iv").value;
document.getElementById("a_box").innerHTML = "Input value:
" + iv;
)
function onRes() (
alert("form is reset!");
)
function onSubmitEvent() (
alert("Form is loading");
location.reload();
)




body (font-family:calibri;)
label (font-variant:small-caps;)
ol (background-color:#610000; margin-top:35px;)
li (margin-top:3px; padding:3px; background-color:rose; font-size:15px;)
div (position:absolute;top:250px;left:70px; font-size:1.5em;
)

Form with input to reset and submit

Enter input:



function onInva() (
alert("Input field cannot be empty!");
)
function onInp() (
var input_value = document.getElementById("iv").value;
document.getElementById("a_box").innerHTML = "Input value:
" + iv;
)
function onRes() (
alert("form is reset!");
)
function onSubmitEvent() (
alert("Form is loading");
location.reload();
)





body (font-family:calibri;)
label (font-variant:small-caps;)
ol (background-color:#610000; margin-top:35px;)
li (margin-top:3px; padding:3px; background-color:rose; font-size:15px;)
div (position:absolute;top:250px;left:70px; font-size:1.5em;
)

Form with input to reset and submit

Enter input:



function onInva() (
alert("Input field cannot be empty!");
)
function onInp() (
var input_value = document.getElementById("iv").value;
document.getElementById("a_box").innerHTML = "Input value:
" + iv;
)
function onRes() (
alert("form is reset!");
)
function onSubmitEvent() (
alert("Form is loading");
location.reload();
)



Salida:

• onsearch: funciona cuando un usuario presiona un botón enter.

Código:





Escribe en el campo.
función myF () (
var k = document.getElementById ("valor1");
document.getElementById ("sample"). innerHTML = "el elemento de búsqueda es:" + k.value;
)

Salida:

• onselect: se activa cuando se selecciona un texto en un cuadro de entrada. Lanza un cuadro de diálogo que imprime un mensaje de alerta.

Código:



onselect demo
h1 (
color:magenta;
)
body (
text-align:center;
)

function eduhtml() (
alert("text highlighted!");
)

EDUCBA Online tutorial
Text Box:





onselect demo
h1 (
color:magenta;
)
body (
text-align:center;
)

function eduhtml() (
alert("text highlighted!");
)

EDUCBA Online tutorial
Text Box:





onselect demo
h1 (
color:magenta;
)
body (
text-align:center;
)

function eduhtml() (
alert("text highlighted!");
)

EDUCBA Online tutorial
Text Box:



Salida:

• onsubmit: el propósito de este evento es ejecutar la acción realizada mientras se presiona el botón Enviar.

Código:



Onsubmit Example

Enter name:
Email :


function myF() (
alert("The form was submitted");
)



Salida:

3. Atributos del tablero clave

• OnKeyDown: se activa cuando un usuario presiona una tecla de flecha hacia abajo.

Código:





Ejemplo para Onkeydown.

función mykedwn () (
alerta ("la pulsación de tecla está activada");
)

Salida:

• OnKeyPress: este evento se activa cuando el usuario presiona cualquier tecla del teclado. Nota: algunos navegadores no admiten presionar ninguna tecla.

Código:





Este ejemplo muestra que cuando un usuario escribe en el área de texto, desencadena un evento

>

Salida:

• OnKeyUp: este atributo se activa cuando un usuario suelta un cursor del campo de texto. A continuación viene la demostración.

Código:





Este ejemplo transforma el carácter en minúsculas.

Completa el nombre:
función mykey () (
var g = document.getElementById ("jjj");
g.value = g.value.toLowerCase ();
)

Salida:

4. Atributos del evento del mouse

Esta acción desencadena un evento de mouse cuando se presiona un mouse desde una computadora o cualquier dispositivo externo como un teléfono inteligente o tableta. Algunos de los eventos del mouse se dan a continuación:

• onclick: se activa cuando un usuario presiona el botón sobre el mouse. A continuación se muestra un ejemplo de entrada para mostrar el evento mientras se hace clic con el mouse.

Código:



HTML onclick Event




HTML onclick Event




HTML onclick Event


El evento juega un papel vital en HTML.

Hacer clic

función oncf () (
document.getElementById ("muestra"). innerHTML = "Hola mundo";
)

Salida:

• onmousemove: se dispara cuando se mueve un mouse sobre una imagen en cualquier dirección.

Código:


Event onmousemove demo



Este evento se activa cuando el puntero arrastra su dirección.

Texto de ejemplo

Salida:

• Onmouseup: este evento proporciona una notificación cuando un usuario suelta un botón en una salida.

Código:



body (
color: "#ff0000";
height: 120vh;
background-color: #610000;
text-align: center;
)
.polygon (
float: right;
shape-inside: polygon(0 0, 0 200px, 100px 200px);
clip-path: polygon(0 0, 0 250px, 100px 300px);
height: 200px;
width: 200px;
background: linear-gradient(to bottom left, #7CFC00, #8B008B);
)
p (
margin: 30px auto;
)

HTML onmouseup Demo




body (
color: "#ff0000";
height: 120vh;
background-color: #610000;
text-align: center;
)
.polygon (
float: right;
shape-inside: polygon(0 0, 0 200px, 100px 200px);
clip-path: polygon(0 0, 0 250px, 100px 300px);
height: 200px;
width: 200px;
background: linear-gradient(to bottom left, #7CFC00, #8B008B);
)
p (
margin: 30px auto;
)

HTML onmouseup Demo




body (
color: "#ff0000";
height: 120vh;
background-color: #610000;
text-align: center;
)
.polygon (
float: right;
shape-inside: polygon(0 0, 0 200px, 100px 200px);
clip-path: polygon(0 0, 0 250px, 100px 300px);
height: 200px;
width: 200px;
background: linear-gradient(to bottom left, #7CFC00, #8B008B);
)
p (
margin: 30px auto;
)

HTML onmouseup Demo


haga clic debajo del objeto

función mupFn () (
document.querySelector ('. polygon'). style.transform = 'scale (2.2)';
)

Salida:

• Onmouseover: ejecute un JavaScript al mover el puntero del mouse sobre una imagen

Código:



Example demonstrating Onmouseover.
Mouse over
function A() (
document.getElementById("sample").style.color = "yellow";)
function B() (
document.getElementById("sample").style.color = "green";
)





Example demonstrating Onmouseover.
Mouse over
function A() (
document.getElementById("sample").style.color = "yellow";)
function B() (
document.getElementById("sample").style.color = "green";
)





Example demonstrating Onmouseover.
Mouse over
function A() (
document.getElementById("sample").style.color = "yellow";)
function B() (
document.getElementById("sample").style.color = "green";
)



Salida:

5. Arrastre los atributos del evento

Esta aplicación ayuda en la ventana HTML cuando el usuario arrastra el elemento de entrada. A continuación se muestran los diferentes oyentes de eventos utilizados en HTML para almacenar datos arrastrados.

• Ondrag: se usa cuando un elemento se arrastra desde la página web.
• Ondragstart : se activa cuando el usuario comienza a arrastrar desde el campo de entrada. El siguiente ejemplo muestra cómo arrastrar el área de dos objetivos.

Código:



#b1, #b2 (
float:left;padding:11px;margin:11px; -moz-user-select:none;
)
#b1 ( background-color: #FF6699; width:65px; height:85px; )
#b2 ( background-color: #808000; width:180px; height:180px; )

function dStart(e) (
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData("Text", e.target.getAttribute('id'));
e.dataTransfer.setDragImage(e.target, 0, 0);
return true;
)


Drag demo
Drag the box.
ondragstart = "return dStart(e)">
Drag it
welcome





#b1, #b2 (
float:left;padding:11px;margin:11px; -moz-user-select:none;
)
#b1 ( background-color: #FF6699; width:65px; height:85px; )
#b2 ( background-color: #808000; width:180px; height:180px; )

function dStart(e) (
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData("Text", e.target.getAttribute('id'));
e.dataTransfer.setDragImage(e.target, 0, 0);
return true;
)


Drag demo
Drag the box.
ondragstart = "return dStart(e)">
Drag it
welcome





#b1, #b2 (
float:left;padding:11px;margin:11px; -moz-user-select:none;
)
#b1 ( background-color: #FF6699; width:65px; height:85px; )
#b2 ( background-color: #808000; width:180px; height:180px; )

function dStart(e) (
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData("Text", e.target.getAttribute('id'));
e.dataTransfer.setDragImage(e.target, 0, 0);
return true;
)


Drag demo
Drag the box.
ondragstart = "return dStart(e)">
Drag it
welcome