Contenidos
Escuchador de eventos en Javascript
Modificadores de eventosEs muy común la necesidad de llamar a event.preventDefault() o event.stopPropagation() dentro de los manejadores de eventos. Aunque podemos hacer esto fácilmente dentro de los métodos, sería mejor si los métodos pueden ser puramente sobre la lógica de los datos en lugar de tener que lidiar con los detalles del evento DOM.
El orden importa cuando se usan modificadores porque el código relevante se genera en el mismo orden. Por lo tanto, el uso de v-on:click.prevent.self evitará todos los clics, mientras que v-on:click.self.prevent sólo evitará los clics en el propio elemento.
A diferencia de los otros modificadores, que son exclusivos de los eventos nativos del DOM, el modificador .once también puede utilizarse en eventos de componentes. Si aún no has leído sobre componentes, no te preocupes por esto por ahora.
No uses .passive y .prevent juntos, porque .prevent será ignorado y tu navegador probablemente te mostrará una advertencia. Recuerda que .passive comunica al navegador que no quieres impedir el comportamiento por defecto del evento.
Nota: En los teclados de Macintosh, meta es la tecla de comando (⌘). En los teclados Windows, meta es la tecla Windows (⊞). En los teclados de Sun Microsystems, meta está marcada como un diamante sólido (◆). En ciertos teclados, específicamente en los teclados de las máquinas MIT y Lisp y sus sucesores, como el teclado Knight, el teclado de espacio-cadena, meta está etiquetado como “META”. En los teclados Symbolics, meta lleva la etiqueta “META” o “Meta”.
Eventos en Javascript
Cada objeto de la página tiene eventos asociados y manejadores de eventos. En el ejemplo anterior, cuando el ratón estaba sobre la flecha “do this” teníamos un evento llamado mouseover. Cuando el ratón no estaba sobre la flecha “hacer esto” también teníamos un evento, pero uno diferente llamado mouseout. Un objeto puede manipular estos eventos utilizando un manejador de eventos asociado. El manejador de eventos puede disparar un método del objeto o cualquier actividad general cuando el evento ocurre.
En el siguiente ejemplo, puede introducir una expresión como 3 + 2 en el primer campo de texto, y luego hacer clic en el botón Calcular. El segundo campo de texto muestra el valor de la expresión, como por ejemplo 5.
Lista de eventos en Javascript
As mentioned above, events are actions or occurrences that happen in the system you are programming — the system produces (or “fires”) a signal of some kind when an event occurs, and provides a mechanism by which an action can be automatically taken (that is, some code running) when the event occurs.
In the case of the Web, events are fired inside the browser window, and tend to be attached to a specific item that resides in it. This might be a single element, a set of elements, the HTML document loaded in the current tab, or the entire browser window.
The third part of the code is where we define and register the event handler. The <button> element has an event called ‘click’ that fires when the user clicks the button. Objects that can fire events have an addEventListener() method, that takes at least two arguments: the name of the event and a function to handle the event. So we call the button’s addEventListener() method, passing in:
The Node.js event model relies on listeners to listen for events and emitters to emit events periodically — it doesn’t sound that different, but the code is quite different, making use of functions like on() to register an event listener, and once() to register an event listener that unregisters after it has run once.
Tipos de manejadores de eventos en javascript
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. 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 desde 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.