js事件委托

事件委托是利用事件流的特征解决一些开发需求的知识技巧

优点：减少注册次数，可以提高程序性能
原理：事件委托其实是利用事件冒泡的特点。
给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件
实现：事件对象.target.tagName可以获得真正触发事件的元素

事件委托的好处是什么？

减少注册次数，提高了程序性能

事件委托是委托给了谁？父元素还是子元素？

父元素

如何找到真正触发的元素？

事件对象.target.tagName

事件委托的例子

点击li会变色，点击p不会变色

 <ul>
    <li>第1个孩子</li>
    <li>第2个孩子</li>
    <li>第3个孩子</li>
    <li>第4个孩子</li>
    <li>第5个孩子</li>
    <p>不要变色</p>
  </ul>
  <script>
    const ul = document.querySelector('ul')
    ul.addEventListener('click',function(e){
      if (e.target.tagName ==='LI'){
        e.target.style.color = 'red'}
    })
  </script>

在没有学事件委托的时候，让ul里的
li变颜色必须要用for循环，绑定事件，就比较浪费资源。事件委托，通过冒泡事件，点击li会去掉用ul的事件，比较方便。