移动端事件、存储(笔记)

触屏事件

touchstart 手指触摸到DOM元素时触发
touchmove 手指在DOM元素上滑动时触发
touchend 手指从一个DOM元素上移开触发

<div style="width: 100px; height: 100px; background-color: blueviolet;"></div>
<script>
    var div = document.querySelector('div');
    div.addEventListener('touchstart', function() {
        console.log('1111');
    })
    div.addEventListener('touchmove', function() {
        console.log('222111');
    })
    div.addEventListener('touchend', function() {
        console.log('213214241111');
    })
</script>

触摸事件对象

touchs 正在触摸屏幕所有手指的一个列表
targetTouches 正在触摸当前DOM元素上的手指的一个列表
changedTouches 手指发生了改变的列表，从无到有，从有到无

<div style="width: 100px; height: 100px; background-color: blueviolet;"></div>
<script>
    var div = document.querySelector('div');
    div.addEventListener('touchstart', function(e) {
        // 正在触摸屏幕所有手指的一个列表
        console.log(e.touches);
        //   正在触摸当前DOM元素上的手指的一个列表
        console.log(e.targetTouches);
        // 手指发生了改变的列表，从无到有，从有到无
        console.log(e.changedTouches);
    })
    div.addEventListener('touchend', function(e) {
        // 手指移开的时候只有changedTouches
        // [0]代表着只是第一个
        console.log(e.changedTouches[0]);
    })
</script>

移动端拖动元素

移动原理：手指移动，计算出移动的距离，然后用盒子的位置+手指移动的位置
手指移动的距离：手指滑动的位置减去刚开始触摸的位置

<div style="width: 100px; height: 100px; background-color: blueviolet; position: absolute;"></div>
<script>
    moveBox('div')
    function moveBox(element) {
        var x = 0;
        var y = 0;
        var element = document.querySelector(element);
        element.addEventListener('touchstart', function(e) {
            startX = e.targetTouches[0].pageX;
            startY = e.targetTouches[0].pageY;
            x = this.offsetLeft;
            y = this.offsetTop;
        })
        element.addEventListener('touchmove', function(e) {
            var moveX = e.targetTouches[0].pageX - startX;
            var moveY = e.targetTouches[0].pageY - startY;
            this.style.left = x + moveX + 'px';
            this.style.top = y + moveY + 'px';
            e.preventDefault() //阻止屏幕默认滚动
        })
    }
</script>

存储

window.sessionStorige
生命周期为关闭流浏览器窗口
在同一个窗口下可以数据共享
以键值对的形式存储

存储数据
sessionStorage.setItem(key,value)
获取数据
sessionStorige.getItem(key)
删除数据
sessionStorage.removeItem(key)

window.localStorige
生命周期永久生效，除非删除
可以多窗口共享
以键值对的形式使用

存储数据
localStorage.setItem(key,value)
获取数据
localStorige.getItem(key)
删除数据
localStorage.removeItem(key)
删除所有数据
localStorage.clear()

<input type="text" name="" id="username"><br>
<input type="checkbox" name="" id="remember">记住用户名
<script>
    var username = document.querySelector('#username');
    var remember = document.querySelector('#remember');
    if (localStorage.getItem('username')) {
        username.value = localStorage.getItem('username');
        remember.checked = true;
    }
    remember.addEventListener('change', function() {
        if (this.checked) {
            localStorage.setItem('username', username.value)
        } else {
            localStorage.removeItem('username');
        }
    })
</script>