复习笔记之API(17) 移动端常见事件及事件对象

移动端常见事件及事件对象

• 触屏事件

移动端浏览器兼容较好，我们不需要考虑以前的浏览器兼容问题，可以放心地使用原生JS书写效果，但是移动端也有自己独特的地方，比如触屏事件touch(也称触摸事件)，Android和IOS都有

常见的触屏事件

触屏touch事件	说明
touchend	手指从一个DOM元素上移开时触发
touchmove	手指在一个DOM元素上滑动时触发
touchstart	手指触摸到一个DOM元素时触发

<style>
    div {
        position: relative;
        width: 100px;
        height: 100px;
        background-color: blue;
        margin-bottom: 50px;
    }
</style>
<div></div>
<script>
    let div = document.querySelector('div');
    // 手指触摸DOM元素事件
    div.addEventListener('touchstart',function() {
        div.style.left = `100px`;
        div.style.backgroundColor = 'red';
    })
    // 手指在DOM元素身上移动事件
    div.addEventListener('touchmove',function() {
        div.style.left = `150px`;
        div.style.backgroundColor = 'green';
    })
    // 手指离开DOM元素事件
    div.addEventListener('touchend',function() {
        div.style.left = `200px`;
        div.style.backgroundColor = 'black';
    })
</script>

触摸事件对象(TouchEvent)

TouchEvent是一类描述手指在触摸平板(触摸屏、触摸板等)的状态变化的事件，这类事件用于描述一个或多个触点，使开发者可以检测触点的移动，触点的增加和减少等等

touchstart、touchmove、touchend三个事件都会各自有事件对象，触摸事件对象重点我们看三个常见对象列表：

触摸列表	说明
touches	正在触摸屏幕的所有手指的一个列表
targetTouches	正在触摸当前DOM元素上的手指的一个列表
changedTouches	手指状态发生改变的一个列表，从无到有、从有到无变化

<style>
    div {
        position: relative;
        width: 100px;
        height: 100px;
        background-color: blue;
        margin-bottom: 50px;
    }
</style>
<div></div>
<script>
    let div = document.querySelector('div');
    div.addEventListener('touchstart',function(e) {
        console.log(e);
        // touches 正在触摸屏幕的所有手指的一个列表
        // targetTouches 正在触摸当前DOM元素上的手指的一个列表
        // 如果侦听的是一个DOM对象，他们两个是一样的
        // changedTouches 手指状态发生改变的列表 从无到有 或者 从有到无
        console.log(e.targetTouches[0]);
        // targetTouches[0]就可以得到正在触摸DOM元素的第一个手指的相关信息，比如：手指的坐标等等
    })
    div.addEventListener('touchmove',function() {})
    div.addEventListener('touchend',function(e) {
        console.log(e);
        // 当我们手指离开屏幕的时候，就没有了touches 和 targetTouches列表；但是会有changedTouches
    })
</script>

因为我们一般都是给元素注册触摸事件，所以最经常使用的是targetTouches

移动端拖动元素

1. touchstart、touchmove、touchend可以实现拖动元素
2. 使用targetTouches[0]里面的pageX和pageY得到当前手指的坐标
3. 移动端拖拽的原理：手指移动中，计算出手指移动的距离，然后用盒子原来的位置 + 手指移动的距离
4. 手指移动的距离：手指滑动中的位置减去手指刚开始触摸的位置

拖动元素三部曲

• 触摸元素touchstart：获取手指初始坐标，同时获得盒子原来的位置
• 移动手指touchmove：计算手指滑动的距离，并且移动盒子
• 离开手指touchend

注意：手指移动也会触发滚动屏幕，所以这里要阻止默认的屏幕滚动e:preventDefault();

<style>
    div {
        position: relative;
        width: 100px;
        height: 100px;
        background-color: blue;
        margin-bottom: 50px;
    }
</style>
<div></div>
<script>
    let div = document.querySelector('div');
    // 获取手指的初始坐标
    let startX = 0,
        startY = 0;
    // 获得盒子原来的位置
    let x = 0,
        y = 0;
    div.addEventListener('touchstart', function (e) {
        startX = e.targetTouches[0].pageX;
        startY = e.targetTouches[0].pageY;
        x = this.offsetLeft;
        y = this.offsetTop;
    })
    div.addEventListener('touchmove', function (e) {
        // 计算手指的移动距离  手指移动之后的坐标减去手指初始的坐标
        let moveX = e.targetTouches[0].pageX - startX,
            moveY = e.targetTouches[0].pageY - startY;
        // 移动盒子 盒子原来的位置 + 手指移动的距离
        this.style.left = x + moveX +'px';
        this.style.top = y + moveY +'px';
        e.preventDefault();  // 阻止屏幕滚动的默认行为
    })
</script>

• classList属性是HTML5新增的一个属性，返回元素的类名，但是IE10版本以上支持
• 该属性用于在元素中添加、移除及切换CSS类名
  • 添加类名 classList.add('类名');是在后面追加类名，不会覆盖之前的类名
  • 移除类名 classList.remove('类名');
  • 切换类名 classList.toggle('类名');

<div class="box clear"></div>
<script>
    // classList 返回元素类名
    let div = document.querySelector('div');
    console.log(div.classList); // 返回元素类名列表(伪数组的形式)
    console.log(div.classList[0]); // box
    console.log(div.classList[1]); // clear
    // 添加类名
    div.classList('active');
    // 移除类名
    div.classList.remove('box');
</script>

切换类名演示：开关灯

<style>
    .bg {
        background-color: black;
    }
</style>
<button>开关灯</button>
<script>
    let btn = document.querySelector('button');
    btn.addEventListener('click', function() {
        document.body.classList.toggle('bg');
    })
</script>