我有一个javascript代码,可以创建一个随机的5个图像,将它分配给div节点,然后克隆该节点并填充另一个div节点。
var numberOffaces = 5;
var theLeftSide = document.getElementById("leftSide");
var theRightSide = document.getElementById("rightSide");
var theBody = document.getElementsByTagName("body")[0];
function generateFaces() {
for (var i = 0; i < numberOffaces; i++) {
var imgNode = document.createElement("IMG");
imgNode.src = "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";
imgNode.style.top = Math.floor(Math.random() * 400) + "px";
imgNode.style.left = Math.floor(Math.random() * 400) + "px";
theLeftSide.appendChild(imgNode);
}
var leftSideImages = theLeftSide.cloneNode(true);
leftSideImages.removeChild(leftSideImages.lastChild);
theRightSide.appendChild(leftSideImages);
}
//add event handler
theLeftSide.lastChild.onclick =
function nextLevel(event) {
event.stopPropagation();
numberOfFaces += 5;
generateFaces();
};
当我运行此代码时,我得到onclick = null,并且代码无法按预期工作,我是javascript的新手,并且不知道在哪里放置我的事件处理程序。 我需要做的是,每当我点击div的最后一个子节点时,我就会触发onclick事件。
答案 0 :(得分:1)
克隆节点会复制其所有属性及其值,包括内部(内联)侦听器。它不会复制使用addEventListener()添加的事件侦听器或分配给元素属性的事件侦听器。 (例如node.onclick = fn) [Ref]
每次使用元素时都使用onclick
内联句柄(attribute
)或使用onclick
。
var numberOffaces = 5;
var theLeftSide = document.getElementById("leftSide");
var theRightSide = document.getElementById("rightSide");
var theBody = document.getElementsByTagName("body")[0];
function generateFaces() {
for (var i = 0; i < numberOffaces; i++) {
var imgNode = document.createElement("IMG");
imgNode.src = "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";
imgNode.style.top = Math.floor(Math.random() * 400) + "px";
imgNode.style.left = Math.floor(Math.random() * 400) + "px";
theLeftSide.appendChild(imgNode);
}
var leftSideImages = theLeftSide.cloneNode(true);
leftSideImages.removeChild(leftSideImages.lastChild);
theRightSide.appendChild(leftSideImages);
doAddEvent();
}
//add event handler
function doAddEvent() {
theLeftSide.lastChild.onclick =
function nextLevel(event) {
event.stopPropagation();
numberOfFaces += 5;
generateFaces();
};
}
doAddEvent();
&#13;
根据adeneo的建议,Event Delegation
会有所帮助! 事件委派允许您避免向特定节点添加事件侦听器;相反,事件监听器被添加到一个父级。该事件监听器分析冒泡事件以找到子元素的匹配。