Jednoduchá verze živé funkce jQuery

Je možné kdekoli získat čistě Javascriptovou funkci pro obsluhu událostí s podobnou funkčností jako live() jQuery ? Potřebuji mít možnost připojovat události k dosud nevytvořeným objektům, ale zdroje jquery-livequery i jquery-events nejsou užitečné kvůli závislosti na jádru jQuery.

Odpověď

Delegování akce je poměrně jednoduché. Vezměte si tento příklad:

Označení:

<div id="container">
    <p>Test</p>
    <p>Test</p>
    <p>Test</p>
</div>

<button id="add">Add new paragraph</button>

Scénář:

document.getElementById("container").onclick = function(e) {

    // e.target is the target of the event or "source element"
    alert(e.target.innerHTML);
};

// dynamically adds new paragraph on button click
document.getElementById("add").onclick = function() {
    var p = document.createElement("p");
    p.innerHTML = "a new paragraph";
    document.getElementById("container").appendChild(p);
};

Protože je obslužná rutina události připojena k nadřazenému prvku, bude fungovat pro všechny budoucí vložené prvky.

Můžete to zkusit zde.

Užitečná reference:

  • http://www.quirksmode.org/js/events_properties.html#target
  • http://www.sitepoint.com/javascript-event-delegation-is-easier-than-you-think/