Question

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

显然，使用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的帖子和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时，＆＃34;也会捕获＆＃34;。一个例子：

＆＃13;

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);

＆＃13;

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

＆＃13;

<ul id="mybuttonlist">
  <li><button name="createnewbutton">Create new button</button></li>
</ul>

＆＃13;

在这个例子中，我在<ul>上有一个关于点击事件的事件监听器。因此，所有子元素都会发生事件。从我创建的简单事件处理程序中，您可以看到添加更多逻辑，更多按钮（具有不同或重复名称），锚点等等很容易。

全力以赴，你可以将eventlistener添加到document而不是list元素，捕获页面上的所有点击事件，然后处理事件处理程序中的click事件。

Answer 4

其他解决方案有点复杂...

document.addEventListener('click', e => {
   if (e.target.closest('.element')) {
       // .element has been clicked
   }
}

如果您需要支持Internet Explorer或旧版浏览器，请使用split。

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

4 个答案: