Question

我对此很新，它反映在我标题的方式上。

以下示例可以更好地说明我的问题。

我有一个名为model的对象。

var Modal = new function(){
    this.id = 'modal_id';
    this.title = 'Modal title';
    this.content = 'Modal content';
    this.display = function(){
        return '<div class="popup">' + this.title + ' ' + this.content + '<br><button id="button"></div>';
    };
}

使用此对象进行调用，例如：

Modal.title = 'My New title';
Modal.content = 'My New content';
Modal.display();

但是，假设我想为按钮触发不同动作的事件，如何在单击按钮时调用对象时定义函数？

$('#button').on('click', function(){
    // different action here
});

Answer 1

要使这项工作做得最好，你应该做两件事。

传入要分配的功能

返回一个真正的DOM元素，而不是搞乱从字符串构建HTML。

var Modal = function(onClickHandler){
  this.id = 'modal_id';
  this.title = 'Modal title';
  this.content = 'Modal content';
  this.display = function(){
      var div = document.createElement("div");
      div.className = "popup";
      div.appendChild(document.createTextNode(this.title));
      div.appendChild(document.createTextNode(" "));
      div.appendChild(document.createTextNode(this.content));
      div.appendChild(document.createElement("br");

      var button = document.createElement("button");
      // Assign a unique ID here if you need.

      // You could also use addEventListener as well
      button.onclick = onClickHandler;
      button.appendChild(document.createTextNode("CLICK!"));


      div.appendChild(button);
      return div;
  };
}

Modal.prototype.close = function(){
  console.log("Close it");
  console.log(this);
}


var newDiv = new Modal(function() {
  alert("I was clicked");
});

在面向对象的javascript中将函数作为参数传递

1 个答案: