jquery中on方法的優勢是什么

jquery中on方法的優勢：1、on()方法可以綁定動態添加到頁面元素的事件，其添加的事件處理程序適用于當前及未來的元素；2、on()方法一次性能給元素添加一個或多個事件處理程序，可以提升效率。

前端（vue）入門到精通課程：進入學習

本教程操作環境：windows7系統、jquery3.6.1版本、Dell G3電腦。

on() 方法在被選元素及子元素上添加一個或多個事件處理程序。

自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。該方法給 API 帶來很多便利，我們推薦使用該方法，它簡化了 jQuery 代碼庫。

對于單個元素注冊事件分開寫比較麻煩

$("p").click(function(){   $(this).hide(); }); $("p").mouseenter(function(){   $(this).css("background","blue"); });

所以可以通過on來一次性注冊多個事件

$("p").on({   click:function(){     $(this).hide();   },   mouseenter:function(){     $(this).css("background","blue");   } });   //還可以合并 $("div").on( "mouseenter mouseleave", function(){     $(this).toggleclass( "current"); })

jQuery綁定事件的方法有幾種，推薦使用.on()方法綁定，原因有2點：

1、on()方法可以綁定動態添加到頁面元素的事件

比如動態添加到頁面的DOM元素，用.on()方法綁定的事件不需要關心注冊該事件的元素何時被添加進來，也不需要重復綁定。有的同學可能習慣于用.bind()、.live()或.delegate()，查看源碼就會發現，它們實際上調用的都是.on()方法，并且.live()方法在jQuery1.9版本已經被移除。

使用 on() 方法添加的事件處理程序適用于當前及未來的元素（比如由腳本創建的新元素）。

bind:

function(  types, data, fn ) {   return this.on(  types, null,  data, fn ); },

live:

function(  types, data, fn ) {   jQuery( this.context  ).on( types, this.selector,  data, fn );   return this; },

delegate:

function(  selector, types, data, fn ) {   return this.on(  types, selector, data, fn ); }

2、on()方法一次性能給元素添加一個或多個事件處理程序，可以提升效率

很多文章都提到了利用事件冒泡和代理來提升事件綁定的效率，大多都沒列出具體的差別，所以為了求證，我做一個小測試。

假設頁面添加了5000個li，用chrome開發者工具Profiles測試頁面載入時間。

• 普通綁定（姑且這么稱呼它）

$("li").click(function(){   console.log(this) });

$(document).on("click","li",function(){   console.log(this) })

綁定過程的執行時間

• 普通綁定相當于在li上面分別注冊click事件，內存占用約4.2M，綁定時間約為72ms。

• .on()綁定利用事件代理，只在document上注冊了一個click事件，內存占用約2.2M，綁定時間約為1ms。

【推薦學習：jQuery視頻教程、web前端視頻】