Sự kiện onfocusout

Sự kiện DOM FocusEvent

Định nghĩa và cách sử dụng

Sự kiện onfocusout xảy ra khi phần tử sắp mất焦点.

Mặc dù Firefox không hỗ trợ sự kiện onfocusout, nhưng bạn có thể hiểu xem phần tử con có mất焦点 hay không bằng cách sử dụng bộ lắng nghe sự kiện capture của sự kiện onblur (sử dụng tham số tùy chọn useCapture của phương pháp addEventListener()). Sự kiện onfocusout tương tự như Sự kiện onblurSự khác biệt chính là sự kiện onblur không bubbling. Do đó, nếu bạn muốn tìm ra phần tử hoặc phần tử con có mất焦点 hay không, bạn nên sử dụng sự kiện onfocusout.

Mặc dù Firefox không hỗ trợ sự kiện onfocusout, nhưng bạn có thể hiểu xem phần tử con có mất焦点 hay không bằng cách sử dụng bộ lắng nghe sự kiện capture của sự kiện onblur (sử dụng tham số tùy chọn useCapture của phương pháp addEventListener())..

Mặc dù Firefox không hỗ trợ sự kiện onfocusout, nhưng bạn có thể hiểu xem phần tử con có mất焦点 hay không bằng cách sử dụng bộ lắng nghe sự kiện capture của sự kiện onblur (sử dụng tham số tùy chọn useCapture của phương pháp addEventListener()). Lưu ý: Sự kiện onfocusinSự kiện onfocusout với

Ngược lại.

Mô hình

Ví dụ 1

Chạy JavaScript khi trường nhập sắp mất焦点:

Thử nghiệm trực tiếp

<input type="text" onfocusout="myFunction()">

Trang có nhiều ví dụ TIY hơn ở dưới cùng.

Cú pháp

Trong HTML:< element.addEventListener("focusout",onfocusout="

Thử nghiệm trực tiếp

">

Trong JavaScript, sử dụng phương pháp addEventListener():In JavaScript (có thể không hoạt động như mong đợi trong Chrome, Safari và Opera 15+):.addEventListener("focusout",.onfocusout = function(){

Thử nghiệm trực tiếp

};

Trong JavaScript, sử dụng phương pháp addEventListener():object .addEventListener("focusout",myScript

Thử nghiệm trực tiếp

注释：); Internet Explorer 8 hoặc các phiên bản trước không hỗ trợaddEventListener() phương pháp

.

Chi tiết kỹ thuật: 支持
Bubbling: Có thể hủy bỏ:
Không hỗ trợ: FocusEvent
Các thẻ HTML được hỗ trợ: Tất cả các phần tử HTML, trừ: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> và <title>
DOM 版本： Level 2 Events

浏览器支持

表中的数字注明了完全支持该事件的首个浏览器版本。

事件 Chrome IE Firefox Safari Opera
onfocusout 支持 支持 52.0 支持 支持

注释：onfocusout 事件在使用 JavaScript HTML DOM 语法的 Chrome、Safari 和 Opera 15+ 中可能无法按预期工作。但是，它应该作为 HTML 属性并使用 addEventListener() 方法（请参见下面的语法示例）。

更多实例

例子 2

将 "onfocusin" 与 "onfocusout" 事件一起使用：

<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">

Thử nghiệm trực tiếp

例子 3

事件委托：将 addEventListener() 的 useCapture 参数设置为 true（用于 focus 和 blur）：

<form id="myForm">
  <input type="text" id="myInput">
</form>
<script>
var x = document.getElementById("myForm");
x.addEventListener("focus", myFocusFunction, true);
x.addEventListener("blur", myBlurFunction, true);
function myFocusFunction() {
  document.getElementById("myInput").style.backgroundColor = "yellow"; 
}
function myBlurFunction() {
  document.getElementById("myInput").style.backgroundColor = ""; 
}
</script>

Thử nghiệm trực tiếp

例子 4

事件委托：使用 focusin 事件：

<form id="myForm">
  <input type="text" id="myInput">
</form>
<script>
var x = document.getElementById("myForm");
x.addEventListener("focusin", myFocusFunction);
x.addEventListener("focusout", myBlurFunction);
function myFocusFunction() {
  document.getElementById("myInput").style.backgroundColor = "yellow"; 
}
function myBlurFunction() {
  document.getElementById("myInput").style.backgroundColor = ""; 
}
</script>

Thử nghiệm trực tiếp

Sự kiện DOM FocusEvent