用原生Javascript实现jQuery的“实时”活页夹
我想弄清楚如何将一个事件绑定到动态创建的元素。 即使在它被破坏和再生之后，我也需要这个事件坚持这个元素。
很明显，jQuery的live函数很简单，但是它们看起来像用原生Javascript实现的那样？
这里有一个简单的例子：
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);
}
});
}
除了安德鲁的文章和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'); });
将事件动态绑定到特定元素的替代方案可能是全局事件侦听器。 因此，每当您更新DOM元素时，该元素上的另一个新元素事件也会“捕获”。 一个例子：
var mybuttonlist = document.getElementById('mybuttonlist');
mybuttonlist.addEventListener('click', e=>{
if(e.target.nodeName == 'BUTTON'){
switch(e.target.name){
case 'createnewbutton':
mybuttonlist.innerHTML += '<li><button name="createnewbutton">Create new button</button></li>';
break;
}
}
}, false);ul {
list-style: none;
padding: 0;
margin: 0;
}<ul id="mybuttonlist">
<li><button name="createnewbutton">Create new button</button></li>
</ul>上一篇: Implementing jQuery's "live" binder with native Javascript