「模糊」和「焦點」事件是否按照該順序保證發生？

Question

說你按Tab鍵移到焦點從元素A到B.這應該火了以下內容：

1. blur元素A
2. focus對元素B

它是安全的假設他們會按照這個順序開火嗎？

Answer 1

blur：

用戶代理必須當事件目標失去焦點分派該事件。焦點必須來自調度此事件類型之前的元素。

focus：

當事件目標接收焦點一種用戶代理必須分派該事件。在派發此事件類型之前，必須將焦點賦予該元素。

由於沒有兩個元素可以有重點的同時，按理說是blur必須focus之前。

Answer 2

運行下面的代碼片段並將輸入集中在左側，然後單擊右側的輸入，您將看到順序爲模糊 - > focusout - > focus（在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>