创建内容HTML时的Javascript调用事件

这是我的代码：

    // main.js
    var component = {
       create: function() {
          var element = document.getElementById('app');
          element.innerHTML = this.render(); 
       },
       render: function() {
          return '<button onclick="this.showMessage">Click me!</button>';
       },
       showMessage: function() {
          alert('Hello world');
       }
    };
    component.create();

//main.js
变量分量={
创建：函数（）{
var元素=document.getElementById（'app'）；
element.innerHTML=this.render（）；
},
render:function（）{
返回“点击我！”；
},
showMessage:function（）{
警报（“你好世界”）；
}
};
component.create（）；

在index.html中

<div id="app"></div>

---

当我运行此代码并单击to按钮时，不会发生任何事情。我想当点击按钮时，浏览器会显示一个对话框，提示“Hello world！”，我该怎么做？有人能帮我吗？非常感谢

有两个问题

首先，您需要将

（）

放在函数之后才能调用该函数，因此它应该是

showMessage（）

其次，在

onclick

处理程序中，

这是您单击的按钮，而不是对象。您需要引用包含对象的变量，
component.showMessage（）


var组件={
创建：函数（）{
var元素=document.getElementById（'app'）；
element.innerHTML=this.render（）；
},
render:function（）{
返回“点击我！”；
},
showMessage:function（）{
警报（“你好世界”）；
}
};
component.create（）
HTML不会在任何特定的JavaScript调用上下文中解析，因此
此
不会引用您的对象；它将引用已单击的DOM元素。换句话说，除非使用全局变量，否则使用
innerHTML
无法（轻松地）完成所要求的操作，并且这里不需要使用全局变量。（此外，您不需要调用
showMessage
函数，只需引用它即可。）

您可以改为使用DOM API创建元素：

var component = {
    create: function () {
        var element = document.getElementById('app');
        element.appendChild(this.render());
    },

    render: function () {
        var btn = document.createElement('button');
        btn.appendChild(document.createTextNode('Click me!'));
        btn.addEventListener('click', this.showMessage.bind(this));
        return btn;
    },  

    showMessage: function () {
        alert('Hello world');
    }   
};  
component.create();


您还可以使用jQuery之类的库来简化DOM操作

var component = {
    create: function () {
        $('#app').append(this.render());
    },

    render: function () {
        return $('<button>')
            .text('Click me!')
            .click(this.showMessage.bind(this));
    },  

    showMessage: function () {
        alert('Hello world');
    }   
};  
component.create();

var组件={
创建：函数（）{
$（'#app'）.append（this.render（））；
},
渲染：函数（）{
返回$（''）
.text（'单击我！'）
。单击（this.showMessage.bind（this））；
},  
showMessage:函数（）{
警报（“你好世界”）；
}   
};  
component.create（）；