1. 程式人生 > >js 使用事件委托

js 使用事件委托

事件委托 或選擇器 監聽 事件 -h document listener 列表 例子

想象一下,如果你有一個無序列表,裏面有一堆<li>元素,每一個<li>元素都會在點擊的時候觸發一個行為。這個時候,你通常會在每一個元素上添加一個事件監聽,但是如果當這個元素或者你添加了監聽的這個對象會被頻繁的移除添加呢?這個時候,你在移除添加元素的同時需要處理事件監聽的移除和添加。這個時候,我們就需要引入事件委托了。

事件委托是在父級元素上添加一個事件監聽,來替代在每一個子元素上添加事件監聽。當事件被觸發時,event.target會評估相應的措施是否需要被執行。下面我們給出了一個簡單的例子:

Javascript代碼
  1. // 獲取元素,添加事件監聽
  2. document.querySelector(‘#parent-list‘).addEventListener(‘click‘, function(e) {
  3. // e.target 是一個被點擊的元素!
  4. // 如果它是一個列表元素
  5. if(e.target && e.target.tagName == ‘LI‘) {
  6. // 我們找到了這個元素,對他的操作可以寫在這裏。
  7. }
  8. });



上面的例子是不可思議的簡單,當事件發生的時候,它沒有輪詢父節點去尋找匹配的元素或選擇器,且它不支持基於選擇器的查詢(例如用class name,或者id來查詢)。所有的JavaScript框架提供了委托選擇器匹配。重點是,你避免了為每一個元素加載事件監聽,而是在父元素上加一個事件監聽。這樣大大的增加了效率,並且減少了很多維護!

js 使用事件委托