1. 程式人生 > >事件委托

事件委托

操作 原理 rip clas con 這就是 .html button uga

1.時間委托的原因

推薦看這個博客,寫的非常具體 http://www.cnblogs.com/liugang-vip/p/5616484.html。

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

2.原理:

利用事件冒泡原理,讓父級代為處理程序,每次只執行一個dom節點事件,舉例如下:

<button class=‘add‘>添加</button>
<
ul id=‘test‘> <li>a</li> <li>b</li> <li>c</li> <li>d</li> <li>e</li> <li>f</li> <li>g</li> </ul>

$(function(){
$(‘.add‘).on(‘click‘,function(){
$("#test").append(‘<li>oooo</li>‘)
});
$("#test").on(‘click‘,‘li‘,function(){
console.log($(this).text());
})
})


 

事件委托