JQuery的on代理方法是一種常見的事件綁定方法,它可以對動態添加的元素進行事件綁定,從而減少代碼冗余和提高性能。
$(document).on('click', '.btn', function(){ alert('點擊了按鈕'); });
在上面的代碼中,我們使用document對象來代理按鈕的點擊事件,并使用CSS選擇器‘.btn’來篩選出所有的按鈕元素。這樣做的好處是無論是之前頁面加載時就存在的按鈕還是后續動態添加的按鈕,都能夠響應點擊事件。
$(document).on('mouseenter', '.card', function(){ $(this).addClass('active'); }); $(document).on('mouseleave', '.card', function(){ $(this).removeClass('active'); });
除了點擊事件外,on代理還可以代理其他類型的事件,比如鼠標移入和移出事件。上面的代碼就是為所有帶有card類的元素添加鼠標移入和移出事件,當鼠標移入時,元素會添加一個active類,移出時則會移除該類。
$(document).on('submit', 'form', function(e){ e.preventDefault(); // 處理表單提交邏輯 });
on代理除了可以代理元素的自定義事件,還能夠代理瀏覽器默認事件。上面的代碼就是為頁面中的所有表單添加了一個submit事件,并在事件處理函數中取消了默認提交行為。
總之,on代理是一個非常強大的事件綁定方法,能夠幫助我們優化頁面性能,避免重復代碼的出現,是學習JQuery必不可少的一部分。