绑定到动态添加的内容而不使用jquery

Bind to dynamically added content WITHOUT jquery?

本文关键字：jquery 动态 添加 绑定      更新时间：2023-09-26

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

我知道使用jquery可以很容易地绑定到父元素，比如：

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

但我不清楚如何使用vanillaJS来实现这一点，因为addEventListener必须直接应用于元素本身，并且不能指定事件应该传播的父元素？(我想，对吧…？(

以下是我的操作方法。委派很简单。绑定到顶部父级。越近越好更快。例如，如果您想在特定的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"/>

您可以很容易地在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/(编辑：要查看输出，您需要打开控制台(窗口上的F12(

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(){});
相关文章：