Javascript类&事件处理程序

Javascript classes & event handlers

本文关键字：程序 事件处理 Javascript      更新时间：2023-09-26

我有一个问题与这个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();" />
但不幸的是，这不是正确的解决方案，因为我的目标是，onclick事件应该能够调用另一个类方法，以及。(这些方法还没有创建)。

我怎样才能使这段代码正常工作?

当您使用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()方法将事件处理程序委托给按钮的所有后续实例。

委派事件处理程序的工作示例

这里使用innerHTML似乎破坏了事件侦听器"onclick"。

您可以通过使用文档来避免这种情况。方法创建html元素:

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

就我个人而言，我更喜欢使用jQuery来操作DOM树元素，因为它提供了非常强大的工具。

相关文章：