赞助
// 只有移动端设备(终端) 支持触摸事件
        // 即时带有触屏的电脑,也不支持触摸事件
        // 因为硬件不同,操作方式不同

        // 标签对象.ontouchstart      触摸开始事件
        // 标签对象.ontouchend        触摸结束事件
        // 标签对象.ontouchmove       触摸移动事件

        // 长按事件 --- 判断 触摸开始和触摸结束的时间间隔大于 1秒
        // 轻触事件 --- 判断 触摸开始和触摸结束的时间间隔小于 0.1秒
        // 左滑事件 --- 判断 触摸开始和触摸结束的时间坐标位置
        // 放大事件
        // 缩小事件
 
// 特殊事件
        // 动画结束  标签对象.onanimationend
        // 过渡结束  标签对象.ontransitionend

        var oDiv = document.querySelector('div');

        oDiv.onclick = function(){
            oDiv.style.width = '300px';
            oDiv.style.height = '300px';
            oDiv.style.background = 'blue';

            oDiv.ontransitionend = function(){
                // 有几个过渡结束,触发几次事件处理函数
                console.log('过渡结束了')
            }
        }
 
  // 事件的绑定
        // 同一个标签,默认是不能对同一个事件类型,绑定多个事件处理函数
        // 如果给同一个标签,绑定相同类型的事件
        // 后绑定的事件处理函数会覆盖之前绑定的事件处理函数

        // 给标签绑定事件和事件处理函数,有专门的绑定方法
        // 给标签添加监听事件,绑定事件类型和事件处理函数

        // 标签对象.addEventListener('事件类型' , 匿名函数function(){});

        // 标签对象.addEventListener('事件类型' , 函数名称fun);
        // 已经定义好的函数 function fun(){}

        // 两种语法,调用执行,触发事件,都是相同的
        // 只是 通过匿名函数语法,绑定的方法,无法删除
        // 绑定函数名称的语法形式,可以通过 
        // 标签对象.removeEventListener('事件类型',函数名称) 来删除绑定的事件处理函数
        // 
        // 匿名函数函数形式,等于直接绑定了,一个函数的内存地址,我们不知道这个内存地址是什么
        // 在执行 removeEventListener 时 第二个参数,没办法输入要删除的函数的内存地址
        // 就算定义一个相同的函数内存地址也是不同的
        // 函数名称形式,等于绑定一个函数名称/变量名称,可以通过删除这个函数名称/变量来删除内容
        // 
        // 监听时,如果绑定的事件处理函数,不需要删除,两种语法都可以
        //       如果绑定的事件处理函数,需要删除,只能监听函数名称/变量名称,不允许是匿名函数形式
posted on 2020-12-02 23:32  Tsunami黄嵩粟  阅读(109)  评论(0编辑  收藏  举报