javascript舉例介紹事件委託的典型使用場景

時間 2019-12-14

標籤 javascript 舉例介紹事件委託典型使用場景欄目 JavaScript 简体版

原文原文鏈接

在瞭解什麼是DOM事件以及給DOM事件綁定監聽器的幾種方法後，咱們來談談事件委託。

1. e.target 和 e.currentTarget

當咱們給目標元素target 綁定一個事件監聽器target.addEventListener(event,function(){}), 並指定回調函數function(e), 函數的參數e表示事件。此時e.target 與 e.currentTarget分別表示本身觸發事件的元素與被監聽的元素

<html>
<body>
<ul style='list-style:none;max-width:200px;border:1px solid;'>
  <li>點我試試</li>
<ul>
<script>
  (document.querySelector('ul')).addEventListener('click' ,function(e){
    console.log('e.target')
    console.log(e.target)
    console.log('e.currentTarget')
    console.log(e.currentTarget)
  })
  </script>
</body>
</html>

 
     
   
 
         x 
        

             
         
<html>
<body>
<ul style='list-style:none;max-width:200px;border:1px solid;'>
  <li>點我試試</li>
<ul>
<script>
  (document.querySelector('ul')).addEventListener('click' ,function(e){
    console.log('e.target')
    console.log(e.target)
    console.log('e.currentTarget')
    console.log(e.currentTarget)
  })
  </script>
</body>
</html>

這段代碼爲一個ul元素綁定了一個監聽器，當ul上發生點擊事件時，分別輸出e.target和e.currentTarget的值。

當點擊ul中的li元素時，該段代碼的在控制檯輸出的結果以下：

此時，e.target爲直接點擊的元素li，而e.currentTarget爲被監聽的元素ul。由此咱們能夠獲得一個啓發，觸發事件的元素與被監聽的元素不必定是一個元素。因而就來到了本文的重點內容——事件委託。

2. 如何進行事件委託

什麼狀況下回用到事件委託呢?舉兩個例子

1）當存在多個元素能夠共用同一個監聽器

<body>
<ul>
  <li>點<span>這裏</span></li>
  <li>點這裏</li>
</ul>
<style>
  ul, li{
  list-style:none;
  border:1px solid;
  padding:10px;
  background:#ddd
}
li{
  text-align:center;
  margin:10px;
  background:#fff
}
</style>
</body>
</html>

 
     
   
 
         x 
        

             
         
<body>
<ul>
  <li>點<span>這裏</span></li>
  <li>點這裏</li>
</ul>
<style>
  ul, li{
  list-style:none;
  border:1px solid;
  padding:10px;
  background:#ddd
}
li{
  text-align:center;
  margin:10px;
  background:#fff
}
</style>
</body>
</html>

上面的代碼中定義瞭如圖所示的一個ul，它包裹着兩個li，第一個li中還有一個子元素span。若是咱們但願點擊兩個li均執行同一條命令時，第一種方法是爲每一個li都綁定一個監聽器，但當li不少時，這樣處理就過於繁瑣。

這時咱們會想到能夠直接監聽ul，爲ul綁定事件函數，那麼只要li存在於ul的內部，點擊任意的一個li都會執行這條命令。但一樣存在一個問題，當點擊li的外部，也就是圖中的灰色區域時，命令一樣會被執行。

那麼如何僅僅在點擊li的覆蓋區域的時候才執行這段命令呢，能夠用如下這段代碼。

var ul=document.querySelector('ul')
ul.addEventListener('click',function(e){
  var el = e.target
//判斷當前點擊的元素是否爲li，若是不是，執行如下的while循環
  while(el.tagName !== 'LI'){
//若是點擊的元素爲ul，直接跳出循環
    if(el === ul){
      el = null
      break;
    }
//不然，將當前元素父元素賦給el
      el=el.parentNode
  }
//若是最後el不爲null，則打出'ok'
  if(el){
    console.log('ok')
  }
//不然，打出'你點擊的不是li'
  else console.log('你點擊的不是li')
})

 
     
   
 
         x 
        

             
         
var ul=document.querySelector('ul')
ul.addEventListener('click',function(e){
  var el = e.target
//判斷當前點擊的元素是否爲li，若是不是，執行如下的while循環
  while(el.tagName !== 'LI'){
//若是點擊的元素爲ul，直接跳出循環
    if(el === ul){
      el = null
      break;
    }
//不然，將當前元素父元素賦給el
      el=el.parentNode
  }
//若是最後el不爲null，則打出'ok'
  if(el){
    console.log('ok')
  }
//不然，打出'你點擊的不是li'
  else console.log('你點擊的不是li')
})

這段代碼實現了當點擊的區域在li範圍內時，無論點擊的是li元素自己，仍是li的子元素span，都會執行console.log('ok')，但當點擊區域超出li的範圍，則執行' console.log('你點擊的不是li')'。這就成功實現了一個事件委託。

（2）用事件委託實現動態監控

還有一種狀況，也會用到事件委託，那就是須要動態監控的時候。

看如下代碼：

<html>
<body>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>
  <button id=addButton>+</button>
</body>
</html>
<style>
li{
  border: 1px solid;
}
</style>
<script>
addButton.onclick = function(){
  var li = document.createElement('li')
  li.textContent = 'new' 
  document.querySelector('ul').appendChild(li)
}
document.querySelector('ul').onclick = function(e){
  console.log(e.target)
}
</script>
</body>
</html>

 
     
   
 
         x 
        

             
         
<html>
<body>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>
  <button id=addButton>+</button>
</body>
</html>
<style>
li{
  border: 1px solid;
}
</style>
<script>
addButton.onclick = function(){
  var li = document.createElement('li')
  li.textContent = 'new' 
  document.querySelector('ul').appendChild(li)
}
document.querySelector('ul').onclick = function(e){
  console.log(e.target)
}
</script>
</body>
</html>