仅注册事件一次

Question

我写了一个小脚本来加载带有ajax的页面。应选择具有 ajax-pls - 类的所有链接。

添加eventlistener后，我删除了该类，因为我每次都需要解析包含的 html....右？

(function() {
    function addEvent(element, evnt, funct){
    if (element.attachEvent)
        return element.attachEvent('on'+evnt, funct);
    else
        return element.addEventListener(evnt, funct, false);
    }
  
  var link_click = function (e) {
      e.preventDefault();
      if (this.getAttribute("href") == 'test1.html') {
        var content = document.getElementById('content');
        content.innerHTML = "<a href='test3.html' class='ajax-pls'>Test3</a>";
        register_listeners();
      } else {
        alert(this);
      }
    };
  
  function register_listeners() {
     
    var atags = document.querySelectorAll('a.ajax-pls');
    for (i = 0; i < atags.length; i++) {
      addEvent(atags[i], 'click', link_click);
      atags[i].classList.remove("ajax-pls");
    }
  }
  
  register_listeners();
})(); 

这只是测试代码，但我是否需要对类进行操作，或者我可以在每次包含后调用register_listeners()？

Answer 1

是的，否则您需要删除类，addEvent将多次向每个链接添加相同的处理程序。

但是，您可以使用事件冒泡来绕过此问题。

如果将处理程序添加到每个链接的最近公共祖先（在最坏的情况下，它将是document.body）。它将捕获其中每个元素上的每个点击事件。您需要通过选中 event.target 来过滤它们。