Question

我在JavaScript中创建包含html的对象，这些对象基本上是包含动态创建的单词的按钮，并执行使用这些单词的功能。我需要能够在他们创建或之后附加onclick事件处理程序。

var MyClass = function(word) {
    this.word = word;
    this.wordHtml = '<span class="option">' + word + '</span>';

    var wordArea = document.getElementById('wordArea');

    this.displayWordButton = function() {
        wordArea.innerHTML += this.wordHtml;
    };
}

var myObject = new MyClass("sampleWord");
myObject.displayWordbutton();

它正确添加了所有按钮，但我无法点击它们。

我已尝试myObject.onclick = sampleFunction();但似乎在创建对象时激活了click事件，而不是在实际点击时激活了。

我尝试将onclick属性直接添加到类中的span，但它不起作用。

Answer 1

您需要停止使用innerHTML并开始使用对象。毕竟JavaScript的整个设计都是由对象构成的。这里将使用您可以轻松添加事件的对象重新编写代码：

var MyClass = function(word) {
    this.word = word;
    this.wordElement = document.createElement('span');
    this.wordElement.classList.add('option');
    this.wordElement.appendChild(document.createTextNode(word));
    this.wordElement.addEventListener('click', function() {
        alert('hello world');
    });

    var wordArea = document.getElementById('wordArea');

    this.displayWordButton = function() {
        wordArea.appendChild(this.wordElement);
    };
};

var myObject = new MyClass("sampleWord");
myObject.displayWordButton();

Answer 2

<强> onclick

语法：element.onclick = *functionRef*;

-where functionRef 是一个函数 - 通常是在别处声明的函数的名称或函数表达式。

问题：

myObject.onclick = sampleFunction();

将在加载函数后立即调用该函数，因为func()是一个函数调用。

解决方案：

使用对函数的引用，

myObject.onclick = sampleFunction;

或者如果您需要将args传递给点击处理程序，

myObject.onclick = function(){
    sampleFunction(args)
};

Answer 3

这是我考虑如何去做的。

您的代码发生了一些变化，我通过字符串连接创建了元素。我已经添加了在按下displayWordButton时将创建的对象附加到任何元素的功能，以及none的选项，然后需要（并允许）手动插入DOM中的任何位置。我使用了正确的处理程序，而不是内联。

这里＆＃t; tis：

<!DOCTYPE html>
<html>
<head>
<script>
"use strict";
window.addEventListener('load', onDocLoaded, false);
function onDocLoaded(evt)
{
    // this element will have #wordArea as its parent
    var myObject = new MyClass("sampleWord", "wordArea");
    myObject.displayWordButton();

    // these elements may be parented by anyone
    var digits = ["zero", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine"];
    for (var i=0; i<digits.length; i++)
    {
        myObject = new MyClass(digits[i]+" ");
        document.body.appendChild(myObject);
    }
}

function MyClass(word, idOfFixedTargetOrEmpty) 
{
    var mElem = document.createElement('span');
    mElem.originalWord = word;
    mElem.classList.add('option');
    mElem.appendChild( document.createTextNode(word) );
    mElem.addEventListener('click', function(){alert(this.originalWord);}, false);
    mElem.displayWordButton = function()
    {
        if (idOfFixedTargetOrEmpty !== undefined)
            document.getElementById(idOfFixedTargetOrEmpty).appendChild(this);
    };
    return mElem;
}
</script>
<style>
</style>
</head>
<body>
    <div id='wordArea'></div>
</body>
</html>

如何在JavaScript

3 个答案: