事件委托

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

 
事件委托好处：
    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>
posted @ 2019-12-19 11:11  我本凡人~  阅读(222)  评论(0)    收藏  举报