javascript - 为什么选择具有值(value)的输入会触发 Chrome 中的两个事件？

Question

我正在 chromium 43 中测试它。

当我按下选择按钮时，以下代码仅触发一个事件:

<script>
    window.addEventListener('select', function(ev) {
        console.log(ev, ev.timeStamp);
    });
</script>
<input type="text"><button onclick="document.querySelector('input').select()">select</button>

但是，如果我向输入 type=text 添加一个值，我会得到两个事件，并且事件之间唯一发生变化的是 timeStamp 属性:

<script>
  window.addEventListener('select', function(ev) {
    console.log(ev, ev.timeStamp);
  });
</script>
<input type="text" value="test"><button onclick="document.querySelector('input').select()">select</button>

有谁知道为什么会这样，其背后的原理是什么？

Answer 1

我认为发生的事情是触发了两种类型的 select 事件，但是由于 Event 对象的详细信息集有限，所以它们看起来完全是相同的。但是看起来当您更改输入的 selectionRange 时会触发一个 select 事件，而当实际文本选择发生变化时会触发一个选择事件(在这种情况下，因为焦点是由于选择更改而在输入时激活)。最后一个是当输入为空时不会被触发的那个 - 因为没有文本，所以文本选择没有变化。

您可以通过将 select() 放在 mousedown 上来分解它。由于它发生在按钮上的 mousedown 上，因此焦点不在输入上，而是停留在按钮上。但是仍然会触发一个事件。然后，如果您只是在 mouseup 上添加一个 focus()，您不会更改输入的 selectionRange，但会选择实际文本并触发一个选择事件。 或者，如果在您的点击处理程序中调用按钮上的 select() 然后调用 focus()，您也将只有一个事件。 你可以在这里看到这些行为:

https://jsfiddle.net/k292po9a/6/

话虽这么说，它确实看起来像一个错误，它应该由 Chrome 处理，以便只触发一个事件。