jquery繫結事件優化網頁效能（使用on進行事件委託）
阿新 • • 發佈：2019-01-11
自身認知限制，在之前做專案使用jquery框架的時候會直接使用$(obj).click(function(){})（click可以換成其他的事件）為目標物件繫結事件，並沒有覺得有什麼不妥。今天看了一篇部落格驚著了。原來光是知其然，不知其所以然。
例子如下：在頁面中新增1000個p標籤，再給他們繫結事件。用兩種繫結方式分別統計記憶體消耗。
<!DOCTYPE html> <html> <head> <title>javascript</title> </head> <body> <div id="content"></div> </body> <script type="text/javascript" src="js/jquery-2.0.3.js"></script> <!--此處引入自己的jquery庫檔案--> <script type="text/javascript"> $(function(){ var doms = ""; for(var i = 0; i<1000;i++){ doms+="<p>測試"+i+"</p>"; } $("#content").html(doms); //第一種事件繫結方式 $("#content p").click(function () { $("#content").append("<p>我是後來的呀</p>"); }); //第二種事件繫結方式 $("#content").on("click","p",function () { $("#content").append("<p>我是後來的呀</p>"); }); })</script></html>
第一種事件繫結方式消耗記憶體為3.2M，如下圖：
第二種事件繫結方式記憶體消耗為2.7M，如下圖：
兩種方式記憶體消耗相差很多。明顯第二種使用on的事件委託形式更優，如果專案中有類似的需求，還是擇後者。並且後者還支援動態繫結。