使用原生JS实现事件委托

事件委托（Event Delegation）是JS中一项十分重要的应用，使用事件委托可以避免对每一个节点添加监听器，只要把监听器加到它们的父元素上就可以利用冒泡阶段来监听子元素的事件。接下来我们通过一段代码来理解事件委托的过程和原理。

HTML代码如下：

<style>
    li{
      border:1px solid blue;
      text-align:center;
    }
    ul{
      background-color:rgba(255,0,0,0.5);
      padding:20px;
    }
  </style>
  <ul>
    <li>小明</li>
    <li>小华</li>
    <li>小强</li>
    <li>小胖</li>
    <li>小红</li>
  </ul>

在没有添加JS代码的情况下显示出来的效果：

没有添加JS代码

现在要添加JS代码，从最基础的来：

var list = document.querySelectorAll('li')

function fn(){
  console.log('OK')
}

list[0].addEventListener('click',fn)
list[1].addEventListener('click',fn)
list[2].addEventListener('click',fn)
list[3].addEventListener('click',fn)
list[4].addEventListener('click',fn)

这段代码的思路就是，先用document.querySelectorAll()方法访问到所有的li节点，并且把这些标签储存在一个数组里，然后访问每个具体的节点并且用addEventListener给所有的li节点添加监听器，当鼠标点击各个li时，会触发fn函数并且打出OK字符串。

但是这样真的很麻烦呀，而且要有很多重复的代码，那么我们可以把JS代码改成这样：

var list = document.querySelectorAll('li')

function fn(){
  console.log('OK')
}

var ul = document.querySelector('ul')
ul.addEventListener('click',fn)

这一串代码的意思就是说，我监听了li的父级元素，如果你点击了ul就会触发fn函数；同时，即使你点击了li的内容，因为li是ul的子无素，在冒泡阶段，fn函数依然会被触发。

但是这里有一个问题，我想只点击那几个li不点击ul就能触发事件，就像最早的那个代码一样，那我们就可以在fn函数里加点条件。JS代码修改如下：

var list = document.querySelectorAll('li')

function fn(e){
  if(e.target.tagName ==='LI')
  console.log('OK')
}

var ul = document.querySelector('ul')
ul.addEventListener('click',fn)

相对于之前的代码，这个代码在fn函数里增加了一件if条件来筛选，使用浏览器默认e参数，如果e.target（你点击的元素）的tagName是li的话，就打出OK字符串，如果不是的话就不打出来，这样的效果就和之前那个麻烦的代码一样了，而且还精简了一些。注意：tagName的返回值是大写的，之前被坑过。

但是写到这里又有新问题出现了233333，如果我点击的HTML代码里li元素里还有其它的子元素呢怎么办呢？比如说在第一个li元素里有一个span标签？新的HTML的代码如下：

<style>
    li{
      border:1px solid blue;
      text-align:center;
    }
    ul{
      background-color:rgba(255,0,0,0.5);
      padding:20px;
    }
  </style>
  <ul>
    <li><span>小明</span></li>
    <li>小华</li>
    <li>小强</li>
    <li>小胖</li>
    <li>小红</li>
  </ul>

这一部分的HTML/CSS代码和之前的有差异，在第一个li里放入了一个span标签把小明又往里包了一层。如果按照上面JS代码进行运行的话，因为if条件判断句限制了当前点击的元素必须是li所以当我点击了处于span标签里的小明，事件就监听不到了。

哎~💔💔💔我听见了心碎的声音233333。写到这里，还得继续想办法，既然我点击了span里面的小明无法触发事件，但是包住小明的span标签的爸爸是li啊，它是可以触发的啊，那是不是只要我想办法让点击的元素是li或者它的爸爸是li不就行了吗？？?好，我们继续写，新的JS代码如下：

var list = document.querySelectorAll('li')

function fn(e){
  if(e.target.tagName ==='LI' || e.target.parentNode.tagName ==='LI') 
  console.log('OK')
}

var ul = document.querySelector('ul')
ul.addEventListener('click',fn)

这一段JS代码相对于上面的变化的地方在于fn函数的if条件句中额外增加了一个‘或者’的逻辑运算符，意思就是说，如果我点击的元素是li或者我点击的元素的爸爸是li的话都可以打出OK字符串。这样的话问题就算是解决了。

但是，怕就怕在这个但是。现在的小明处于span标签里，span标签只有爸爸（li标签），但是如果span还有爷爷呢，还有爷爷的爸爸和爷爷的爷爷呢？这怎么办，总不能给span的所有祖先都增加一个或者条件吧？这还不坑死？那就只能继续改：

var list = document.querySelectorAll('li')

function fn(e){
  var el = e.target
  while(el.tagName !== 'LI'){
    el = el.parentNode
  }
  console.log(el)
}

var ul = document.querySelector('ul')
ul.addEventListener('click',fn)

改完以后的代码就稍等有点绕了。这里的代码相对于前面的代码它添加了一个while循环。大致思路就是，我先声明一个变量el，然后把点击的元素（e.target）赋值给el，然后启用一个while循环，当el的tagName不是li的时候，就把el的父级元素重新赋值给el再进行检查，只要el的tagName是li了，那就跳出这个循环，执行console.log(el)把el打出来。

好像是皆大欢喜了，可是，可是。。。新的JS代码是基于一个基本前提的：那就是你点击的元素往上找祖先元素是一定可以找到li的，但是在实际操作中，我们所点击的元素的祖先元素是极有可能不是li的，那怎么办？总不能一直在while循环里跑吧，即使在while循环里跑，总会跑到body和document的，再往上好像就返回null了。

为了模拟这种情况，我们就要改一下HTML/CSS代码了。

<style>
    li{
      border:1px solid blue;
      text-align:center;
    }
    ul{
      background-color:rgba(255,0,0,0.5);
      padding:20px;
    }
    div{
      background-color:green;
    }
  </style>
  
  <ul>
    <li><span>小明</span></li>
    <li>小华</li>
    <li>小强</li>
    <li>小胖</li>
    <li>小红</li>
  </ul>
  <div><span>班长大人</span></div>

页面效果如下：

新的HTML代码

新的HTML代码增加了一个div，里面有一个儿子元素span。如果按照最新的逻辑写出来的JS代码如下：

var list = document.querySelectorAll('li')

function fn(e){
  var el = e.target
  while(el.tagName !== 'LI'){
    el = el.parentNode
    console.log(el)
  }
  console.log(el)
}

var ul = document.querySelector('ul')
ul.addEventListener('click',fn)
var div = document.querySelector('div')
div.addEventListener('click',fn)

但是在点击了班长大人以后在浏览器里运行的结果就悲剧了：

悲剧的结果

浏览器最后返回了一个null，为啥呀？因为在div里压根就没有什么li元素，所以按照代码，浏览器一直往上找找到了document都没有找到就只好返回一个null了。有点冏冏冏~

所以还要继续改JS代码：

var list = document.querySelectorAll('li')

function fn(e){
  var el = e.target
  while(el.tagName !== 'LI'){
    el = el.parentNode
    if(el.tagName === 'BODY'){
      el = null
      break;
    }
  }
  if(el){
    console.log('你点击了li')
  }else{
    console.log('你没有点击li')
  }
}

var ul = document.querySelector('ul')
ul.addEventListener('click',fn)
var div = document.querySelector('div')
div.addEventListener('click',fn)

这部分JS代码的意思就是说，如果你往上找到了body元素那就得了别再找往上找了，直接把el置空然后跳出循环吧。

写到这里，终于写完了，也写不动了。最后来梳理一下这个JS代码吧。先看最下面的两段，分别取到了ul和div，再对它们进行监听。当这ul和div以及它们的子元素被点击时（冒泡阶段），就会触发fn函数。

接下来看fn函数中的内容。先声明一个el，然后把当前点击的元素赋值给它，在接下来的while循环中，如果el的tagName不是li就找到它的爸爸再把它给el，如果它的爸爸是body的话就直接置空然后跳出循环。

以上的内容为饥人谷直播十一班第二十一课事件委托部分的笔记，我实际上就把它用自己的话再讲一遍而已。

完。