javascript - HTML 选择标签使用什么事件

Question

我的问题是，如果我想检测在 JavaScript 中选择了 select 的哪个选项，那么什么事件更适合与 select 标记一起使用。

到目前为止，我已经找到了两种方法。第一个是使用“change”事件监听器，就像这样:

selectList.addEventListener("change", function(){
    console.log(selectList.options[selectList.selectedIndex].value);
});

但是这个方法有两个问题。首先，此事件不会在开始时触发，因此它不会记录列表中默认选择的第一个元素。其次，当单击列表中的某个项目时，该事件会被触发两次，这意味着控制台中有两行相同的行。

我尝试过的第二种方法是使用“click”事件，就像这样:

selectList.addEventListener("click", function(){
    console.log(selectList.options[selectList.selectedIndex].value);
});

这里的问题显然是每次我单击列表时都会触发该事件，因此如果我想更改所选项目，日志至少会完成两次。此外，列表“spawn”时的默认选定项也没有记录，这是正常的。

那么我怎样才能只记录所选项目一次，并使默认所选项目也记录下来？

Answer 1

当 event.target(本例中为 select 元素)失去焦点(或模糊)时，将触发 Change 事件。因此，无论用户在触发更改事件后执行什么操作，都会导致该事件实际触发，因此每个操作应该只获得一个事件。看一下这个片段，日志清楚地表明您不必担心双重事件触发。

1. 第一次点击“唤醒了听者，但它很懒，睁着一只眼睛。

2. 只要选择具有焦点，那么监听器就只是等待取消焦点。为了分散注意力，您必须通过单击 等将注意力集中到其他事情上。

3. 现在您单击该选项，您已正式从选择中脱离焦点，从而导致触发更改事件。

片段

selectList.addEventListener("change", function() {
  console.log(selectList.options[selectList.selectedIndex].value);
  event.stopPropagation
});


var ta = document.getElementById('ta');

ta.addEventListener('change', function(e) {
  alert('HEY! Why are not focusing on me anymore?');
}, false);

ta.addEventListener('click', function(e) {
  alert('Why are you poking me? that\'s annoying, STOP!');
  }, false);

select {
  margin-right: 50px;
}
ol {
  margin-left: 70px;
  margin-right: 50px;
}
#ta {
  margin-right: 50px;
  }

<select id='selectList'>
  <option value="">---</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>


<textarea id="ta"></textarea>
<ol>
<li>Type something in the textarea.</li>
<li>Click anywhere within this window, except the textarea</li>
  <li>Now reset this Snippet.</li>
  <li>Type something again.</li>
  <li>Now click the textarea.</li>
  </ol>
<button id="btn">CLICK</button>