zoukankan      html  css  js  c++  java
  • 触屏事件 特殊事件 事件的绑定

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

            // 标签对象.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 时 第二个参数,没办法输入要删除的函数的内存地址
            // 就算定义一个相同的函数内存地址也是不同的
            // 函数名称形式,等于绑定一个函数名称/变量名称,可以通过删除这个函数名称/变量来删除内容
            // 
            // 监听时,如果绑定的事件处理函数,不需要删除,两种语法都可以
            //       如果绑定的事件处理函数,需要删除,只能监听函数名称/变量名称,不允许是匿名函数形式
    右侧打赏一下 代码改变世界一块二块也是爱
  • 相关阅读:
    Java之this关键字的用法
    JavaSE 之 final 初探
    LinkedList 浅析示例
    HashSet 浅析示例
    ArrayList 浅析示例
    MySQL5.7 修改密码
    IE10 和 Chrome50 对日期 new Date() 支持的区别
    databtables 设置(显示)行号
    团队管理
    财务名称
  • 原文地址:https://www.cnblogs.com/ht955/p/14077196.html
Copyright © 2011-2022 走看看