ES6 | Eventos

Los eventos de ES6 son la parte de cada elemento HTML que contiene un conjunto de eventos que pueden activar el código JavaScript. Un evento es una acción u ocurrencia reconocida por el software. Puede ser activado por el usuario o por el sistema. La mayoría de los eventos se usan en botones, hipervínculos, desplazamientos, carga de páginas, etc. Todo esto entra en acción (procesado) con la ayuda de los controladores de eventos.

Controlador de eventos: simplemente, cuando ocurre un evento mencionado, se maneja. Cuando se genera el evento, se maneja en forma de un conjunto de instrucciones (función()).

Los siguientes son algunos de los eventos HTML más utilizados:

onclick: este evento se activa al hacer clic en un botón con la ayuda de hacer clic con el botón izquierdo del mouse. Con un clic, el «onclick» llama a la función respectiva () asignada a él.

  • Ejemplo:

    <!DOCTYPE html>
    <html> 
    <head> 
        <title>
            ES6 Events using onclick
        </title>
          
        <script> 
            function geeks() { 
                document.write ("A Computer"
                + " Science Portal for Geeks"
            
        </script> 
    </head> 
          
    <body style="text-align:center;"
      
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
          
        <h3> 
            With a click, the “onclick”
            calls geeks()
        </h3>
          
        <input type = "button" onclick =
            "geeks()"    value = "Click here" /> 
    </body> 
      
    </html>
  • Producción:

onmouseover y onmouseout: estos tipos de eventos nos ayudarán a crear buenos efectos con imágenes o incluso con texto. El evento «onmouseover» se activa cuando coloca el cursor del mouse sobre cualquier elemento y «onmouseout» se activa cuando mueve el cursor del mouse fuera de ese elemento.

  • Ejemplo:

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            ES6 Events using onmouseover
            and onmouseout
        </title>
          
        <script type="text/javascript">
            function mouseOver() {
                document.getElementById("d1").style.color
                                = "green";
                  
                document.getElementById("d2").innerHTML
                                = "mouseOver triggered";
            }
      
            function mouseOut() {
                document.getElementById("d1").style.color
                                = "black";
                  
                document.getElementById("d2").innerHTML
                                = "mouseOut triggered";
            }
        </script>
    </head>
      
    <body style="text-align:center;">
          
        <h1 id="d1" onmouseover="mouseOver()"
                    onmouseout="mouseOut()">
            GeeksforGeeks
        </h1>
              
        <h3>
            when the cursor is on the element
            h1 the "onmouseover" gets triggers
            and when the cursor is out of h1
            the "onmouseout" gets triggers.
        </h3>
              
        <p id="d2"></p>
    </body>
      
    </html>
  • Producción:

onmousedown, onmouseup, onmousewheel : estos tipos de eventos nos ayudarán a crear buenos efectos con imágenes o incluso con texto. El evento «onmousedown» se activa cuando hace clic en el elemento y hasta que lo mantiene presionado cuando lo suelta.

  • Ejemplo:

    <!DOCTYPE hmtl>
    <html>
      
    <head>
          
        <title>
            ES6 Events using onmousedown,
            onmouseup and onmousewheel
        </title>
      
        <script>
            function mouseDown() {
                document.getElementById("d1").style.color
                            = "blue";
                  
                document.getElementById("d2").innerHTML
                            = "mouseDown triggered";
            }
      
            function mouseUp() {
                document.getElementById("d1").style.color
                            = "green";
                  
                document.getElementById("d2").innerHTML
                            = "mouseUp triggered";
            }
      
            function mouseWheel() {
                document.getElementById("d1").style.color
                            = "violet";
                  
                document.getElementById("d2").innerHTML
                            = "mouseWheel triggered";
            }
        </script>
    </head>
      
    <body style="text-align:center;">
          
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
          
        <p>
            when the mouse pointer clicks on the element h1,
            the text color changes to 'blue' when released 
            changes to 'green', if the mouse wheel rotates color
            changes to 'violet'.
        </p>
          
        <input id="d1" type="button" onmousedown="mouseDown()"
            onmouseup="mouseUp()" onmousewheel="mouseWheel()"
            value="Hello Geeks" />
          
        <p id="d2"></p>
    </body>
      
    </html>
  • Producción:

onsubmit: es un evento que ocurre cuando intenta validar un formulario antes de enviarlo a la siguiente acción (servidor). Puede poner la validación de su formulario en este tipo de evento. Con un clic, “onsubmit” llama a la respectiva “función de retorno()” asignada y toma la respuesta de la función() en forma de verdadero o falso y decide la acción. Echa un vistazo a esta página ES6 | Validación de ejemplos básicos y detallados en «onsubmit» .

Consulte la siguiente tabla para ver algunos de los controladores de eventos más utilizados:

Atributo Descripción
en el cambio Se activa cuando cambia un elemento
enfocado Se dispara cuando la ventana se enfoca
en la entrada Se activa cuando un elemento recibe la entrada del usuario
onformcambiar Se activa cuando cambia un formulario
al pulsar una tecla Se activa cuando se presiona y suelta una tecla de palabra clave
onkeydown Se dispara cuando se presiona una tecla
encendido Se activa cuando se suelta una tecla
onmovemove Se activa cuando se mueve el puntero del mouse
en pausa Se activa cuando los datos multimedia están en pausa
en desplazamiento Se activa cuando se desplaza la barra de desplazamiento de un elemento
en seleccionar Se activa cuando se selecciona un elemento
en espera Se activa cuando el medio ha dejado de reproducirse, pero se espera que se reanude
en pausa Se activa cuando los datos multimedia están en pausa
en juego Se activa cuando los datos multimedia van a comenzar a reproducirse
jugando Se activa cuando los datos multimedia comienzan a reproducirse

Publicación traducida automáticamente

Artículo escrito por Tejashwi5 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *