DOM 内容加载后附加的元素中的事件监听器

我需要听一个“改变”事件<select>但这仅适用于第一次选择，有一个按钮可以添加更多<select> to the document，所以我需要检查是否有<select>改变了，我正在做这样的事情：

document.addEventListener('DOMContentLoaded', function() {
    var selects = document.getElementsByClassName('select');
    for(var i=0;i < selects.length;i++) {
        selects[0].addEventListener('change', function() {
             // do something here...
        }, false);
    }
}, flase);

但这仅在以下情况下执行DOMContentLoaded如果我在外部执行它document.addEventListener它不执行。

附：我用纯 JS 来做这件事，因为与jQuery我可以用纯 JS 更好地控制我的脚本。

考虑到这些节点已经存在于 DOM 中，将事件直接附加到 DOM 节点就可以了。

但是，根据您的案例要求，有一种更好的方法，允许将给定事件的处理程序绑定到当前节点和将来添加的节点。

您可以利用事件冒泡：附加到节点的事件会为节点本身及其所有父节点触发。在这里，我使用 body 元素作为父节点，但您可以在任何元素上设置侦听器，因为它是当前和未来选择元素的父元素：

document.body.addEventListener("change", function(e) {
    console.log(e.target);
}

查看此示例以获得更好的想法：http://jsfiddle.net/6HqqA/.

这是事件冒泡概念的一个很好的解释：http://davidwalsh.name/event-delegate.