.onchange = () => {};触发，addEventListener('change', () => {});才不是？答案

【问题标题】：.onchange = () => {}; fires, addEventListener('change', () => {}); does not?.onchange = () => {};触发，addEventListener('change', () => {});才不是？
【发布时间】：2018-11-29 22:06:26
【问题描述】：

先定义

selectedOptionElement = document.getElementsByTagName('select')[0];

我很难理解为什么

.onchange = () => {};

触发而

addEventListener('change', () => {});

没有？

同样为什么它会起作用

selectedOptionElement = document.getElementsByTagName('select')[0];

但不是

selectedOptionElement = document.getElementById('selectBoxIdName')[0];

在 Chrome 66.0.3359.181 中测试

try {
  selectedOptionElement = document.getElementById('projectsSelectBox');
  selectedOptionElement.onchange = () => {
  // selectedOptionElement.addEventListener('change', () => {
    var projectsSelectBox, selectedOption, projectType1, projectType2;
    projectsSelectBox = document.getElementById('projectsSelectBox');
    selectedOption = projectsSelectBox.options[projectsSelectBox.selectedIndex].value;
    projectType1 = document.getElementById('projectType1');
    projectType2 = document.getElementById('projectType2');

    if (selectedOption === '1') {
      projectType2.style.display = "none";
      projectType1.style.display = "block";
    } else if (selectedOption === '2') {
      projectType1.style.display = "none";
      projectType2.style.display = "block";
    } else {
      projectType1.style.display = "block";
      projectType2.style.display = "block";
    }
  };
} catch (err) {
  console.log(err);
}

【问题讨论】：

getElementById 返回第一个元素，而不是可以指向其索引的数组。这是正确的，因为您不应拥有多个具有 ID 的元素。这就是为什么它是一个 ID。
最后一个很清楚，getElementById 返回单个元素。在select的情况下，[0]是返回元素的第一个选项，它自然不会改变，因此不能触发change事件。对于其他问题，如果您能提供一个可重现的示例，那就太好了，请参阅minimal reproducible example。
为了调试您遇到的第一个问题，您能否在一个最小示例中提供您的实际代码，以便我们可以看到您在做什么？把它想象成一个机械师。我们可以通过电话告诉您我们认为原因是什么，但是当汽车进来时，我们可以四处寻找并有更好的机会诊断问题。
已更新。第二个问题解决了，谢谢。这是我的完整代码块，只是一个简单的过滤开关，将 DOESN'T work 注释掉。
Seems to work fine ..?

标签： javascript dom events event-handling dom-events

【解决方案1】：

如果您取消注释 addEventListener 行并删除您的 .onchange 行，您最终会遇到错误：

Uncaught SyntaxError: missing ) after argument list

这可以通过在右大括号后添加右括号来解决。

selectedOptionElement.addEventListener('change', () => {
  var projectsSelectBox, selectedOption, projectType1, projectType2;
  projectsSelectBox = document.getElementById('projectsSelectBox');
  selectedOption = projectsSelectBox.options[projectsSelectBox.selectedIndex].value;
  projectType1 = document.getElementById('projectType1');
  projectType2 = document.getElementById('projectType2');

  if (selectedOption === '1') {
    projectType2.style.display = "none";
    projectType1.style.display = "block";
  } else if (selectedOption === '2') {
    projectType1.style.display = "none";
    projectType2.style.display = "block";
  } else {
    projectType1.style.display = "block";
    projectType2.style.display = "block";
  }
});  // <-- closing paren

完成此操作后，您的代码就可以工作了。

try {
  selectedOptionElement = document.getElementById('projectsSelectBox');
  selectedOptionElement.addEventListener('change', () => {
    var projectsSelectBox, selectedOption, projectType1, projectType2;
    projectsSelectBox = document.getElementById('projectsSelectBox');
    selectedOption = projectsSelectBox.options[projectsSelectBox.selectedIndex].value;
    projectType1 = document.getElementById('projectType1');
    projectType2 = document.getElementById('projectType2');

    if (selectedOption === '1') {
      projectType2.style.display = "none";
      projectType1.style.display = "block";
    } else if (selectedOption === '2') {
      projectType1.style.display = "none";
      projectType2.style.display = "block";
    } else {
      projectType1.style.display = "block";
      projectType2.style.display = "block";
    }
  });
} catch (err) {
  console.log(err);
}

<select name="" id="projectsSelectBox">
  <option value="1">1</option>
   <option value="2">2</option>
</select>
<p id="projectType1">Option Text</p>
<p id="projectType2">Option Text 2</p>

【讨论】：

我知道，我的示例中没有包含右大括号，但它在我的代码中。它不能解决我的问题。谢谢