以下大部分為學習《JavaScript 高級程序設計》(第 3 版) 所做筆記。
目錄：
1. 了解焦點事件
2. blur 事件
3. focus 事件
Q: 焦點事件什么時候觸發？
A: 當元素獲得或失去焦點時觸發。
Q: 焦點事件的用處？
A: 利用焦點事件並與 document.hasFocus() 方法及 document.activeElement 屬性配合，可以知曉用戶在頁面上的行蹤。
Q: 焦點事件有哪些?
A: blur DOMFocusIn DomFocusOut focus focusin focusout
瀏覽器支持
blur: 所有瀏覽器都支持
DOMFocusIn: 只有 Opera 支持
DomfocusOut: 只有 Opera 支持
focus: 所有瀏覽器都支持
focusin: 支持的瀏覽器：IE5.5+、Safari5.1+、Opera11.5+、Chrome
focusout: 支持的瀏覽器：IE5.5+、Safari5.1+、Opera11.5+、Chrome
IE 的 focusin 和 focusout 與 Opera 的 DOMFocusIn 和 DOMFocusout 發生重疊， IE 的方式最終被 DOM3 級事件采納為標准方式。
不冒泡的事件：blur focus
( 即使 blur 跟 focus 不冒泡，也可以在捕獲階段偵聽它們。)
在失去焦點的元素上觸發, 事件目標是失去焦點的元素的事件: focusout blur DomFocusOut
在獲得焦點的元素上觸發, 事件目標是獲得焦點的元素的事件: focusin focus DomfocusIn
當焦點從頁面的一個元素移動到另一個元素，會依次觸發下列事件：focusout focusin blur DOMFocusOut focus DOMFocusIn
檢測瀏覽器是否支持事件
console.log( "onblur" in window ); //輸出：true console.log( "亂打的" in window ); //輸出：false
true: 瀏覽器支持
false: 瀏覽器不支持
下例實現：在文本框中輸入英文，文本框時失去焦點之后觸發 blur 事件，文本框內容小寫變大寫
方式1：通過 JS 來指定事件處理程序
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript" src="EventUtil.js"></script>
<script>
//跨瀏覽器對象 EventUtil
//為 window 指定 load 事件處理程序
//確保往 DOM 中添加新元素之前頁面已經加載完畢，如果在頁面加載完畢之前操作 document.body 會出錯
EventUtil.addHandler(window, "load", function(event){
var event = EventUtil.getEvent();
//創建一個 input 元素
var input1 = document.createElement("input");
//設置 input1 的 type
input1.type = "text";
//為 input1 指定 blur 事件，元素失去焦點之后觸發 blur 事件文本框內文本內容小寫變大寫
EventUtil.addHandler(input1, "blur", function(){
this.value = this.value.toUpperCase();
});
//添加節點 input1
document.body.appendChild(input1);
});
</script>
</body>
</html>
（代碼中的 EventUtil 對象：https://www.cnblogs.com/xiaoxuStudy/p/13131725.html#three ）
頁面表現：
在文本框內輸入一個單詞
點擊框外，文本框失去焦點后，觸發了 blur 事件，文本框內容小寫變大寫
方式2：為 <input> 元素添加一個 onblur 特性
<!DOCTYPE html>
<html>
<body>
<script>
function fn(){
var x = document.getElementById("word");
x.value = x.value.toUpperCase();
}
</script>
<p>輸入一個單詞：</p>
<input type="text" id="word" onblur="fn()">
</body>
</html>
頁面表現同上。
下例實現：文本框獲得焦點時觸發 focus 事件，修改文本框背景顏色為黃色
方式1：通過 JS 來指定事件處理程序
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript" src="EventUtil.js"></script>
<script>
//跨瀏覽器對象 EventUtil
//為 window 指定 load 事件處理程序
//確保往 DOM 中添加新元素之前頁面已經加載完畢，如果在頁面加載完畢之前操作 document.body 會出錯
EventUtil.addHandler(window, "load", function(event){
var event = EventUtil.getEvent();
//創建一個 input 元素
var input1 = document.createElement("input");
//設置 input1 的 type
input1.type = "text";
//為 input1 指定 focus 事件，元素獲得焦點之后觸發 focus 事件文本框背景顏色變為黃色
EventUtil.addHandler(input1, "focus", function(){
this.style.background = "yellow";
});
//添加節點 input1
document.body.appendChild(input1);
});
</script>
</body>
</html>
頁面表現：
點擊文本框內，input 元素獲得焦點后文本框背景顏色變為黃色。
方式2：為 <input> 元素添加一個 onfocus 特性
<!DOCTYPE html>
<html>
<body>
<script>
function fn(x){
x.style.background = "yellow";
}
</script>
<input type="text" onfocus="fn(this)">
</body>
</html>
頁面表現同上。