Javascript類和事件處理程序

Question

我對此JavaScript代碼有疑問：

function MyClass() {
    var id_nr = Math.ceil(Math.random() * 999999);
    this.button_id = 'button_' + id_nr;
}


MyClass.prototype = {
    createButton: function() {
        var msg = 'Button \'' + this.button_id + '\' was clicked';

        var my_button = (
            '<input type="button" id="'
            + this.button_id
            + '" value="Click Me" /\>'
        );

        document.body.innerHTML += '<div>' + my_button + '</div>';
        document.getElementById(this.button_id).onclick = function() { alert(msg); }
    }
};


window.onload = function() {
    var s = new MyClass();
    s.createButton();
};

是的，此當前代碼可以正常工作。 但是，當我添加多個MyClass對象時，就會出現問題：

window.onload = function() {
    var s = new MyClass();
    s.createButton();

    var w = new MyClass();
    w.createButton();

    /* ...and many other buttons */

};

由於某些原因，僅當我單擊最后創建的按鈕時，才會觸發onclick事件。 而且我不知道為什么。

一種解決方法可能是這樣的：

<input type="button" onclick="javascript:doSomeThing();" />

但是不幸的是，這不是正確的解決方案，因為我的目標是onclik事件也應該能夠調用另一個類方法。 （這些方法尚未創建）。

如何使此代碼正常工作？ 任何幫助都將受到贊賞。

Answer 1

當您使用innerHTML ，內容將從DOM中剝離，然后再次讀取和分析，從而破壞了您可能添加的所有過去的事件偵聽器。

如果要在普通JS中執行此操作，請考慮使用appendChild() ，此外，我建議使用addEventListener() 。 您的代碼將如下所示：

var my_button   = document.createElement('input');
my_button.type  = 'button';
my_button.id    = this.button_id;
my_button.value = 'Click me';

document.body.appendChild(my_button);
my_button.addEventListener('click', function () { alert (msg) });

使用香草Javascript的工作示例

如果您打算使用一些jQuery，則實現起來會容易得多。 您的方法如下所示：

var my_button = $('<input>')
                .prop('type', 'button')
                .prop('id',   this.button_id)
                .val('Click Me')
                .on('click', function () { alert(msg) } );

$('body').append(my_button)

jQuery工作示例

或者，您可以使用jQuery.on()方法將事件處理程序委派給按鈕的所有后續實例。

具有委托事件處理程序的工作示例

Answer 2

在這里使用innerHTML似乎破壞了事件監聽器“ onclick”。

您可以通過使用document.createElement方法創建html元素來避免這種情況：

var but = document.createElement("input");
but.type = "button";
but.id = this.button_id;
but.value = "Click me";

document.body.appendChild(but);

就個人而言，我更喜歡使用jQuery來操縱DOM樹元素，因為它為此提供了非常強大的工具。