在 javascript 中添加事件处理程序的位置

Where to add an event handler in javascript?

本文关键字：程序 位置 事件处理 添加 javascript      更新时间：2023-09-26

我有一个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 事件。

克隆节点会复制其所有属性及其值，包括内部(内联(侦听器。它不会复制使用 addEventListener(( 添加的事件侦听器或分配给元素属性的事件侦听器。(例如 node.onclick = fn( [参考]

要么使用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();

正如阿德尼奥所建议的那样，Event Delegation会有所帮助！事件委派允许您避免将事件侦听器添加到特定节点; 相反，事件侦听器将添加到一个父级。 该事件侦听器分析冒泡事件以查找子元素的匹配项。

相关文章：