javascript events - event - ¿Cómo funciona jQuery.on()?

jquery on input

Question

No he visto el origen de esta función, pero me pregunto si funciona así:

1. Selecciona elemento (s) por sus selectores
2. Delega a los controladores de eventos proporcionados a ellos
3. Ejecuta un setInterval en ese selector y setInterval -delegando constantemente, y luego vuelve a delegar ese mismo evento en todas partes

¿O hay una explicación DOM de JavaScript puro para esto?

Answer 1

Supongo que su pregunta es sobre la versión de delegación de eventos de .on .

En JavaScript, la mayoría de los eventos aparecen en la jerarquía DOM. Eso significa que, cuando un evento que puede provocar incendios en un elemento, se disparará hasta el DOM hasta el nivel del document .

Considere este marcado básico:

<div>
   <span>1</span>
   <span>2</span>
</div>

Ahora aplicamos la delegación de eventos:

$(''div'').on(''click'', ''span'', fn);

El controlador de eventos está asociado únicamente al elemento div . Como el span está dentro del div , cualquier clic en los tramos se disparará hasta el div , disparando el manejador de clics del div . En ese momento, todo lo que queda es verificar si el event.target (o cualquiera de los elementos entre el objetivo y el delegateTarget ) coincide con el selector de destino de la delegación.

Vamos a hacer un poco más complejo:

<div id="parent">
    <span>1</span>
    <span>2 <b>another nested element inside span</b></span>
    <p>paragraph won''t fire delegated handler</p>
</div>

La lógica básica es la siguiente:

//attach handler to an ancestor
document.getElementById(''parent'').addEventListener(''click'', function(e) {
    //filter out the event target
    if (e.target.tagName.toLowerCase() === ''span'') {
        console.log(''span inside parent clicked'');
    }
});

Aunque lo anterior no coincidirá cuando se event.target dentro de su filtro. Necesitamos alguna lógica de iteración:

document.getElementById(''parent'').addEventListener(''click'', function(e) {
    var failsFilter = true,
        el = e.target;
    while (el !== this && (failsFilter = el.tagName.toLowerCase() !== ''span'') && (el = el.parentNode));
    if (!failsFilter) {
        console.log(''span inside parent clicked'');
    }
});

Violín

editar: código actualizado para hacer coincidir solo los elementos descendientes como .on hace .on de jQuery.

Nota: Estos fragmentos son para propósitos explicativos, no se deben usar en el mundo real. A menos que no planees soportar viejo IE, por supuesto. Para el viejo IE, necesitarías tener una prueba contra addEventListener / attachEvent así como event.target || event.srcElement event.target || event.srcElement , y posiblemente algunas otras peculiaridades, como comprobar si el objeto de evento se pasa a la función de controlador o está disponible en el ámbito global. Afortunadamente, jQuery hace todo eso sin contratiempos para nosotros. =]