仅注册一次事件

Question

I wrote a small script to load pages with ajax. All links that have the ajax-pls- class, should be selected.

After I add the eventlistener I remove the class, because I need to parse the included html every time.... right?

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

It is just test-code. But do I need to do the trick with the class or could I just call register_listeners() after every include?

Answer 1

Yes you need to remove classes otherwise, addEvent will add same handler several times to each link.

But you can bypass this issue by using event bubbling.

If you add handler to nearest common ancestor of every link (in worst case it would be document.body). It will catch every click event on every elements inside it. You will need to filter them by checking event.target.