javacript事件委托 排他思想 分页点击样式改变

 <div class="fat no">

        <button>1</button>

        <button>2</button>

        <button>3</button>

        <button>4</button>

        <button>5</button>

    </div>

       

    <script>

        // 事件委托的原理，给父元素添加节点映射到子结点

        var ul = document.querySelector('.fat');

         

        ul.addEventListener('click',function(e){      // 定义委托事件 e = event    

           

            var lie = document.querySelectorAll('button'); // 循环得到所以的button标签 排他思想

           

            for (var i = 0 ; i <lie.length;i++){

                for(var i=0;i<lie.length;i++){

                    lie[i].style.backgroundColor=''; // 当点击完成下一个botton该样式为空

                }

                e.target.style.backgroundColor = 'Green'; //e.target 可以得到我们点击的对象  元素点击完成给予样式

                ul.style.backgroundColor='';    // 父节点样式为空      

               

            }

        })

       

    </script>