“模糊”和“焦点”事件是否保证按此顺序发生？

Question

假设您按Tab键将焦点从元素A移动到B.这应触发以下内容：

1. 在元素A上模糊
2. 专注于元素B.

假设他们将按此顺序开火是否安全？

Answer 1

blur ：

当事件目标失去焦点时，用户代理必须调度此事件。 必须在发送此事件类型之前从元素中获取焦点。

focus ：

当事件目标获得焦点时，用户代理必须调度此事件。 在发送此事件类型之前，必须将焦点放在元素上。

由于没有两个元素可以同时聚焦，因此在focus之前必须出现blur 。

Answer 2

运行下面的代码片段并将输入对焦在左侧，然后点击右侧的输入，你会看到顺序是模糊 - >焦点 - >焦点，（在Chrome中），但如果你在Safari中检查它，它将模糊 - >焦点 - >焦点。 所以现在，您不能假设不同的用户代理实现相同的事件顺序。 此外，焦点和模糊基本上是一回事。 不同的是，模糊事件不会冒泡。

编辑：为了响应您的编辑，在焦点之前始终会出现模糊。

 var i1 = document.getElementById("i1"); var i2 = document.getElementById("i2"); var whatHappened = document.getElementById("whatHappened"); i1.addEventListener("focusout", function() { var p = document.createElement("P"); p.innerText = "focusout"; whatHappened.appendChild(p); }); i1.addEventListener("blur", function() { var p = document.createElement("P"); p.innerText = "blur"; whatHappened.appendChild(p); }); i2.addEventListener("focus", function() { var p = document.createElement("P"); p.innerText = "focus"; whatHappened.appendChild(p); }); 

 <input type="text" id="i1" /> <input type="text" id="i2" /> <div id="whatHappened"></div>