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。

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

3 个答案: