先看onblur事件和onfocus事件的定義：
<element onblur="SomeJavaScriptCode">
<element onfocus="SomeJavaScriptCode">
雙引號中的內容是一段js代碼，也可以是一個事件函數
在看幾個例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<input name="btn" type="text" placeholder="請輸入顯示歡迎學習js的次數" onfocus="study(prompt('請輸入顯示歡迎學習js的次數'))" >
<script>
function study(count){
for(var i=0;i<count;i++){
document.write("<h4>歡迎學習js</h4>")
}
}
</script>
</body>
</html>
運行以上代碼，鼠標點擊輸入框（使輸入框獲得焦點，如下圖）
輸入數字后，如下圖，
對代碼進行修改，如下圖：
完整代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<input name="btn" type="text" placeholder="請輸入顯示歡迎學習js的次數" onfocus="study(prompt('請輸入顯示歡迎學習js的次數'))" >
<script>
$(document).ready(function study(count){
for(var i=0;i<count;i++){
document.write("<h4>歡迎學習js</h4>")
}
})
</script>
</body>
</html>
再點擊輸入框，使輸入框獲得焦點，發現沒有反應，如下圖
原因在於 ready函數，ready函數創建了一個局部函數作用域，外面是不能調用內部的study函數的。所以 你的onblur事件失效是不是這個原因呢？
解決方案：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<input id="btn" type="text" placeholder="請輸入顯示歡迎學習js的次數" >
<script src="js/jquery-1.12.4.js"></script>
<script>
$(document).ready(function(){
//綁定事件
$("#btn").focus(study);
function study(){
document.write("<h4>歡迎學習js</h4>")
}
})
</script>
</body>
</html>
利用jQuery綁定事件，當然使用原生js綁定也是一樣的
注：jQuery的ready方法就是等待DOM元素加載完便立即執行，原生js接口onload是等待所有html加載完再加載js文件