javascript - 绑定(bind)到动态添加的内容而不使用 jquery？

Question

如果我动态向页面添加表单(无论是通过 AJAX 还是其他 JS)，如何在页面加载的这些元素存在之前将事件监听器添加到它们？

我知道使用 jquery 绑定(bind)到父元素相当容易，如下所示:

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

但我不清楚如何使用 vanilla JS 执行此操作，因为 addEventListener 必须直接应用于元素本身，并且无法指定事件应传播的父元素？ (我想，对吧..？)

Answer 1

我会这样做。委派很简单。绑定(bind)到顶级父级。越近越好、越快。例如，如果您想在特定的 div 中委托(delegate)事件，那就更好了；避免冲突。将 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"/>