Contenidos
Addeventlistener todos los eventos
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.
Evento de clic javascript
Primero traté de buscarlo en línea. No pude encontrar un mapa de este tipo – uno completo que liste todos los objetos y todos los eventos que pueden ser escuchados bajo estos objetos (¡por favor comparte si conoces un mapa así!).
Recuerda que el hecho de que haya dos formas de registrar un manejador de eventos en un objeto no significa que pueda haber más de un manejador. La API de atributos simplemente se encuentra encima de la API de manejadores de eventos de nivel inferior:
La mejor manera de obtener todos estos manejadores sería iterar el prototipo y buscarlos. Métodos como Object.keys() u Object.getOwnPropertyNames() no servirán si nuestro objetivo es obtener TODAS las propiedades del objeto y no sólo sus propias propiedades.
Ahora lo único que queda por hacer es extraer dinámicamente los eventos soportados de todos los objetos que existen en el navegador (todo lo que esté bajo ventana) utilizando las funciones de ayuda que acabamos de implementar arriba.
Luego, tendremos que iterar todas las propiedades propias de window, y obtener todos los eventos soportados por esas propiedades (por ejemplo, XMLHttpRequest es una propiedad de window, por lo tanto tendremos que obtener los eventos que soporta también).
Manejo de eventos
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.
Cómo funciona la escucha 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”.