javascript - 创建了多个监听器，但只有最后一个响应

Question

我正在一堆动态生成的 LI 元素上创建多个单击事件。但是，当我单击其中任何一个时，只会调度最后一个 li 的事件。

这有点难以解释，但这里有一个 fiddle 可以让事情变得更清楚:

http://jsfiddle.net/5uecp/2/

...以及代码:

// Parent Class
function Parent(id, children) {
  this.id = id;
  this.children = children;
  this.init();
}

Parent.prototype = {

  init: function () {
    this.addEventHanlders()
  },

  addEventHanlders: function () {

    addEventListener('childEvent', function (e) {
      e.stopPropagation()
      // console.log('childEvent', e.title)
    });

  },

  render: function () {

    var ul = document.createElement('ul');
    ul.setAttribute('id', this.id)

    for (var i = this.children.length - 1; i >= 0; i--) {
      ul.appendChild(this.children[i].render());
    };

    document.body.appendChild(ul);
  }
}

// Child Class
function Child(title) {
  this.title = title;
  this.li = null
  this.event = document.createEvent("Event");

};

Child.prototype = {

  render: function () {
    _this = this;
    this.li = document.createElement('li');
    text = document.createTextNode(this.title);
    a = document.createElement('a');
    a.setAttribute('href', '#');
    a.appendChild(text);
    this.li.appendChild(a);
    this.li.setAttribute('class', 'child');

    this.li.addEventListener('click', this.clickEventHandler, true);

    return this.li;
  },

  clickEventHandler: function (e) {
    e.preventDefault();
    _this.changeColor();
    _this.fireEvent();
    e.target.removeEventListener('click', this.clickEventHandler)
  },

  changeColor: function (color) {
    color = color || 'red';
    this.li.style.backgroundColor = color;

  },

  fireEvent: function () {
    console.log('fireEvent', this.title);
    this.event.initEvent("childEvent", true, true);
    this.event.title = this.title;
    document.dispatchEvent(this.event);
  }
};

// Initialize
children = [new Child("Child 1"), new Child("Child 2"), new Child("Child 3"), new Child("Child 4"), new Child("Child 5")]
parent = new Parent("parent", children)

$(function () {
  parent.render();
});

Answer 1

问题是您将 this 保存到全局变量 _this 中，该变量可以从任何地方访问。这样，您就获得了 _this 中最后一个 Child 实例的链接。

查看我的示例:http://jsfiddle.net/5uecp/4/