Contenidos
Javascript añadir onclick al botón
Ten en cuenta que dentro de onclick usamos comillas simples, porque el propio atributo está entre comillas dobles. Si olvidamos que el código está dentro del atributo y usamos comillas dobles dentro, como esto: onclick=”alert(“Click!”)”, entonces no funcionará bien.
Si añadimos paréntesis, entonces sayThanks() se convierte en una llamada a una función. Así que la última línea realmente toma el resultado de la ejecución de la función, que es indefinido (ya que la función no devuelve nada), y lo asigna a onclick. Eso no funciona.
Los desarrolladores de los estándares web lo entendieron hace tiempo y sugirieron una forma alternativa de gestionar los manejadores utilizando métodos especiales addEventListener y removeEventListener. Están libres de este problema.
Elemento que maneja el evento. Eso es exactamente lo mismo que esto, a menos que el manejador sea una función de flecha, o su esto esté ligado a algo más, entonces podemos obtener el elemento de event.currentTarget.
Hay más propiedades. Muchas de ellas dependen del tipo de evento: los eventos de teclado tienen un conjunto de propiedades, los eventos de puntero – otro, los estudiaremos más adelante cuando lleguemos a los diferentes eventos en detalle.
Onclick jquery
El addEventListener toma dos argumentos; el primero es el tipo de evento a escuchar en un elemento HTML, y el segundo es la función callback que se ejecutaría cuando ocurriera un determinado evento.Si estás usando Internet Explorer, el addEventListener no funcionará por problemas de compatibilidad. Tendríamos que utilizar una función de retorno usando attachEvent para replicar este comportamiento.<!DOCTYPE html>
En el ejemplo, pasamos dos argumentos, this y red, this pasa una referencia a un elemento DOM a la función, mientras que red es sólo una cadena.Puedes notar que con sólo cambiar el segundo argumento, podemos cambiar el color del elemento. Este enfoque aumenta la reutilización en comparación con el otro enfoque. Por ejemplo, podemos usar el método ChangeColor con múltiples elementos.<!DOCTYPE html>
Haga clic en esto
Otra diferencia es que no puedes devolver false para evitar el comportamiento por defecto en React. Debes llamar a preventDefault explícitamente. Por ejemplo, con HTML plano, para evitar el comportamiento por defecto del formulario de envío, puedes escribir:
Aquí, e es un evento sintético. React define estos eventos sintéticos de acuerdo con la especificación del W3C, por lo que no tienes que preocuparte por la compatibilidad entre navegadores. Los eventos de React no funcionan exactamente igual que los eventos nativos. Consulta la guía de referencia de SyntheticEvent para saber más.
Cuando se define un componente utilizando una clase ES6, un patrón común es que el controlador de eventos sea un método de la clase. Por ejemplo, este componente Toggle muestra un botón que permite al usuario alternar entre los estados “ON” y “OFF”:
El problema con esta sintaxis es que se crea un callback diferente cada vez que el LoggingButton se renderiza. En la mayoría de los casos, esto está bien. Sin embargo, si esta llamada de retorno se pasa como una proposición a componentes inferiores, esos componentes podrían hacer una re-presentación extra. Por lo general, recomendamos la vinculación en el constructor o el uso de la sintaxis de los campos de clase, para evitar este tipo de problema de rendimiento.
Reacción al hacer clic
Usando este enfoque (eventos de nivel 2 del DOM), puedes adjuntar un número teóricamente ilimitado de eventos a cualquier elemento. La única limitación práctica es la memoria del lado del cliente y otros problemas de rendimiento, que son diferentes para cada navegador.
Otra característica importante de addEventListener es el parámetro final, que controla cómo reacciona el oyente a los eventos de burbujeo[doc]. En los ejemplos he pasado false, lo que es estándar para probablemente el 95% de los casos de uso. No hay un argumento equivalente para attachEvent, o cuando se usan eventos en línea.
La mayoría de los desarrolladores experimentados evitan este método, pero hace el trabajo; es simple y directo. No puedes usar cierres o funciones anónimas aquí (aunque el propio manejador es una especie de función anónima), y tu control del alcance es limitado.
El inconveniente significativo de los eventos en línea es que, a diferencia de los escuchadores de eventos descritos anteriormente, sólo se puede asignar un evento en línea. Los eventos inline se almacenan como un atributo/propiedad del elemento[doc], lo que significa que puede ser sobrescrito.