如何访问addEventListener内部创建的对象？按钮触发对象获取异常解决

问题根源 #

你代码里的falseObject一直输出undefined，核心问题是查找时机错误：

• CheckArrayModule初始化时，立刻执行了MainArrayModule.mainArray.find(...)查找status为false的对象，此时数组里只有初始的true对象，所以falseObject直接被赋值成undefined。
• 后续点击按钮添加false对象后，falseObject变量不会自动重新查找更新——它的值在模块初始化时就固定死了。

修复方案 #

把查找对象的逻辑移到按钮点击的回调函数内部，每次点击按钮时才去数组里实时查找，而不是提前把结果存在变量里。

修改后的完整代码 #

<button id="btn-one">
  Add 'false' object
</button>
<button id="btn-two">
  Check for 'true' object
</button>
<button id="btn-three">
  Check for 'false' object
</button>

<style>
body {
  display: flex;
  height: 100vh;
  justify-content: space-evenly;
  align-items: center;
}
</style>

<script>
const button1 = document.querySelector('#btn-one');
const button2 = document.querySelector('#btn-two');
const button3 = document.querySelector('#btn-three');

const MainArrayModule = (() => {
  let mainArray = [];

  function MainArrayObjCreator(name, status) {
    return {name, status};
  }

  function createMainArrayObj() {
    let mainObj = MainArrayObjCreator('main', true);
    mainArray.push(mainObj);

    console.log(mainArray);

    button1.addEventListener('click', () => {
      let otherObj = MainArrayObjCreator('other', false);
      mainArray.push(otherObj);
      console.log(mainArray);
    });
  }

  return {mainArray, createMainArrayObj};
})();

const CheckArrayModule = (() => {
  MainArrayModule.createMainArrayObj();
  
  function logObject() {
    button2.addEventListener('click', () => {
      // 每次点击时实时查找true对象
      let trueObject = MainArrayModule.mainArray.find(object => object.status === true);
      console.log(trueObject);
    });

    button3.addEventListener('click', () => {
      // 每次点击时实时查找false对象
      let falseObject = MainArrayModule.mainArray.find(object => object.status === false);
      console.log(falseObject);
    });
  }

  return {logObject};
})();


const runFunctions = (() => {
  CheckArrayModule.logObject();
})();
</script>

额外优化建议（可选） #

如果想让代码更模块化，避免重复写查找逻辑，可以给MainArrayModule新增两个获取方法，封装查找逻辑：

const MainArrayModule = (() => {
  let mainArray = [];

  function MainArrayObjCreator(name, status) {
    return {name, status};
  }

  function createMainArrayObj() {
    let mainObj = MainArrayObjCreator('main', true);
    mainArray.push(mainObj);

    console.log(mainArray);

    button1.addEventListener('click', () => {
      let otherObj = MainArrayObjCreator('other', false);
      mainArray.push(otherObj);
      console.log(mainArray);
    });
  }

  // 新增封装好的查找方法
  function getTrueObject() {
    return mainArray.find(object => object.status === true);
  }

  function getFalseObject() {
    return mainArray.find(object => object.status === false);
  }

  return {mainArray, createMainArrayObj, getTrueObject, getFalseObject};
})();

之后在点击回调里直接调用即可：

button2.addEventListener('click', () => {
  console.log(MainArrayModule.getTrueObject());
});

button3.addEventListener('click', () => {
  console.log(MainArrayModule.getFalseObject());
});

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