使用本机Javascript实现jQuery的“实时”绑定器

我试图弄清楚如何将事件绑定到动态创建的元素。 我需要事件在元素被销毁和重新生成后仍然存在。

显然，使用jQuery的live函数很容易，但是它们看起来像是用原生Javascript实现的？

Answer 1

这是一个简单的例子：

 function live(eventType, elementId, cb) { document.addEventListener(eventType, function (event) { if (event.target.id === elementId) { cb.call(event.target, event); } }); } live("click", "test", function (event) { alert(this.id); }); 

基本的想法是，您希望将事件处理程序附加到文档，并让事件冒泡到DOM。 然后，检查event.target属性以查看它是否与所需条件匹配（在这种情况下，只是元素的id ）。

编辑：

@shabunc发现我的解决方案存在一个非常大的问题 – 无法正确检测子元素上的事件。 解决此问题的一种方法是查看祖先元素以查看是否具有指定的id ：

 function live (eventType, elementId, cb) { document.addEventListener(eventType, function (event) { var el = event.target , found; while (el && !(found = el.id === elementId)) { el = el.parentElement; } if (found) { cb.call(el, event); } }); } 

Answer 2

除了Andrew的post和Binyamin的评论，也许这是一个选项：

有了这个，您可以使用’nav .item a’作为选择器。 基于安德鲁的代码。

 function live (eventType, elementQuerySelector, cb) { document.addEventListener(eventType, function (event) { var qs = document.querySelectorAll(elementQuerySelector); if (qs) { var el = event.target, index = -1; while (el && ((index = Array.prototype.indexOf.call(qs, el)) === -1)) { el = el.parentElement; } if (index > -1) { cb.call(el, event); } } }); } live('click', 'nav .aap a', function(event) { console.log(event); alert('clicked'); }); 

Answer 3

将事件动态绑定到特定元素的替代方法可以是全局事件侦听器。 因此，每次使用该元素上的另一个新元素事件更新DOM时，也会“捕获”。 一个例子：

 var mybuttonlist = document.getElementById('mybuttonlist'); mybuttonlist.addEventListener('click', e=>{ if(e.target.nodeName == 'BUTTON'){ switch(e.target.name){ case 'createnewbutton': mybuttonlist.innerHTML += '
Create new button
'; break; } } }, false); 

 ul { list-style: none; padding: 0; margin: 0; } 

 
 
Create new button