javaScript:实现事件委托时，target属性的兼容性（针对老版本IE浏览器）

e.target ||e.srcElement   //e.srcElement用于老版本IE浏览器

通过菜单栏案例来演示事件委托效果

• 事件委托原理形象化理解：子元素li将事件委托给父元素ul
• 操作：给父元素ul绑定点击事件，当我们点击每个li时，能够得出对应li里面的内容

代码如下：

<h1>动画片</h1>
    <ul>
        <li>火影忍者</li>
        <li>喜羊羊</li>
        <li>美羊羊</li>
        <li>懒洋洋</li>
        <li>沸羊羊</li>
    </ul>
    <button>添加</button>

<script>
        var ul=document.querySelector("ul")
        var btn=document.querySelector("button")
        //给ul对象绑定点击事件,把li中的点击效果委托给ul去完成
        ul.onclick=function(e){
            console.log(e)
            var e = e || window.event
            var tar=e.target ||e.srcElement
            //判断当前点击的对象是否为li
            if(tar.nodeName=="LI"){
                console.log(tar.innerHTML)
            }
        }

        btn.onclick=function(){
            //创建新的li对象
            var newLi=document.createElement('li')
            //添加文本
            newLi.innerHTML="海贼王"
            //把新节点追加到ul中
            ul.appendChild(newLi)
        }
        /* 
        事件委托注意事项:
            1、只能把子元素委托给结构父级
            2、只能委托相同类型的事件
        */
    </script>