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

前端（vue）入門到精通課程：進(jìn)入學(xué)習(xí)

本教程操作環(huán)境：windows7系統(tǒng)、jquery3.6.1版本、Dell G3電腦。

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

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

對(duì)于單個(gè)元素注冊(cè)事件分開寫比較麻煩

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

所以可以通過on來一次性注冊(cè)多個(gè)事件

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

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

1、on()方法可以綁定動(dòng)態(tài)添加到頁面元素的事件

比如動(dòng)態(tài)添加到頁面的DOM元素，用.on()方法綁定的事件不需要關(guān)心注冊(cè)該事件的元素何時(shí)被添加進(jìn)來，也不需要重復(fù)綁定。有的同學(xué)可能習(xí)慣于用.bind()、.live()或.delegate()，查看源碼就會(huì)發(fā)現(xiàn)，它們實(shí)際上調(diào)用的都是.on()方法，并且.live()方法在jQuery1.9版本已經(jīng)被移除。

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

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()方法一次性能給元素添加一個(gè)或多個(gè)事件處理程序，可以提升效率

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

假設(shè)頁面添加了5000個(gè)li，用chrome開發(fā)者工具Profiles測(cè)試頁面載入時(shí)間。

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

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

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

綁定過程的執(zhí)行時(shí)間

• 普通綁定相當(dāng)于在li上面分別注冊(cè)click事件，內(nèi)存占用約4.2M，綁定時(shí)間約為72ms。

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

【推薦學(xué)習(xí)：jQuery視頻教程、web前端視頻】