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

Crear eventos que sirven para elementos que todavia no se han cargado

JavaScript

Publicado el 30 de Mayo del 2019 por Administrador (718 códigos)

1.244 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 2019

1.245 visualizaciones desde el 30 de Mayo del 2019

Forma parte de Delegación de Eventos del DOM con JavaScript

<!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

http://lwp-l.com/s5333

Creación y resolución de un laberinto

Cálculo de hipotecas/préstamos

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

20180912

Comentarios sobre la versión: 20180912 (0)

Comentar la versión: 20180912

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