javascript addEventListener 不添加事件

Question

我有如下代码。我制作了名为“Car”的Javascript类，并在构造函数中将事件添加到html“”标签。但是这个事件不能触发。

有人可以帮我吗？

谢谢， A.

function Car(model, brand) {

  this.model = model;
  this.brand = brand;

  document.getElementById('button').addEventListener('onclick', this.info);
}

// method
Car.prototype.info = function() {
  alert("It is " + this.model);
};

// define cariable
var car = new Car("RX7", "Mazda");

// Invoke method in html
//car.info();

// second way
window.onload = function() {
  var car = new Car("RX7", "Mazda");
};

<button id="button">Click me</button>

Answer 1

事件应该是click 而不是onclick。

要绑定上下文，请在事件处理函数引用上使用bind(this)。

function Car(model, brand) {
  this.model = model;
  this.brand = brand;

  document.getElementById('button').addEventListener('click', this.info.bind(this));
  //                                                 ^^^^^^^            ^^^^^^^^^^
}

// method
Car.prototype.info = function() {
  alert("It is " + this.model);
};

// define cariable
var car = new Car("RX7", "Mazda");

// Invoke method in html
//car.info();

// second way
window.onload = function() {
  var car = new Car("RX7", "Mazda");
};

<button id="button">Click me</button>

---

我希望这只是为了演示目的，如果您想在实际项目中使用它，请使用以下代码。

function Car(model, brand) {
  this.model = model;
  this.brand = brand;
}

// method
Car.prototype.info = function() {
  alert("It is " + this.model);
};

// define cariable
var car = new Car("RX7", "Mazda");

document.addEventListener('DOMContentLoaded', function() {
  var car = new Car("RX7", "Mazda");
  document.getElementById('button').addEventListener('click', car.info.bind(car));
});

<button id="button">Click</button>

Answer 2

@Tushar 非常感谢您。如果没有你的帮助，我不会这样做 :-)

对于希望将所有内容“更多地”放在一个类中的人，我在@Tushar 代码中准备了一些更改。

但我不知道它是否在任何编程标准中都是一致的。

function Car(model, brand) {
  this.model = model;
  this.brand = brand;
  
  document.getElementById('button').addEventListener('click', this.info.bind(this));
}

// method
Car.prototype.info = function() {
  alert("It is " + this.model);
};


document.addEventListener('DOMContentLoaded', function() {
  var car = new Car("RX7", "Mazda");
});

<button id="button">Click</button>