Question

如果我正在动态地向我的页面添加表单（无论是通过AJAX还是其他JS），如何在页面加载之前向这些元素添加事件侦听器？

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

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

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

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

您可以很容易地在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(){});

绑定动态添加的内容没有jquery？

3 个答案: