Element:focusout 事件
focusout 事件在元素失去焦點後觸發,並且在 事件之後觸發。這兩個事件的區別在於 blurfocusout 會冒泡,而 blur 不會。
focusout 事件的對立面是 事件,該事件在元素獲得焦點時觸發。focusin
focusout 事件是不可取消的。
語法
在諸如 addEventListener() 之類的方法中使用事件名稱,或設定事件處理程式屬性。
js
addEventListener("focusout", (event) => { })
onfocusout = (event) => { }
事件型別
一個 FocusEvent。繼承自 UIEvent 和 Event。
事件屬性
此介面還繼承了其父級 UIEvent 的屬性,以及間接繼承自 Event 的屬性。.
-
獲得焦點的元素(如果有)。
示例
即時示例
HTML
html
<form id="form">
<label>
Some text:
<input type="text" placeholder="text input" />
</label>
<label>
Password:
<input type="password" placeholder="password" />
</label>
</form>
JavaScript
js
const form = document.getElementById("form");
form.addEventListener("focusin", (event) => {
event.target.style.background = "pink";
});
form.addEventListener("focusout", (event) => {
event.target.style.background = "";
});
結果
規範
| 規範 |
|---|
| UI 事件 # event-type-focusout |
注意:UI Events 規範描述了一個與當前瀏覽器實現不同的 焦點事件順序。
瀏覽器相容性
載入中…
另見
- 相關事件:
、blur、focusfocusin - 聚焦:focus/blur