事件委托

譬如有一组li在ul中.

给每一个li加事件可以加在ul上.

<ul id="ul1">
    
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
    
</ul>


    <script type="text/javascript">
        

        window.onload =function(){
            var oUl = document.getElementById('ul1');
            var aLi = oUl.getElementsByTagName('li');

            // for(var i=0;i<aLi.length;i++){
            //     aLi[i].onmouseover = function(){
                    
            //         this.style.background = 'red';
            //     }
            //     aLi[i].onmouseout = function(){
            //         this.style.background = '';
            //     }
            // }

            oUl.onmouseover = function(ev){
                var ev = ev||window.event;
                var target = ev.target||ev.srcElement;
                target.style.background = 'red';
            }
            oUl.onmouseout = function(ev){
                var ev = ev||window.event;
                var target = ev.target||ev.srcElement;
                target.style.background = '';
            }
        }

通过window下的event.target对象就可以找到移入的li.

ie下是event.srcElement.

但是有一个bug,就是鼠标移到标签左边时会选中整个ul.

 

nodeName:找到当前元素的标签名.

利用ev.target.nodeName可以区分LI和UL,注意是大写的.

所以可通过 .toLowerCase()转换成小写的.

于是事件监听的代码块就变成:

    oUl.onmouseover = function(ev){
                var ev = ev||window.event;
                var target = ev.target||ev.srcElement;
                if(target.nodeName.toLowerCase()=='li'){
                    target.style.background = 'red';
                }
            }
            oUl.onmouseout = function(ev){
                var ev = ev||window.event;
                var target = ev.target||ev.srcElement;
                if(target.nodeName.toLowerCase()=='li'){
                    target.style.background = '';
                }
            }

好处:

1.可以提高性能;

2.新添加的元素也会带该事件.

    window.onload =function(){
            var oUl = document.getElementById('ul1');
            var aLi = oUl.getElementsByTagName('li');
            var oInput = document.getElementsByTagName('input')[0];
            // for(var i=0;i<aLi.length;i++){
            //     aLi[i].onmouseover = function(){
                    
            //         this.style.background = 'red';
            //     }
            //     aLi[i].onmouseout = function(){
            //         this.style.background = '';
            //     }
            // }
            var iNow = 4;
            oUl.onmouseover = function(ev){
                var ev = ev||window.event;
                var target = ev.target||ev.srcElement;
                if(target.nodeName.toLowerCase()=='li'){
                    target.style.background = 'red';
                }
            }
            oUl.onmouseout = function(ev){
                var ev = ev||window.event;
                var target = ev.target||ev.srcElement;
                if(target.nodeName.toLowerCase()=='li'){
                    target.style.background = '';
                }
            }
            oInput.onclick =function(){
                iNow++;
                var oLi = document.createElement('li');
                oLi.innerHTML = 1111*iNow;
                oUl.appendChild(oLi);
            }
        }