Contenidos
Fases de los 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.
Ejemplo de captura de eventos
La propagación se refiere a cómo los eventos viajan a través del árbol del Modelo de Objetos del Documento (DOM). El árbol DOM es la estructura que contiene los elementos padre/hijo/hermanos en relación con los demás. Puedes pensar en la propagación como la electricidad que corre por un cable, hasta que llega a su destino. El evento tiene que pasar por todos los nodos del DOM hasta que llegue al final, o si se detiene a la fuerza.
El burbujeo y la captura son las dos fases de la propagación. En sus definiciones más simples, el burbujeo viaja desde el objetivo hasta la raíz, y la captura viaja desde la raíz hasta el objetivo. Sin embargo, esto no tiene mucho sentido sin definir primero lo que es un objetivo y una raíz.
La captura no se utiliza tan comúnmente como el burbujeo, por lo que nuestros ejemplos girarán en torno a la fase de burbujeo. Sin embargo, como opción, EventTarget.addEventListener() tiene un tercer parámetro opcional – que toma su argumento como un booleano – que controla la fase de la propagación. El parámetro se llama useCapture, y pasar true hará que el listener esté en la fase de captura. El valor por defecto es false, que lo aplicará a la fase de burbujeo.
Burbujeo de eventos
Pruébalo en el PlaygroundPrueba en el PlaygroundControladores de métodos #La lógica de muchos controladores de eventos será más compleja, y probablemente no sea factible con controladores en línea. Por eso v-on también puede aceptar el nombre o la ruta de un método de un componente que quieras llamar.Por ejemplo:const name = ref(‘Vue.js’)
Pruébalo en el PlaygroundPrueba en el PlaygroundAcceso al argumento del evento en los manejadores inline #A veces también necesitamos acceder al evento DOM original en un manejador inline. Puedes pasarlo a un método usando la variable especial $event, o usar una función de flecha en línea:<!– usando la variable especial $event –>
Modificadores de eventos #Es una necesidad muy común 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.Para abordar este problema, Vue proporciona modificadores de eventos para v-on. Recordemos que los modificadores son directivas posfijas denotadas por un punto.<! — se detendrá la propagación del evento click –>
Captura de eventos
El burbujeo y la captura de eventos son dos modos de propagación de eventos en la API DOM de HTML, cuando un evento ocurre en un elemento dentro de otro elemento, y ambos elementos han registrado un manejador para ese evento. El modo de propagación de eventos determina en qué orden los elementos reciben el evento.
Depende de lo que quieras hacer. No hay nada mejor. La diferencia es el orden de ejecución de los manejadores de eventos. La mayoría de las veces estará bien disparar los manejadores de eventos en la fase de burbujeo, pero también puede ser necesario dispararlos antes.
Si hay dos elementos, el elemento 1 y el elemento 2. El elemento 2 está dentro del elemento 1 y adjuntamos un manejador de eventos con ambos elementos digamos onClick. Ahora, cuando hacemos clic en el elemento 2 entonces eventHandler para ambos elementos se ejecutará. Ahora la pregunta es en qué orden se ejecutará el evento. Si el evento adjunto con el elemento 1 se ejecuta primero se llama captura de eventos y si el evento adjunto con el elemento 2 se ejecuta primero se llama burbujeo de eventos.