JavaScript

移動(dòng)端事件介紹

• touch事件類(lèi)型

  移動(dòng)設(shè)備上無(wú)法使用鼠標(biāo)，當(dāng)手指按下屏幕的時(shí)候會(huì)觸發(fā) click,mousedown,mouseup事件，但是在移動(dòng)設(shè)備上有專(zhuān)門(mén)的事件： touch 備注： 在移動(dòng)端touch事件需要通過(guò)事件監(jiān)聽(tīng)的方式添加

  • touchstart 手指按下觸發(fā)事件

  • touchmove 手指移動(dòng)觸發(fā)的事件

  • touchend 手指離開(kāi)時(shí)候觸發(fā)的事件

• touch事件對(duì)象

  • 屬性

    • 事件對(duì)象.touches [位于屏幕上手指列表]

      ? touches 用來(lái)獲取位于屏幕上的手指信息【手指?jìng)€(gè)數(shù)】

    • 事件對(duì)象.targetTouches[位于該元素上的手指列表]

      ? 用來(lái)獲取當(dāng)前點(diǎn)擊元素時(shí)候，手指信息【手指?jìng)€(gè)數(shù),手指唯一標(biāo)識(shí)ID】

    • 事件對(duì)象.changedTouches[當(dāng)手指離開(kāi)屏幕時(shí)候的信息，在touchend事件中使用該屬性獲取手指列表]

      ? changedTouches 用來(lái)獲取當(dāng)手指離開(kāi)屏幕時(shí)候的手指信息，一般在touchend事件中使用該屬性獲取手指信息

  • 手指位置

    • 手指對(duì)象.clientX/Y 手指相對(duì)于視口的水平/垂直距離【參照可視區(qū)域】

    • 手指對(duì)象.pageX/Y 手指相當(dāng)于視口的水平/垂直距離【如果有滾動(dòng)條，包括滾動(dòng)條滾動(dòng)后的距離】

  • click延時(shí)

    1. click 比 touch 延時(shí)約300毫秒 【時(shí)間不標(biāo)準(zhǔn)】

• 手勢(shì)封裝

• 模擬點(diǎn)擊（tap）

  核心：（touchstart + touchend ）手指按下的位置和手指離開(kāi)的位置沒(méi)有發(fā)生改變

本地存儲(chǔ)

sessionStorage（保存數(shù)據(jù)）

1. 數(shù)據(jù)只能在同一個(gè)頁(yè)面中數(shù)據(jù)，不能跨頁(yè)面訪問(wèn) 2. 頁(yè)面關(guān)閉后數(shù)據(jù)隨之銷(xiāo)毀 3. 不屬于持久性本地存儲(chǔ) 4. 大小為5M

• window.sessionStorage.setItem(k,value);
• window.sessionStorage.getItem(k);
• window.sessionStorage.removeItem(k);
• window.sessionStorage.clear();

localStorage(保存數(shù)據(jù))

1. 數(shù)據(jù)可以實(shí)現(xiàn)不同頁(yè)面之間的相互訪問(wèn) 2. 數(shù)據(jù)需要手動(dòng)刪除，屬于持久化存儲(chǔ) 3. 大小為約20M

• localStorage.setItem(k,value);
• localStorage.getItem(k);
• localStorage.removeItem(k);
• localStorage.clear();

• localStorage.getItem(k);
• localStorage.removeItem(k);
• localStorage.clear();

總結(jié)

以上是生活随笔為你收集整理的js(Dom+Bom)第八天的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。