生活随笔
收集整理的這篇文章主要介紹了
DOM-13 【实战】输入及状态改变事件、京东搜索框
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
模塊化
IIFE
window.onload
= function () {init
()
}function init
() {keySearch
()others
() // 多人開發的模塊
}var keySearch
= (function
() {var searchKw
= document.getElementById
('J_search_kw'),autoKw
= document.getElementById
('J_autoKw'),recomKw
= JSON.parse
(document.getElementById
('J_recomKw').innerHTML
),kwOrder
= 0,t
= null
;function setAutoKws
() {autoKwChange
() // 打開頁面就開始輪播t
= setInterval
(autoKwChange, 2000
)}function autoKwChange
() {var len
= recomKw.length
;autoKw.innerHTML
= recomKw
[kwOrder
]kwOrder
= kwOrder
>= len - 1 ? 0
: kwOrder + 1
}return function () {// 模塊化，return function出去，還可以傳參 可以在function里做很多事setAutoKws
()}
})();
// 其他人寫的模塊
var others
= (function
(){return function
(){}
})();
模塊化和面向對象的選取：可復用則插件化
input的oninput事件 HTML5新增
- IE9及以下會有兼容問題，需使用onpropertychange
VUE的雙向數據綁定并不是這么簡單
input的onchang事件
- 失去焦點才觸發
- focus和blur時的值不同才觸發
input的onfocus、onblur事件
如果只是修改樣式，直接用css也能做到
- 由于placeholder修改樣式不便，不同瀏覽器的定義有差異，因此常用onfocus、onblur來模擬placeholder
<input type
="text"
maxlength
="40"
value
="請輸入關鍵字"
name
="SerchKey"
class
="inp-txt"
onfocus
="if(this.value=='請輸入關鍵字')
{this.value='';this.className='inp-txt inp-txt-active'}"
onblur
="if(this.value=='')
{this.value='請輸入關鍵字';this.className='inp-txt'}"
autocomplete
="off">
總結
以上是生活随笔為你收集整理的DOM-13 【实战】输入及状态改变事件、京东搜索框的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
