切圖崽的自我修養－梳理Jquery API

大切圖崽發表於2019-02-16
jQueryAPI

前言

梳理一下Jquery中還不太熟悉的API

Jquery事件繫結統一用on(摒棄掉之前的click,bind),解綁事件統一用off

  1. 語法糖，支援多個事件繫結同一個函式

         
     $("p").on("mouseover mouseout",function(){
       alert(1);
       });

  2. 語法糖，支援多個事件繫結不同的函式

       
     
      $("p").on({
           mouseover:function(){alert(1)},  
           mouseout:function(){alert(2)}, 
        click:function(){alert(3)}  
         });

  3. 語法糖，支援多個事件繫結不同的函式

           $(document).ready(function(){
         $("p").on("myOwnEvent", function(event, showName){
          $(this).text(showName + "! What a beautiful name!").show();
        });
        
         $("button").click(function(){
         $("p").trigger("myOwnEvent",["Anja"]);
         });
       });

  4. 可以往callback裡傳參

           function callback(event){
         alert(event.data.msg);
       }

       $(document).ready(function(){
         $("p").on("click", {msg: "You just clicked me!"}, callback)
       });

  5. 可以給未建立的DOM上繫結事件(只能採取事件委託的形式)

         $("button").click(function(){
          $("<p class="newP">This is a new paragraph.</p>").insertAfter("button");
     });
     
     $("div").on("click",".newP",function(){
       $(this).slideToggle();
     });
     
 所以寫成這樣是無法觸發的
 
       $("button").click(function(){
              $("<p class="newP">This is a new paragraph.</                p>").insertAfter("button");
     });
     
     $(".newP").on("click",function(){
       $(this).slideToggle();
     });

    針對是大量元素都繫結了同一事件的情況，建議採用事件委託的形式對事件進行處理.
    比如我們希望點選$(`.btn`)會彈出彈框alert(“click me!”);

       
       <div class="parent">
           <span class="btn">click me</span>
           <span class="btn">click me</span>
           <span class="btn">click me</span>
           <span>default</span> 
           <span>default</span> 
       </div>

    不建議 $(`.btn`).on(`click`,function(){alert(`click me`)})
    而是建議$(`.parent`).on(`click`,`.btn`,function(){alert(`click me`)})

    因為在大量子元素上綁事件，相當於是每一個$(`.btn`)都繫結了一個匿名回撥函式，效率低，資源率佔用高，效能很差.
    我們可以利用事件向上冒泡的特性，只要在父元素上繫結一次事件處理的回撥函式即可. 因為每次子元素產生事件，冒泡到父元素時父元素會判定事件源物件e.target，如果e.target==$(`.btn`)[0], 則觸發回撥函式.

Trigger用來模擬事件觸發


    $(".btn").trigger("click");

防止事件重複觸發

比如一個btn點選之後會對某個元素開始一段動畫. 並且動畫過程期間，不再響應btn的點選，直到動畫呼叫完畢之後.
思路很簡單，對btn元素設定一個狀態標籤lock=0, 動畫呼叫期間設定lock為1,動畫完成的回撥把lock設定成0. 每次點選都判斷btn的狀態是否為可用.

Css animation回撥

Jquery有animation方法能夠對元素設定動畫，並且可以傳入callback作為動畫完成的回撥
但是能否對寫在CSS檔案中的動畫設定回撥？
答案是肯定的

CSS 動畫播放時，會發生以下三個事件：

  1. animationstart – CSS 動畫開始後觸發

  2. animationiteration – CSS 動畫重複播放時觸發

  3. animationend – CSS 動畫完成後觸發

我們只要對動畫元素監聽這三個事件，就能對對應的狀態設定回撥函式,比如


.ani{
    width:30px;
    height:30px;
    background:red;
    animation:myani 5s}
    
@keyframes myani{
    100% {width:500px;}
   }
   
...

$(`.ani`).on(`webkitAnimationEnd`,function(){alert(111)})

  ...
  
<div class="ani"></div>

在動畫完成後，會彈出彈框

Css transition回撥

和Css animation 一樣，播放完畢也會觸發事件transitionEnd

相關文章