如何通过鼠标点击事件调用JavaScript对象专属函数？

你的核心问题是事件回调里的this指向不对：当把add_one直接作为点击监听函数时，函数里的this会指向触发点击的按钮元素，而不是你的item_for_tests对象，所以this.test_value根本不是你对象里的那个数值，自然无法递增。

下面给你几种简单的解决方式：

方法1：用bind()强制绑定this #

bind()可以创建一个新函数，把函数内部的this固定为你传入的对象。修改set_add_btn里的监听绑定代码：

this.add_btn.addEventListener("click", elt.add_one.bind(elt), false);

完整修正后的代码：

<!DOCTYPE html>
<html>
<body>
  <div id="Score2" class="Resultat"> 0 </div>
  <button id="addbtn">+</button>

  <script>
    const item_manager = {
      test_value: 0,
      add_btn: null,

      set_add_btn: function(elt, id) {
        this.add_btn = document.getElementById(id);
        // 绑定this到elt对象
        this.add_btn.addEventListener("click", elt.add_one.bind(elt), false);
      },
      add_one: function() {
        this.test_value += 1;
        console.log(this.test_value);
        console.log(this); // 现在this指向item_for_tests
      }
    };
    const item_for_tests = Object.create(item_manager)
    item_for_tests.set_add_btn(item_for_tests, "addbtn");
  </script>
</body>
</html>

方法2：用箭头函数包裹回调 #

箭头函数不会创建自己的this，它会继承外层作用域的this，所以可以直接用箭头函数调用对象的方法：

this.add_btn.addEventListener("click", () => elt.add_one(), false);

方法3：保存对象引用到变量 #

在set_add_btn里把对象本身存到一个变量（比如self），然后在普通函数回调里用这个变量调用方法：

set_add_btn: function(id) {
  const self = this; // 保存当前对象的引用
  this.add_btn = document.getElementById(id);
  this.add_btn.addEventListener("click", function() {
    self.add_one(); // 用self调用方法，确保this指向对象
  }, false);
}
// 调用时不需要再传对象本身
item_for_tests.set_add_btn("addbtn");

为什么原来的代码不行？ #

当你直接把elt.add_one传给addEventListener，这个函数会被当作独立的回调执行，JavaScript默认会把事件触发的DOM元素（也就是按钮）设为函数内部的this，所以你在add_one里操作的this.test_value其实是按钮元素的属性，和你的对象没关系。

内容的提问来源于stack exchange，提问作者youkoal