addEventListener用于新元素

Question

考虑一个基本addEventListener的

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

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

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

你错过了这个:

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