セレクタを使用した$（document）.on（event）のプレーンJavaScript相当版

Question

jQueryイベントハンドラを純粋なjavascriptに変換しようとしています。そこページ上の特定のセレクタの負荷があるので、これはそのセレクターで文書をターゲットに一つだけのイベントに設計されました：文字列としてselectorは、セレクタのリストである

$(document).on("click", selectorString, function(event) { 
// do stuff 
}); 

「.one, .two, .three」。

私もjQueryのなく、これを複製するために苦労しています：

document.addEventListener("click", function(event){ 
    if (elementHasClass(event.target, selectorString) { 
     // do stuff 
    } 
}); 

しかし、リスナーのみdocument要素であるとして、これは内ではなく、選択した要素よりも、目的の動作はありません。ドキュメント。誰もこれで助けることができますか？

Answer 1

ネストされた要素では機能しないという問題があるようです。例えば

あなたが指定したクラスを持つ親を持つネストされたspan要素をクリックした場合は、単に（event.targetです）span要素がクラスを持っているかどうかをチェックしているので、それは動作しません。

これを解決するには、基本的にイベントを委譲し、event.target要素の親の要素のいずれかが指定されたクラスを持っているかどうかを確認することができます：あなたがあなた自身を作成する必要があるためです

Example Here

document.addEventListener("click", function (e) { 
    var target = e.target; 

    while (target && target.parentNode !== document) { 
     target = target.parentNode; 
     if (!target) { return; } // If element doesn't exist 

     if (target.classList.contains('target')){ 
      // do stuff 
      console.log(e.target); 
     } 
    } 
});