如何监听对象内部的事件？我的事件绑定代码是否正确？

首先看你写的代码，有几个语法和逻辑上的问题：

• 对象内部的属性之间应该用逗号分隔，你在getVariables里的button1结尾用了分号，这会直接导致语法错误。
• eventHandler作为对象属性直接执行addEventListener是不合理的：一方面，对象初始化时这段代码就会运行，可能此时DOM元素还没加载完成（比如你的JS代码写在<head>里），getVariables.button1会是null；另一方面，这里的this并不指向object1，而是指向全局的window，所以this.alertSomething会找不到这个方法。
• 在对象初始化阶段，你没办法直接通过getVariables.button1访问到这个属性，因为此时对象还没完全创建好。

修正后的方案 #

我们可以把事件监听的逻辑放到一个方法里，等DOM加载完成后再调用这个方法，同时正确处理this的指向：

// 先创建对象结构
var object1 = {
  getVariables: {
    button1: null // 先初始化占位，后续再赋值DOM元素
  },
  // 封装初始化DOM和事件监听的方法
  init: function() {
    this.getVariables.button1 = document.getElementById('button');
    // 绑定事件，用bind确保alertSomething里的this指向object1（如果方法里需要访问对象属性的话）
    this.getVariables.button1.addEventListener('click', this.alertSomething.bind(this));
  },
  alertSomething: function() {
    alert('Cool');
  }
};

// 等DOM完全加载后再执行初始化
document.addEventListener('DOMContentLoaded', function() {
  object1.init();
});

为什么这样改？ #

1. 把DOM元素的获取和事件监听放到init方法里，确保只有当DOM完全加载后才执行，避免获取到null。
2. 使用bind(this)来保证alertSomething被调用时，this指向object1（如果你的方法里需要访问对象的其他属性，这一点很关键；如果只是单纯弹出提示，其实可以不用bind，但养成这个习惯能避免很多指向问题）。
3. 修正了对象属性的分隔符问题，语法符合JS规范。

另外，如果你的JS代码是写在HTML底部（</body>标签之前），那也可以直接调用object1.init()，不需要监听DOMContentLoaded，因为此时DOM已经加载完成了。

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