ES6 | Eventos – Barcelona Geeks

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 Cancelar la respuesta