Código de JavaScript - Crear eventos que sirven para elementos que todavia no se han cargado

Imágen de perfil

Crear eventos que sirven para elementos que todavia no se han cargadográfica de visualizaciones


JavaScript

Publicado el 30 de Mayo del 2019 por Administrador (686 códigos)
692 visualizaciones desde el 30 de Mayo del 2019
Este código muestra como definir un evento sobre uno o varios elementos los cuales puede que todavia no existan, ya que puede ser que tengan que ser cargados por ajax.

Para ello, se utiliza una función on(), en la que se le define el evento, el elemento y la función a ejecutar, y se encarga de revisar el DOM en cada uno de los eventos que hemos configurado, para ver si coincide con alguno de los elementos que hemos definido.
Al hacerlo de esta manera, el evento se ejecutara también para nuevos elementos creados posteriormente a la definición del evento.

Es similar al evento definido en jquery: $(document).on('click', '.btn', handleClick);

20180912

Publicado el 30 de Mayo del 2019gráfica de visualizaciones de la versión: 20180912
693 visualizaciones desde el 30 de Mayo del 2019
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella


Forma parte de Delegación de Eventos del DOM con JavaScript
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
 
<body>
</body>
</html>
 
<script>
/**
 * "Delegración de eventos"
 * Función que se encarga de gestionar los eventos aunque todavia no esten
 * creados los elementos
 *    Ejemplo: on("blur", "table input", "validar");
 *
 * https://medium.com/@osmancea/delegación-de-eventos-del-dom-con-javascript-d28131d43686
 *
 * @param string eventName - nombre del evento
 * @param string selector - referencia a algun tipo de elemento en el DOM
 * @param string handler - manejador del evento
 */
function on(eventName, selector, handler) {
 
    // genera el evento para el documento, es decir, para cualquier elemento
    document.addEventListener(eventName, function(event) {
 
        // obtenemos los elementos para el que ha sido creado el evento
        const elements = document.querySelectorAll(selector);
 
        // obtenemos el listado de objectos del DOM que describen la trayectoria
        // del elemento pulsado hasta el objecto "window"
        const path = event.composedPath();
 
        // recorremos cada elemento
        path.forEach(function(node) {
 
            // recorremos los elementos para el que se ha creado el evento
            elements.forEach(function(elem) {
 
                // comprobamos si el el objeto que hay en la trayectorio del evento
                // coincide con el elemento para el que se ha creado el evento
                if (node === elem) {
 
                    // llamamos a la función que manejara el evento
                    handler.call(elem, event);
                }
            });
        });
    }, true);
}
 
// definimos los eventos
on("click", "button", handleButtonClick);
on("mouseover", "#otroBoton", ()=>{console.log("sobre el elemento #kitten")});
on("mouseout", "#otroBoton", ()=>{console.log("fuera del elemento #kitten")});
 
// insertamos tres botones
['foo', 'bar', 'baz'].map(createButton);
 
// a los 5 segundos de haber cargado la pagina, añadimos un nuevo boton
setTimeout(() => {
    createButton('otroBoton');
}, 5000);
 
// Definimos esta función para el evento click
function handleButtonClick(event) {
    console.log('Click on button with id: '+this.id);
    //console.log(event);
}
 
// Función para crear los botones y ponerlo en la pagina
function createButton(id) {
    const button = document.createElement('button');
    button.innerText = 'button '+id;
    button.id = id;
    document.body.appendChild(button);
    return button;
}
</script>



Comentarios sobre la versión: 20180912 (0)


No hay comentarios
 

Comentar la versión: 20180912

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s5333