jQuery常用方法之trigger

trigger（eventType，param），自动触发系统事件或自定义事件；

eventType：要触发的事件类型；

param：传递的参数，可传一个或多个参数，多参数要用数组或对象表示。

案例一：

eg：一个经常看到的小功能，打开一张网页，一般会看到有广告层弹出，点击它可以关闭，不点击它倒计时结束会自动关闭：

我们简单实现下：倒计时5秒之后，div消失，或倒计时期间点击div，div消失

 <div class="box"></div> //此div当做广告层
 <input type="text" value="5">//此输入框做倒计时用
 <script>
      var num = 5;//倒计时5秒
      var timer = setInterval(function(){
          num--;
          $("input").val(num);
          if( num == 0 ){//num等于0时清除定时器，触发点击事件
              clearInterval(timer);
              $(".box").trigger("click");
          }
      },1000);

      //点击div时，div消失，定时器清除
      $(".box").on("click",function(){
          $(this).css({display:"none"});
          clearInterval(timer);
          $("input").val(0);
      })
 </script>

案例二：参数传递--------1秒之后，触发点击事件，第一个参数是事件对象，第二个参数才是自定义的参数。

<div class="box"></div>
<script>
    setTimeout(function(){
          $(".box").trigger("click",1);
    },1000)
     $(".box").on("click",function(e,a){
         console.log(e)
         console.log(a)
     })
</script>

案例三：多个参数传递--------1秒之后，触发点击事件

<div class="box"></div>
<script>
    setTimeout(function(){
          $(".box").trigger("click",[1,2,3,{name:"lv"}]);
    },1000)
     $(".box").on("click",function(e,param1,param2,param3,param4){
         console.log(e)
         console.log(param1)
         console.log(param2)
         console.log(param3)
         console.log(param4)
     })
</script>

打印结果：

在es6中，利用扩展运算符，可以把所有参数都拿到：

<div class="box"></div>
<script>
    setTimeout(function(){
          $(".box").trigger("click",[1,2,3,{name:"lv"}]);
    },1000)
     $(".box").on("click",function(e,...param){
         console.log(e)
         console.log(param)
     })
</script>

打印结果：