Contenidos

1 Eventos

Eventos

Las acciones que el usuario realiza o los cambios que efectúe en la página se conocen con el nombre de eventos

Un evento es la señal de que ‘algo‘ ha sucedido

Sintaxis de los eventos

Es necesario especificar un selector, para saber sobre qué elemento interactuará el evento, seguido del evento entre paréntesis

$(selector).evento(funcion() {
    //Código a ejecutar
});

Vamos a usar el siguiente HTML de ejemplo, que contiene un sencillo formulario, para ir conociendo el uso de los eventos, acompañado de un fichero que llamaremos event.js

Para procesar el formulario también hemos añadido un fichero form.php, sin embargo, no lo vamos a utilizar con los ejemplos sobre eventos

<html>
    <head>
<!-- Inserted by miarroba -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<!-- Inserted by miarroba -->
        <meta charset='utf-8'>
        <script src='jquery-3.4.1.min.js'></script>
        <script type='text/javascript' src='event.js'></script>
   </head>

   <body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
      <form id='form' action='form.php' method='POST'>
          <label for='login'>Login:</label>
          <input type='text' id='login'/>

          <label for='pass'>Password:</label>
          <input type='text' id='pass'/>

          <input type='submit' id='button'/>
      </form>
   <!-- Inserted by miarroba -->
</script></noframes></noembed></noscript><script type="text/javascript" src="/hosting__contador__visitas__unicas.php?h=1579157&t=1732184674&k=22bb1b5a13fd73efde9914462f63f8d5&__muid="></script>
<!-- Inserted by miarroba -->
</body>
</html>

Eventos de elemento

Este tipo de evento es el que normalmente usará el usuario para interactuar con los elementos del HTML, cuando pase el ratón sobre el elemento o sea pulsado, entre otros

Entre los más importantes destacamos:

focus
se activa cuando el foco se dirige al elemento
blur
se activa cuando cuando el foco se dirige a otro elemento o lo pierde
click
se activa cuando se hace click sobre el elemento
dblclick
se activa cuando se hace doble click sobre el elemento

var warning = function() {
    alert('Click');
};

$(function() {
    $('#button').click(warning);
});

En el ejemplo se ha seleccionado el elemento con el id button y responde al evento click que tiene como parámetro la variable warning

Podría haberse incluido el código dentro del evento click, pero se ha querido recalcar que los parámetros pueden ser una variable que contiene una función, así podemos tener distintas variables con distinto comportamiento, sin tener que modificar nuestro código

Eventos de ratón

Se producen cuando el usuario utiliza el ratón dentro del documento HTML o cualquier de los elementos que lo componen

Entre los más importantes destacamos:

mousedown
se activa al pulsar un botón del ratón
mouseup
se activa cuando se deja de pulsar un botón del ratón
mousemove
se activa cuando se mueve el ratón
mouseover
se activa cuando se mueve el ratón sobre un elemento (cuando entramos en el elemento)
mouseout
se activa cuando el ratón abandona el elemento (cuando salimos del elemento)

var warning = function() {
    alert('Click');
};

var over = function() {
    this.style['font-weight']='bold';
};

var out = function() {
    this.style['font-weight']='initial';
};

$(function() {
    $('#button').click(warning);
    $('#button').mouseover(over);
    $('#button').mouseout(out);
});

En el ejemplo se han añadido un par de eventos más que cambian el tipo de letra cuando se pasa el ratón sobre el elemento con id button

Es posible asignar a estos eventos parámetros que contienen información sobre el evento del ratón

Entre los más importantes destacamos:

screenX y screenY
representan las coordenadas del puntero del ratón con respecto a las coordenadas globales de la pantalla
clientX y clientY
representan las coordenadas del puntero del ratón con respecto a la ventana del navegador
button
es el número de botón que ha sido pulsado (izquierdo = 0, central = 1, derecho = 2)

Si no queremos pasarlo como parámetro, podemos usar la propiedad buttons, que incluye más botones, como la rueda del ratón o los botones de adelante y atrás del navegador

var warning = function(info) {
    alert('El botón pulsado ha sido: ' + (info.button == 0 ? 'izquierdo' : (info.button == 1 ? 'central' : (info.button == 2 ? 'derecho' : 'otro') ) ) + '\nEn la posición de la pantalla: ' + info.screenX + ', ' + info.screenY);
};

En el ejemplo se ha modificado la variable warning para que detecte qué botón ha sido pulsado y qué posición tenía el ratón en la pantalla, cuando ha sido pulsado

Eventos de teclado

Se producen cuando el usuario utiliza el teclado

Entre los más importantes destacamos:

keydown
se activa al pulsar una tecla
keyup
se activa cuando se deja de pulsar una tecla
keypress
se activa cuando se pulsa y se deja de pulsar una tecla

Es posible asignar a estos eventos parámetros que contienen información sobre el evento del teclado

Entre los más importantes destacamos:

char o charCode
es una cadena con el carácter que ha sido pulsado (siempre que el mismo sea representable)
key o keyCode
es un identificador que representa la tecla que ha sido pulsada

Puedes consultar la lista completa en la página para desarrolladores de Mozilla
ctrlKey, shitKey y altKey
son campos que indican si las teclas Control, Shift o Alt habian sido pulsadas cuando se produjo el evento de teclado

var key = function(info) {
    //La letra a tiene el código 97 y el valor del resto es consecutivo
    var dictionary = 'abcdefghijklmnopqrstuvyz';

   console.log('Has pulsado la tecla: ' + dictionary.charAt(info.keyCode - 97) );
};

$(function() {
    $('#button').click(warning);
    $('#button').mouseover(over);
    $('#button').mouseout(out);
    $('#login').keypress(key);
});

En el ejemplo se ha añadido la variable key con parámetros para capturar las teclas pulsadas al escribir en el elemento con el id login y se ha modificado el conjunto de llamadas para utilizarlo, usando el evento keypress

Eventos de toque

Estos eventos se producen al tocar una pantalla tactil

Son similares a los producidos por un ratón, pero su retardo es mucho menor

A causa de ello, pueden producirse conflictos con los eventos del ratón, por eso es recomendable deshabilitarlos, para no ejecutar eventos similares dos veces

Entre los más importantes destacamos:

touchstart
se activa cuando el dedo toca la superficie de la pantalla
touchend
se activa cuando el dedo deja de pulsar la superficie de la pantalla
touchmove
se activa cuando el dedo se desliza por la superficie de la pantalla
touchenter
se activa cuando el dedo se mueve sobre un elemento (cuando entramos en el elemento)
touchleave
se activa cuando el dedo abandona el elemento (cuando salimos del elemento)
touchcancel
se activa cuando el dedo se sale fuera de los límites de la ventana del navegador

Eventos de formulario

Los formularios tienen sus propios eventos, entre los más importantes destacamos:

click
se activa cuando hacemos click con el ratón sobre un elemento
Normalmente suele usarse con los botones (button, submit)
change
se activa cuando el usuario modifica el valor de un elemento de texto

Normalmente suele usarse con los input de tipo texto, los textarea o las listas desplegables al seleccionar una opción
focus
se activa cuando el usuario selecciona un elemento del formulario
blur
se activa cuando el usuario pasa a otro elemento del formulario
submit
se activa cuando el usuario realiza la acción de enviar el formulario (no sólo cuando se pulsa el botón de submit, ya que puede simularse al pulsar un button que hace las veces de submit o cuando se fuerza una llamada al evento desde otro evento)

Adicionalmente, el evento submit genera los eventos mousedown, click, mouseup y submit, en ese mismo orden, lo que nos permite realizar validaciones en los elementos del formulario antes de enviarlo definitivamente
reset
se activa cuando el usuario realiza la acción de resetear el formulario (no sólo cuando se pulsa el botón de reset, ya que puede simularse al pulsar un button que hace las veces de reset o cuando se fuerza una llamada al evento desde otro evento)

var send = function(event) {
    var login = $('#login').val();
    var pass = $('#pass').val();

    if( (login.length == 0) || (pass.length == 0) ) {
        alert('Uno de los datos estaba sin rellenar');
        event.preventDefault();
    }
};

var write = function() {
    var value = $('#pass').val();

    if(value.indexOf('@') 1= *1) {
       alert('La contraseña no puede contener el símbolo @');
    }
};

$(function() {
    $('#button').click(warning);
    $('#button').mouseover(over);
    $('#button').mouseout(out);
    $('#login').keypress(key);
    $('#form').submit(send);
    $('#pass').change(write);
});

En el ejemplo se han añadido las variables send (para validar los campos login y pass) y write (para validar que no se introduzca el símbolo @ en el campo pass); se ha modificado el conjunto de llamadas para utilizarlos, usando los eventos submit y change

Cookie	Duración	Descripción
CookieLawInfoConsent	Hasta finalizar la sesión del navegador	Controla la visualización del consentimiento de Cookies, su gestión y visualización en la página web por parte del usuario
qtrans_admin_language	Hasta finalizar la sesión del navegador	Permite al administrador gestionar la traducción de la página web a varios idiomas
qtrans_edit_language	Hasta finalizar la sesión del navegador	Permite al administrador editar la traducción de la página web a varios idiomas
viewed_cookie_policy	Hasta finalizar la sesión del navegador	Controla si la visualización del consentimiento de Cookies es visible actualmente en la página web para el usuario o por el contrario está oculta

Web sobre Informática de Secarcam

Eventos

Eventos

Sintaxis de los eventos

Eventos de elemento

Eventos de ratón

Eventos de teclado

Eventos de toque

Eventos de formulario

Página web de Sergio Cárcamo García dedicada a la informática y temas relacionados como los lenguajes de programación, la estadística, las matemáticas, etc

Eventos

Sintaxis de los eventos

Eventos de elemento

Eventos de ratón

Eventos de teclado

Eventos de toque

Eventos de formulario

Página web de Sergio Cárcamo García dedicada a la informática y temas relacionados como los lenguajes de programación, la estadística, las matemáticas, etc

Política de Cookies