javascript - 为新元素添加事件监听器

Question

考虑一个基本的 addEventListener作为

window.onload=function(){
  document.getElementById("alert")
  .addEventListener('click', function(){
     alert("OK");
  }, false);
}

哪里<div id="alert">ALERT</div>在原始文档中不存在，我们通过 AJAX 从外部源调用它。我们如何强制addEventListener为文档中新添加的元素工作(在 window.onload 初始扫描 DOM 元素之后)？

在 jQuery 中，我们通过 live() 来做到这一点或 delegate() ;但是我们如何用 addEventListener 做到这一点在纯 Javascript 中？事实上，我正在寻找相当于 delegate() 的东西, 作为 live()将事件附加到根文档；我希望在 parent 级别监听新事件.

Answer 1

过度简化，与 jQuery 的事件系统相去甚远，但基本思想就在那里。

http://jsfiddle.net/fJzBL/

var div = document.createElement("div"),
    prefix = ["moz","webkit","ms","o"].filter(function(prefix){
         return prefix+"MatchesSelector" in div;
    })[0] + "MatchesSelector";

Element.prototype.addDelegateListener = function( type, selector, fn ) {

    this.addEventListener( type, function(e){
        var target = e.target;

        while( target && target !== this && !target[prefix](selector) ) {
            target = target.parentNode;
        }

        if( target && target !== this ) {
            return fn.call( target, e );
        }

    }, false );
};

你错过了什么:

• 性能优化，每个委托(delegate)监听器都将运行一个完整的循环，因此如果您在单个元素上添加多个，您将运行所有这些循环
• 可写事件对象。所以你无法修复 e.currentTarget 这非常重要，因为 this 通常用作对某些实例的引用
• 没有数据存储实现，所以没有删除处理程序的好方法，除非您每次都手动创建函数
• 只支持冒泡事件，所以没有 "change" 或 "submit" 等你认为对 jQuery 来说理所当然的事情
• 许多其他的我暂时忘记了