事件委托

事件委托：将某个事件委托给另一个元素( 委托给父级元素这里的父级可以是直接父元素也可以是爷爷曾爷爷... )

事件委托好处：

1、为某些元素的父级元素添加事件，提高程序的执行效率

2、动态创建的元素添加事件时，可以将事件添加在动态创建的函数体外面

委托实现：

父级元素.onclick = function(){ ... }

父级元素.addEventListener("事件",function(){ ... })

获取事件源兼容：

target = e.target || e.srcElement;

不是所有的事件都可以实现委托，不能实现冒泡的事件就不能实现委托

委托实现机制：

利用事件冒泡或捕获机制

不是所有的事件都能够实现事件委托 onload onfocus onblur

委托实现方式:

第一种：父级元素.事件 = function（）{}

第二种：父级元素.addEventListener("",function(){ })

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div>
            <ul>
                <li>孩子多个1</li>
                <li>孩子多个2</li>
                <li>孩子多个3</li>
                <li>孩子多个4</li>
                <li>孩子多个5</li>
                <li>孩子多个6</li>
                <li>孩子多个7</li>
                <li>孩子多个8</li>
                <li>孩子多个9</li>
                <li>孩子多个10</li>
                <li>孩子多个11</li>
                <li>孩子多个12</li>
                <li>孩子多个13</li>
                <li>孩子多个14</li>
                <li>孩子多个15</li>
                <li>孩子多个16</li>
                <li>孩子多个17</li>
                <li>孩子多个18</li>
                <li>孩子多个19</li>
                <li>孩子多个20</li>
                <p>孩子多个20</p>
            </ul>
        </div>
    </body>
</html>
<script>
    //事件委托 ： 将事件委托给其他元素
    //当为多个同类的元素添加相同事件时 可以将事件添加到这些元素的父级元素上  
    
    //为所有的li添加单击事件(事件源是li)
    var oUl = document.querySelector("ul");
    oUl.onclick = function(e){
        var e = e || event;
        //重新获取事件源
        var target = e.target || e.srcElement;
        //alert( target.tagName );
        if( target.tagName.toLowerCase() == "li" ){
            target.style.backgroundColor = "pink";
        }
    }
    
    /*oUl.addEventListener( "click" , function(e){
        var e = e || event;
        //重新获取事件源
        var target = e.target || e.srcElement;
        alert( target.tagName );
    },false )*/
</script>