自定义事件和js动画帧

自定义事件

	var div = document.querySelector("div");
    //  事件名就类似于收音机调频
    div.addEventListener("我的事件", function (e) {
        alert("我的事件触发了:" + e.detail);
    });

1. 第一种自定义事件的创建方式

	// createEvent创建一个事件
    var myEvent = document.createEvent("CustomEvent");
    // /*
    // 1.事件的名称
    // 2.设置事件是否可以冒泡
    // 3.设置事件是否可以阻止默认行为(是否可以preventDefault)
    // 4.事件的数据，可以通过detail属性拿到
    // */ 
    myEvent.initCustomEvent("我的事件", true, true, "事件的数据");
    // // 派发事件 >>相当于div会接收到当前事件(广播[没有接受设备])
    div.dispatchEvent(myEvent);

2. 第二种创建方式

	var data ={};
    data.detail ="上课工作";
    // 是否支持冒泡
    data.bubbles =true;
    // 是否可以取消
    data.cancelable =true;
    // 创建一个事件对象，并初始化好事件名称和数据
    var myEvent2 =new CustomEvent("我的事件",data);
    div.dispatchEvent(myEvent2);

PS:

	// 按下s键鼠标点击的事件
    var isKeyDown = false;
    document.body.addEventListener("keydown", function (e) {
        if (e.key == "s") {
            isKeyDown = true;
        }
    });
    document.body.addEventListener("keyup", function (e) {
        if (e.key == "s") {
            isKeyDown = false;js
        }
    });
    // 鼠标点击
    div.addEventListener("click", function (e) {
        //自定义事件，告诉div当前同时点击了鼠标键和s键
        if (isKeyDown) {
            var data = {};
            data.bubbles = true;
            data.detail = "12312456";
            // 把事件对象传递进去
            data.target = e.target;
            var sDJ = new CustomEvent("触发了", data);
            e.target.dispatchEvent(sDJ);
        }
    });

    // 监听
    div.addEventListener("触发了", function (e) {
        alert("你按下了s键并点击了鼠标:" + e.detail);
    });

2. 长按事件

    var div = document.querySelector("div");
    //添加的监听
    div.addEventListener("longPress", function () {
        alert("长按了");
    });
    var timeOut;
    // 当鼠标按下时，0.8秒之后创建并派发事件
    div.addEventListener("mousedown", function () {
        timeOut = setTimeout(function () {
            var longPress = new CustomEvent("longPress", {});
            div.dispatchEvent(longPress);
        }, 800);
    });
    // 当鼠标弹起的时候，取消0.8秒的延时调用
    div.addEventListener("mouseup", function () {
        clearTimeout(timeOut);
    });
    //    按下时不允许移动
    div.addEventListener("mousemove", function () {
        clearTimeout(timeOut);
    });

3. 三次点击事件

    //只要点击屏幕三次，会弹出输入框：恭喜你，
    //自定义事件你已经Ok了这句话
    document.body.addEventListener("tripleClick",function(){
        alert("三次监听收到");
    });
    // 记录当前点击的次数
    var clickCount =0;

    var timeOut;
    document.body.addEventListener("click",function(){
        // 每次点击之前，取消上一次的延迟，相当于保持连击状态
          timeOut =clearTimeout(timeOut);
          clickCount++;
         //一秒以内  三次必须点完，否则清零
          timeOut =setTimeout(function(){
             clickCount =0;
          },1000);
          if (clickCount==3) {
              var triple =new CustomEvent("tripleClick",{});
              document.body.dispatchEvent(triple);
          }
    });

js动画帧

/*
  1.基础动画:优先使用基础动画
  2.关键帧动画(js提供的动画函数，比基础动画功能强大)
  3.js动画,可拓展性最高,但是最不方便
*/
/*
从h5版本开始专门新出了一个实现js动画的api 
requestAnimationFrame函数,会利用浏览器每一帧刷新的时间来调用自身函数一次，
浏览器以每秒钟60帧的速度再刷新  
*/

// 停掉的方法和停止定时器一样也是找变量接受
    cancelAnimationFrame(aniCode);