创建元素并使用继承的原型函数在加载时调用，而不是在单击时调用

Prototype function creating elements and using inheritance invoked on load instead of on click

本文关键字：调用 加载 单击 函数 元素 继承 原型 创建      更新时间：2023-09-26

如果以下问题很愚蠢，我很抱歉，这是我第一次尝试OO JS，它超越了非常基本的教程。如果我理解了以下问题，这将构成一种个人突破：-）

基本上，我想在点击时创建一个元素——一个带有背景图片的div，并将其附加到按钮上。（稍后我想创建一个额外的按钮，用另一个按钮取代上面的图片）。图片存储在一个数组中。

如果我用注释好的第37-57行运行这个函数，一切都可以，但我不想每次都写那个函数来创建下一个元素。

因此，我创建了函数对象"Nation"（第4行到第30行），并希望在调用时传递两个参数，"land"（国家名称）和"imageIndex"（数组中图片的索引）。

问题从这里开始。我想点击（行）调用新国家，但它是直接在页面加载时执行的。如何修复？

我现在还没有通过第二个论点，因为我不知道怎么做，所以我只是用第13行来设置BG图片。但目标是通过向函数传递第二个参数来设置BG图片。

var croats = new Nation("croatia");
document.getElementById("newDom")
.addEventListener("click", croats.create("croatia"));

这就是事件处理，代码在这里：

http://codepen.io/damianocel/pen/gPggLB

非常感谢。

您应该简单地传递一个函数作为addEventListener:的第二个参数

document.getElementById("newDom").addEventListener("click", function () {
  croats.create("croatia")
});

例如，请参见：https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Example

由于您的代码当前已设置，它在附加侦听器时执行croats.create()，而不是存储对事件发生时要执行的函数（称为"listener"或"callback"）的引用。

更新的CodePen：http://codepen.io/anon/pen/KVqgdP

相关文章：