Question

我的问题是，在我想要检测JavaScript中选择了哪个选项的情况下，哪个事件最好与select标签一起使用。

到目前为止，我已经找到了两种方法。第一个是使用＆＃34;更改＆＃34; eventListener，就像这样：

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

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

我尝试的第二种方法是使用＆＃34;点击＆＃34;事件，就像那样：

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

这里的问题显然是每次点击列表时都会触发事件，所以如果我想更改所选项目，日志至少会完成两次。此外，当列表＆＃34;产生＆＃34;时，默认选择的项目也没有记录，这是正常的。

那么我怎样才能只记录一次所选项目，并记录默认的选定项目呢？

Answer 1

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

第一次点击会唤醒听众，但它很懒，只有一只眼睛睁开。
只要select具有焦点，那么侦听器就等待无焦点。为了不重视，你必须通过点击等来关注其他事情。
现在您正在点击该选项，您已经从选择中正式取消选择，从而导致更改事件被触发。

段

＆＃13;

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);

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

当change的{{1}}发生变化时，会调用

option个事件。

使用select-input构造函数创建新的change-event并在目标元素上调用Event。

＆＃13;

dispatchEvent

＆＃13;

document.getElementById('mySelect').addEventListener("change", function() {
  console.log(this.value);
});

var event = new Event('change');
document.getElementById('mySelect').dispatchEvent(event);

＆＃13;

Answer 3

选择列表已经有一个＆＃34; onchange＆＃34;你可以使用的事件：

selectList.onchange = function()
{
    console.log(selectList.options[selectList.selectedIndex].value);
};

HTML选择标记使用什么事件

3 个答案:

段