1. mousewheel
// ie chorme
box.addEventListener('mousewheel', function (e) {
var e = event || e || window.event;
// e.wheelDelta反饋滾輪方向
// 向上為正梅尤，向下為負(fù)
console.log(e.wheelDelta);
// 鼠標(biāo)滾輪滾動(dòng)俱济，頁(yè)面跟著一起滾動(dòng)
// 系統(tǒng)默認(rèn)行為，可以人為禁止
e.preventDefault();
return false;
})
// firefox
box.addEventListener('DOMMouseScorll',function(e){
var e=event||e||window.event;
// e.detail獲取方向
// 向上為負(fù)，向下為正
console.log(e.detail);
})
// 兼容性寫法
// 判斷當(dāng)前瀏覽器類型
// navigator.userAgent獲取當(dāng)前用戶系統(tǒng)信息字符串
var eventType;
if (navigator.userAgent.indexOf('Firefox') == -1) {
// 非火狐
eventType = 'mousewheel';
} else {
eventType = 'DOMMouseScroll';
}
document.addEventListener(eventType, function (e) {
// 鼠標(biāo)滾輪滾動(dòng)，頁(yè)面跟著一起滾動(dòng)
// 系統(tǒng)默認(rèn)行為，可以人為禁止
// e.preventDefault();
if (e.wheelDelta) {
if (e.wheelDelta > 0) {
console.log('向上滾動(dòng)');
} else {
console.log("向下滾動(dòng)");
}
} else {
if (e.detail > 0) {
console.log('向下滾動(dòng)');
} else {
console.log("向上滾動(dòng)");
}
}
})
2. keyCode
e.key 獲取按鍵
e.keyCode 獲取按鍵編碼
| 按鍵 | ASCII |
|---|---|
| 0-9 | 48-57 |
| a-z | 65-90 |
| shift | 16 |
| control | 17 |
| alt | 18 |
| 左上右下 | 37-40 |
3. history 歷史記錄
history.back() 返回上一個(gè)頁(yè)面
history.forward() 返回下一個(gè)歷史記錄中的頁(yè)面
history.go(n) n>0前進(jìn)n個(gè)頁(yè)面
n<0后退n個(gè)頁(yè)面
4. localStorage
本地儲(chǔ)存分為 localStorage sessionStorage
localStorage 永久儲(chǔ)存 只要不手動(dòng)刪 就一直存在
sessionStorage 只在瀏覽器運(yùn)行狀態(tài)下存在 關(guān)閉后銷毀
操作方法幾乎相同 ,在進(jìn)行數(shù)據(jù)儲(chǔ)存的時(shí)候 都是以鍵值對(duì)的形式儲(chǔ)存
,而且其中的值都會(huì)強(qiáng)制轉(zhuǎn)化為字符串,因此在存取的時(shí)候 要對(duì)數(shù)據(jù)進(jìn)行解碼
| 生命周期 | 大小 | |
|---|---|---|
| localStorage | 永久存儲(chǔ) | 5MB |
| sessionStorage | 瀏覽器關(guān)閉 | 5MB |
| cookie | 可自己設(shè)置，默認(rèn)瀏覽器關(guān)閉 | 4kb |
使用json增加
localStorage.setItem('fly', JSON.stringify({
'data': [0, 1, 90],
name: 'lll'
}))
var arr1 = localStorage.getItem('fly'); //獲取
arr1 = JSON.parse(arr1); //轉(zhuǎn)化
arr1.name = '43'
console.log(arr1.data);
arr1.data.push(4, 2)
localStorage.setItem('fly', JSON.stringify(arr1)) //添加
// localStorage.removeItem('fly') //刪除單個(gè)
// localStorage.clear() //全刪
fly: '{"data":[0,1,90,4,2],"name":"43"}'
sessionStorage
1.存儲(chǔ)
采用setItem()方法存儲(chǔ)、通過屬性方式存儲(chǔ)
2.讀取
通過getItem()方法取值定硝、 通過屬性方式取值
localStorage
1.存儲(chǔ)
采用setItem()方法存儲(chǔ)、通過屬性方式存儲(chǔ)
2.讀取
通過getItem()方法取值毫目、通過屬性方式取值
3.刪除
localStorage.removeItem("key"); 刪除名稱為“key”的信息蔬啡。
localStorage.clear(); 清空localStorage中所有信息
4. location
location.href 可以返回完整的url 地址
location.href='url' 設(shè)置url地址 會(huì)觸發(fā)頁(yè)面的跳轉(zhuǎn)
location.hash=' ' 通過hash屬性來設(shè)置錨點(diǎn)鏈接
5. window
1.window主要用來控制瀏覽器視窗
2.是一個(gè)頂層對(duì)象 全局的方法 變量 都是window對(duì)象的一個(gè)屬性
3.打開window.open(url,name,features,replace)
4.關(guān)閉 newWindow.close() newWindow是變量名，可以自己設(shè)置
document.click(function() {
var url = 'https://www.baidu.com';
newWindow = window.open(url, 'newWindow', 'width=200,height=100,top=500,left=200')
})
document.click(function() {
newWindow.close()
})
6. 數(shù)據(jù)傳遞特性
同一會(huì)話的各個(gè)頁(yè)面镀虐，其localStorage箱蟆、sessionStorage是共享的
同一會(huì)話：（同域）
同協(xié)議 http https
同域名 www.baidu.com
同端口號(hào) 8848
可以使用本地儲(chǔ)存 實(shí)現(xiàn)同一會(huì)話各個(gè)頁(yè)面之間的數(shù)據(jù)傳遞
