2

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

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

输出：

你好

你好

你好

现在我想动态附加事件 say onmouseover，onmouseout这样每当我将光标移动到特定div元素 say或时div1，相应的部分应该改变颜色（比如蓝色），当光标移出时它应该返回到原来的颜色。div2div3div

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

4

3 回答 3

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 = "";
  };
}
于 2012-11-18T17:07:04.177 回答
0

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

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/

于 2012-11-18T17:08:12.943 回答
0

如果您的元素是动态创建的，那么使用事件委托并将事件侦听器附加到父元素而不是您动态创建的每个元素可能会更好。这样，您的侦听器即使对附加后创建的元素也有效。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。

于 2012-11-18T17:19:15.130 回答