AddEventListener vs OnClick en JavaScript
Al crear páginas web para un sitio web, puede haber un requisito para colocar algunas funcionalidades adicionales para características mejoradas. Por ejemplo, en el caso de las pruebas de automatización, verifique el funcionamiento de varias funcionalidades en el activador del evento. En tales casos, JavaScript proporciona dos técnicas importantes que ayudan a hacer que un diseño de documento general sea accesible nombrado como el método AddEventListener () y el evento OnClick.
Este manual teórica y prácticamente comparará el evento AddEventListener y el evento OnClick.
AddEventListener vs OnClick en JavaScript
En JavaScript, el "addEventListener ()Método "y el"al hacer clic"El evento funcionan para un evento y puede ejecutar una función de devolución de llamada cuando se hace clic en un botón. Sin embargo, no son completamente iguales.
El método addEventListener () incluye un evento en su argumento. Además, puede aplicar múltiples controladores de eventos al mismo elemento y no sobrescribe a múltiples manejadores de eventos simultáneamente. Mientras que el evento OnClick se activa cuando el usuario hace clic en el botón correspondiente en el evento. Es solo una propiedad del objeto HTMLELEMENT y se puede sobrescribir, a diferencia del método AddEventListener ().
Sintaxis
elemento.addEventListener (evento, oyente, useCapture);En la sintaxis dada, "evento"Se refiere al evento especificado", "oyente"Es la función que se invocará y"Usecapture"Es el valor opcional.
Sintaxis
Html
En la sintaxis dada, "elemento"Indica el elemento con el que el"al hacer clic"El evento estará asociado. Aquí, "myscript"Se refiere a la función que se convocará en la que ocurrirá el evento OnClick.
Javascript
objeto.onClick = function () myScript;Del mismo modo, en la sintaxis anterior, "objeto"Se refiere al objeto asociado con el evento OnClick.
Diferencias centrales entre AddEventListener y el evento OnClick
| AddEventListener | al hacer clic |
| El método AddEventListener solo se puede agregar en JavaScript. | OnClick se puede incluir en HTML y en JavaScript. |
| AddEventListener no funciona en las versiones anteriores de algunos navegadores. | OnClick es compatible con todos los navegadores. |
| Esta función puede conectar múltiples eventos a un elemento particular. | Este evento asocia solo un evento único a un elemento. |
| No puede vincular archivos HTML y JavaScript. | El evento OnClick puede conectar las funcionalidades de HTML y JavaScript. |
Ahora, pasemos por los siguientes ejemplos para comprender la diferencia declarada claramente.
Ejemplo: método addEventListener () para detectar si se presiona la tecla particular
En este ejemplo particular, aplique el "documento.addEventListener ()"Método y adjunte un evento llamado"llave"En su argumento. Esto dará como resultado notificar al usuario por alerta cuando el "IngresarSe presiona la tecla:
documento.addEventListener ("Keydown", (e) =>if (e.clave == "Enter")
alerta ("Se presiona la tecla ENTER")
);
La salida correspondiente será:
Ejemplo: evento OnClick para cambiar el color del botón
En el siguiente ejemplo, crearemos un botón con el "botón" identificación. Luego, incluya un "al hacer clicEvento que invocará la función ButtonColor () en el botón Haga clic:
Ahora, defina una función llamada "color del boton()". En la definición de funciones, acceda al botón usando el "documento.GeelementByid ()" método. Además, aplique el estilo.Propiedad de BackgroundColor para establecer el color del botón y asignarle un código de color RGB como fondo:
función buttonColor ()documento.getElementById ("botón").estilo.backgroundColor = '#911';
Producción
Ejemplo: evento OnClick para cambiar el color del botón usando JavaScript
El ejemplo discutido anteriormente se puede aplicar agregando el "al hacer clic"Evento en el código JavaScript. Para hacerlo, en primer lugar, cree un botón usando el "" etiqueta:
Ahora, obtenga el botón creado usando el "documento.getElementById ()Método "y aplicar el"al hacer clic"Evento en él. Ahora, repita todos los pasos adicionales para cambiar el color del botón:
Let Button = documento.getElementById ("botón")botón.onClick = function buttonColor ()
documento.getElementById ("botón").estilo.backgroundColor = '#911';
Dará como resultado la misma salida:
Hemos discutido las diferencias entre AddEventListener y OnClick en JavaScript.
Conclusión
La principal diferencia entre la función AddEventListener y el evento OnClick es que AddEventListener puede adjuntar múltiples eventos a un solo elemento HTML, mientras que el evento OnClick solo puede asociar el evento de clic con un botón. Además, AddEventListener solo se puede utilizar con el código JavaScript, y el evento OnClick funciona en archivos HTML y JavaScript. Este manual guió sobre el método AddEventListener y el evento OnClick tanto teórica como prácticamente.