jqueryなしで動的に追加されたコンテンツにバインドしますか？

Question

ページに動的にフォームを追加する場合（AJAXやその他のJSを問わず）、pageload上のこれらの要素にイベントリスナーを追加するにはどうすればよいですか？

私はjQueryを使って、それは、親要素にバインドするために、かなり簡単です。このような何かを知っている：

$(document).on('blur', 'input', function() {...}) 

が、私はaddEventListenerはに直接適用されなければならないようバニラJSでこれを行う方法については不明ですイベント自体が伝播する親要素を指定することはできません。

Answer 1

これはどうやってやるの？委任は簡単です。一番上の親にバインドされます。近いほど、より良く、より速くなります。たとえば、イベントを特定のdivに委譲する場合は、それが良いでしょう。紛争を避ける。あなたは後にしているあなたのターゲットとevent.targetを比較し、コールバック関数

document.addEventListener('blur', function(event){ 
 
    
 
    if(event.target.tagName == 'INPUT'){ 
 
     onInputBlur.apply(this, arguments); 
 
    } 
 

 
}, true); 
 

 
function onInputBlur(event){ 
 
    
 
    // console.log(event); // event 
 
    console.log(event.target.value); 
 
    
 
}

<input type="text"/> 
 
<input type="text"/> 
 
<input type="number"/>

Answer 2

あなたは通常と同じように、簡単にバニラjsのイベントリスナを追加できます。うんざりフォーカス/ぼかしはほとんどのイベント（参照：http://www.quirksmode.org/blog/archives/2008/04/delegating_the.html#link2）と少し違うので、これを実際に動作させるには、コンテナ要素にタブインデックスを追加する必要があります。

document.querySelector(".container").addEventListener("blur", function(e){ 
    if(e.target.tagName == "input"){ 
     // do stuff 
    } 
},false); 

アクションhttps://jsfiddle.net/2n0v43gc/でこれの簡単な例は、（編集：出力を見るために、あなたはあなたのコンソール開いているウィンドウに（F12）が必要です）

Answer 3

function addEvent(a,b,c){ 
document.addEventListener(a,e=> { 
      if (e.target !== e.currentTarget) { 
      if(e.target.id==b){ 
     c(); 
     } 
        } 
        e.stopPropagation(); 
    },false); 
    } 

次のように使用します。

addEvent("click","elem",function(){});