addEventListener for new elements

addEventListener for new elements

本文关键字：elements new for addEventListener      更新时间：2023-09-26

将基本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()来做到这一点;但是我们如何在纯Javascript中使用addEventListener来做到这一点呢？事实上，我正在寻找等效于 delegate() ，因为live()事件附加到根文档;我希望在parent层面做一个新的活动。

过于简化，与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通常用作对某些实例的引用
  • 没有数据存储实现，因此没有删除处理程序的好方法，除非您每次都手动创建函数
  • 仅支持冒泡事件，因此没有您认为理所当然的 jQuery "change"或"submit"等
  • 许多其他我现在只是忘记
    • 了
document.addEventListener("DOMNodeInserted", evtNewElement, false);
function evtNewElement(e) {
    try {
        switch(e.target.id) {
            case 'alert': /* addEventListener stuff */ ; break;
            default: /**/
        }
    } catch(ex) {}
}

注意：根据@hemlock的评论，似乎这一系列事件已被弃用。相反，我们必须转向突变观察者。

相关文章：