事件代理如何使用?

金木大大大發表於2023-12-04

  事件代理是一種機制,用於處理動態新增的元素或大量元素的事件繫結。透過將事件繫結到它們的父元素上,可以統一處理子元素的事件,以提高效能和程式碼簡潔度。


  在jQuery中,可以使用on()方法來實現事件代理。on()方法接受兩個引數:事件型別和處理函式。事件型別可以是已存在的事件(如click、hover等),也可以是自定義事件。處理函式可以是普通的函式,也可以是匿名函式。


  以下是使用事件代理的基本語法:


  $(父元素).on(事件型別,子元素,處理函式);


  其中,父元素是已存在的元素,子元素是要代理事件的選擇器或元素,處理函式是要執行的事件處理邏輯。


  示例1:對動態新增的按鈕進行click事件代理。


  $("div").on("click","button",function(){


  //事件處理邏輯


  });


  示例2:對大量的列表項進行click事件代理。


  $("ul").on("click","li",function(){


  //事件處理邏輯


  });


  在這兩個示例中,事件繫結是在父元素上進行的,但事件處理邏輯仍然會應用於子元素(動態新增的按鈕或大量的列表項)。這樣,無論何時新增新的按鈕或列表項,它們都會繼承父元素上的事件處理邏輯。


  透過事件代理,可以避免為每個子元素單獨繫結事件,提高效能和程式碼的可維護性。同時,它還適用於處理動態生成的元素,因為事件處理邏輯會自動應用於新新增的元素。


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/70032566/viewspace-2998614/,如需轉載,請註明出處,否則將追究法律責任。