綁定到動態添加的內容而無需jquery？

Question

如果我要動態地向頁面添加表單（無論是通過AJAX還是其他JS），如何在頁面加載時將事件監聽器添加到這些元素上呢？

我知道用jquery綁定到父元素相當容易，就像這樣：

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

但是我不清楚如何使用香草JS完成此操作，因為addEventListener必須直接應用於元素本身，並且無法指定事件應針對其傳播的父元素？ （我想是吧..？）

Answer 1

這就是我要做的。 委托很簡單。 綁定到頂級父項。 距離越近，越好越快。 例如，如果要在特定的div委派事件，那會更好； 避免沖突。 將event.target與您要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

您可以像平時一樣輕​​松地在vanilla 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/ （編輯：要查看輸出，您需要打開控制台（Windows上為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(){});