jqueryライブ関数のシンプルなバージョン

Question

jqueryのlive()と同様の機能を持つイベントハンドラ用の純粋なjavascript関数をどこでも取得できますか？まだ作成されていないオブジェクトにイベントをアタッチする機能が必要ですが、jquery-livequeryとjquery-eventsの両方のソースは、jqueryコアの依存性のために有用ではありません。

Answer 1

イベントの委任は非常に簡単です。この例を見てみましょう：

マークアップ：

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

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

スクリプト：

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); 
}; 

イベントハンドラが親に取り付けられているので、それが挿入され、将来の要素のために動作します。

You can try it here.

便利な参照：

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

Answer 2

jQueryのは、純粋なJavaScriptとオープンソースですので、ちょうどあなたが必要なものをコピーし、元に見てそれを適応させる。

Answer 3

はい、これはイベントの委任と呼ばれ、jQueryと「live」よりも長く続きました。

"live"は、本体またはドキュメントのイベントをリッスンすることで動作し、イベントが発生したときに、event.targetを参照してセレクタがキャッシュに格納されているセレクタと一致するかどうかを確認します。非常に非効率的ですが、一部の人にとっては問題ありません。

より効率的なアプローチでは、リスナーに必要な要素を配列に追加し、イベントを委譲する要素の最も共通の祖先でバブリングイベントを待ち受けます。 body要素はフォールバックですが、それは最も効率が悪いです。リスナーが待機中のイベントを取得すると、event.targetが配列内の要素の1つであるかどうかを確認し、そうであれば、要素がの関連関数をこのとして呼び出します。

要素idをオブジェクトのプロパティとして格納するだけで、要素をたくさん持っている場合の検索が高速になり、クラスに基づいてイベントを登録することもできます。

いくつかの制限と弱点があります（いくつかのブラウザではいくつかのバブルがありますが、バブルはありません）。非常に非効率的な場合がありますので注意して使用してください。

Answer 4

私はJqueryとあなたの機能がほとんど分かりません。 JavaScriptでイベントの仕組みを見ていますか？

element.addEventListener('onclick', 
function() { 
    //do something 
}); 

または

element.onclick = 
function() { 
    //do something 
}); 

element varは、DOMドキュメントの参照です： あなたは、このことができます。詳細については、 チェックhttps://developer.mozilla.org/en/DOMをご確認ください。