Contenidos
Evento bubbling javascript
Detener el burbujeoUn evento de burbujeo va desde el elemento objetivo hacia arriba. Normalmente va hacia arriba hasta <html>, y luego al objeto documento, y algunos eventos incluso llegan a la ventana, llamando a todos los manejadores en el camino.
Normalmente no hay necesidad real de evitar el burbujeo. Una tarea que aparentemente requiere eso puede ser resuelta por otros medios. Uno de ellos es usar eventos personalizados, los cubriremos más adelante. También podemos escribir nuestros datos en el objeto de evento en un manejador y leerlos en otro, así podemos pasar a los manejadores en los padres información sobre el procesamiento de abajo.
Es decir: para un clic en <td> el evento primero pasa por la cadena de ancestros hasta el elemento (fase de captura), luego llega al objetivo y se dispara allí (fase de objetivo), y luego sube (fase de burbujeo), llamando a los manejadores en su camino.
Ten en cuenta que, aunque formalmente hay 3 fases, la segunda fase (“fase de destino”: el evento llega al elemento) no se maneja por separado: los manejadores de las fases de captura y burbujeo se activan en esa fase.
Cómo detener la captura de eventos en javascript
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.
Eventos en Javascript
export default App;¿Cuál se dispara primero? En ciertos casos puede querer prevenir uno de los eventos cuando el otro se disparó. Por ejemplo, cuando un evento táctil ocurre y es manejado, puedes querer prevenir todos los eventos de clic (ver solución).Continue Reading: React preventDefault()De todos modos, en el ejemplo anterior, todos los eventos ocurrieron en el mismo elemento HTML. Todavía no hay nada que ver sobre el burbujeo o la captura de eventos. Vamos a explorar el burbujeo de eventos con más de un elemento HTML a continuación:import * as React from ‘react’;
export default App;Count: 0En este ejemplo, parece que el botón se pulsa dos veces, porque el contador se incrementa en dos en lugar de uno. Sin embargo, lo que ocurre es que el elemento contenedor que lo envuelve llama también a su manejador de eventos. Entrando en el burbujeo de eventos (en React) …Burbujeo de eventos en ReactEl siguiente ejemplo muestra dos elementos HTML con el mismo estilo. En aras de la simplicidad, estamos utilizando el estilo inline aquí, sin embargo, siéntase libre de utilizar una forma más sofisticada de estilo de su aplicación React.Continue Reading: Cómo dar estilo a los componentes de ReactDe todos modos, vamos a entrar en el tema del burbujeo de eventos. Como puedes ver, en el siguiente ejemplo sólo el elemento contenedor exterior escucha un evento de clic, no el elemento contenedor interior. Pero independientemente de si se hace clic en el elemento exterior o en el interior, el manejador de eventos se disparará de todos modos:import * as React from ‘react’;
Addeventlistener javascript
Detener el burbujeoUn evento de burbujeo va desde el elemento objetivo hacia arriba. Normalmente va hacia arriba hasta <html>, y luego al objeto documento, y algunos eventos incluso llegan a la ventana, llamando a todos los manejadores en el camino.
Normalmente no hay necesidad real de evitar el burbujeo. Una tarea que aparentemente requiere eso puede ser resuelta por otros medios. Uno de ellos es usar eventos personalizados, los cubriremos más adelante. También podemos escribir nuestros datos en el objeto de evento en un manejador y leerlos en otro, así podemos pasar a los manejadores en los padres información sobre el procesamiento de abajo.
Es decir: para un clic en <td> el evento primero pasa por la cadena de ancestros hasta el elemento (fase de captura), luego llega al objetivo y se dispara allí (fase de objetivo), y luego sube (fase de burbujeo), llamando a los manejadores en su camino.
Ten en cuenta que, aunque formalmente hay 3 fases, la segunda fase (“fase de destino”: el evento llega al elemento) no se maneja por separado: los manejadores de las fases de captura y burbujeo se activan en esa fase.