动态 div 元素并将事件与这些 div 相关联

Question

我正在使用JavaScript动态创建多个div元素。以下是我使用的代码：

for(i=0;i<3;i++)
{
  var d1 = document.createElement('div');
  d1.id = "div" + i;
  var l1 = document.createElement('label');
  l1.innerHtml = "Hello";
  d1.appendChild(l1);
  var line1 = document.createElement('hr');
  d1.appendChild(line1);
  document.body.appendChild(d1);    
}

输出：

你好

---

你好

---

你好

---

现在我想动态附加事件 比如 onmouseover 和 onmouseout，以便每当我将光标移动到特定的div元素上时，比如说div1、div2或div3，相应的div部分应该改变颜色（比如蓝色），当光标移出时，它应该恢复到原来的颜色。

我

尝试过锻炼，但我无法检索我动态创建的div id。

Answer 1

您无需按 ID 选择。您已经有了该元素，因此请继续向其添加处理程序。

for(i=0;i<3;i++) {
  var d1 = document.createElement('div');
  d1.id = "div" + i;
  var l1 = document.createElement('label');
  l1.innerHtml = "Hello";
  d1.appendChild(l1);
  var line1 = document.createElement('hr');
  d1.appendChild(line1);
  document.body.appendChild(d1);
  d1.onmouseover = function() {
     this.style.color = "#00F";
  };
  d1.onmouseout = function() {
     this.style.color = "";
  };
}

Answer 2

只需构建您的处理程序，然后在循环中分配它们：

var mouseover = function() {
        this.style.backgroundColor = '#AAF';
    },
    mouseout = function() {
        this.style.backgroundColor = '';
    };
for (i = 0; i < 3; i++) {
    var d1 = document.createElement('div'),
        l1 = document.createElement('label'),
        line1 = document.createElement('hr');
    d1.id = "div" + i;
    l1.innerHtml = "Hello";
    d1.appendChild(l1);
    d1.appendChild(line1);
    d1.onmouseover = mouseover;
    d1.onmouseout = mouseout;
    document.body.appendChild(d1);
}​

演示位置：http://jsfiddle.net/vfVCm/

Answer 3

如果元素是动态创建的，则最好使用事件委派并将事件侦听器附加到父元素，而不是动态创建的每个元素。这样，您的侦听器甚至可以用于附加后创建的元素。DOM 事件冒泡，事件的实际目标可用作event.target。下面是一个示例：

<div id="parent">
  <p id="event1">A</p>
  <p id="event2">B</p>
  <p id="event3">C</p>
</div>
// call on DOMContentLoaded
document.getElementById("parent").addEventListener("click", function(e) {
  if(e.target && e.target.nodeName.toLowerCase() == "p") {
    alert("Clicked element " + e.target.id);
  }
});

参见 jsfiddle。