在事件上加載腳本並觸發相同的事件

Question

我想在事件上添加某些javascript文件，比如點擊。我試圖使用JavaScript來使用相同的事件，只有當它被觸發。這是因爲腳本會減慢頁面加載速度，否則就不需要腳本。

我可以直接將腳本移動到頁腳並進行全部設置，也可以通過僅在需要時才加載才能通過事件觸發進行設置嗎？下面是我到目前爲止有：

HTML：

<a id="customId" href="#myLink"></a> 

的Javascript：

$(document).ready(function() { 
    //The async addition 
    var myJS = { 
     lazyload : function(scriptSrc) { 
      if(!this.isPresent(scriptSrc)){ 
       var scriptTag = document.createElement('script'); 
       scriptTag.src = scriptSrc; 
       scriptTag.async = true; 
       document.getElementsByTagName('head')[0].appendChild(scriptTag); 
      } 
      return false; 
     } 
    }; 

    //The event trigger needs to do something using the said script 
    if($('#customId')){ 
     //Approach 1: 
     var mapEl = document.getElementById("customId"); 
     mapEl.addEventListener("click", customEventHandler, false); 
     //mapEl.dispatchEvent(event); 
       //*where 
       customEventHandler : function(e){ 
        e.preventDefault; 
        myJS.lazyload('/jsfile.js'); 
       // Update or use link relative #href (not complete path) and use the javascript without navigating out of page. 
        //e.currentTarget.dispatchEvent(?); 
      }  

     //2nd attempt: Adds the script, but not able to trigger event to use JS 
     $('#customId').click(function(event) { 
      event.preventDefault(); 
      myJS.lazyload('/jsfile.js'); 
     //Either approach: 
     //Trigger the custom event to do an actual click after doing the lazy load, using the JS file 
(click); $('#customId').trigger('click'); //Is this correct on same element ID 

     }); 

    } 

} 

Answer 1

嘗試使用事件元素的scriptonload，定義自定義事件，以防止遞歸調用本地click事件處理程序on element

$(document).ready(function() { 
    //The async addition 
    var myJS = { 
    lazyload: function(scriptSrc, id, type) { 
     // use `.is()` to check if `script` element has `src` 
     // equal to `scriptSrc` 
     if (!$("script[src='"+ scriptSrc +"']").is("*")) { 
     var scriptTag = document.createElement("script"); 
     scriptTag.src = scriptSrc; 
     scriptTag.async = true; 
     // use `script` `onload` to trigger custom event `customClick` 
     scriptTag.onload = function() { 
      $(id).trigger(type) 
     }; 
     document.getElementsByTagName("head")[0].appendChild(scriptTag); 
     } 
     return false; 
    } 
    }; 

    $("#customId").on("click", function() { 
    myJS.lazyload("jsfile.js", "#" + this.id, "customClick"); 
    }) 
    // do stuff at `customClick` event 
    .one("customClick", function(e) { 
    customClick(e.type) 
    }); 

}); 

plnkr http://plnkr.co/edit/Rw4BRAfSYlXXe5c6IUml?p=preview