jQuery的事件委托方法之on、live、delegate


前言

  事件委托淺談,js界里很火熱的一項技術應該就有‘事件委托(event delegation)’了,什么是事件委托呢?我的理解是這樣的,想給子元素添加事件反而添加到父元素的身上,當然這個認識十分淺顯哈。接下來就說說具體應用場景。

  (1)考慮一個ul,在li的數量非常少的時候,為每一個li添加事件當然會使用for循環;但是數量多的時候這樣做太浪費內存,長到上百上千上萬的時候,為每個li添加事件就會對頁面性能產生很大的影響。

  (2)給一個ul里面的幾個li添加了事件但是如果動態又生成了li則剛生成的li不具備事件這時就需要用到委托。

 
在js中,添加到頁面上的事件處理程序的多少將直接關系到頁面運行的整體性能,因為需要不斷的與dom節點進行交互,訪問dom次數越多,引起瀏覽器重繪與重排的次數也就越多,就會延長整個頁面的交互就緒時間。
這就是性能優化,減少dom操作的原因;
 
如果采用事件委托,就會將所有的操作放到js程序里面,與dom的操作就只交互一次,這樣減少了dom交互次數,性能就會提升;
 

事件委托原理

事件委托就是利用事件冒泡原理實現的!
事件冒泡:就是事件從最深節點開始,然后逐步向上傳播事件;
例:頁面上有一個節點樹,div > ul  > li  >  a
比如給最里面的a 加一個click 事件,那么事件就會一層一層的往外執行,執行順序 a > li > ul > div,  有這樣一個機制,當我們給最外層的div 添加點擊事件,那么里面的ul , li  , a  做點擊事件的時候,都會冒泡到最外層的div上,所以都會觸發,這就是事件委托,委托他們父集代為執行事件;
 
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</body>
 $(function () {
        $("ul").on("click","li",function () {
            alert(1);
        })
    });

以上代碼就是事件委托的實現。。。。今天就到這里吧,,噢耶~

 
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM