Javascript 如何将侦听器附加到克隆元素?
我目前正在学习DOMs,当两个或多个克隆元素获得相同的事件侦听器时,我遇到了这个问题Javascript 如何将侦听器附加到克隆元素?,javascript,dom,javascript-events,Javascript,Dom,Javascript Events,我目前正在学习DOMs,当两个或多个克隆元素获得相同的事件侦听器时,我遇到了这个问题 case 116: var myList = document.querySelectorAll(".selected"); for(var i=0; i<myList.length;i++) { var node=myList[i].cloneNode(true);
case 116:
var myList = document.querySelectorAll(".selected");
for(var i=0; i<myList.length;i++)
{
var node=myList[i].cloneNode(true);
node.style.top=Math.random()*window.innerHeight-(node.style.height/2)+"px";
node.style.left=Math.random()*window.innerWidth-(node.style.width/2)+"px";
node.addEventListener("click",function(e){
node.classList.toggle("selected");
console.log(e);
});
myList[i].parentNode.appendChild(node);
}
break;
案例116:
var myList=document.querySelectorAll(“.selected”);
对于(var i=0;i我认为这是一个范围问题。您的事件处理程序正在引用节点
,但在循环结束时,节点
将指向创建的最后一个方块。您可以使用闭包为每个事件处理程序存储节点
的值:
(function(node) {
// 'node' defined here is in it's own scope, so won't be affected by the changes
// made to the 'node' variable defined in the outer scope of the loop.
node.addEventListener("click",function(e){
node.classList.toggle("selected");
console.log(e);
});
})(node);
但更好的解决方案可能是在事件处理程序中使用this
:
node.addEventListener("click",function(e){
// within an event handler, 'this' references the event's target element
this.classList.toggle("selected");
console.log(e);
});
初始状态是什么?是否只有一个框,并且框2、3和4是使用此代码添加的?通过此代码迭代多少次以获得可见效果?初始状态是一个框。正确。两次迭代生成上述图片。