事件委托

 

事件委托：利用冒泡的原理，把事件加到父级上，触发执行效果

好处：1.提高性能 2.新添加的元素还会有之前的事件

event对象：事件源：不管在哪个事件中，只要你操作的那个元素就是事件源

兼容问题：ie：window.event.srcElement  标准：event.target

nodeName:此方法用来找到当前元素的标签名  大写

 

例子：ul下面包含几个li 在鼠标移入li中触发事件   同时，点击add按钮之后添加的li也能拥有此事件。

通常的做法是

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

　但是当此li数量过多时，则会带来性能的影响

所以将li的事件委托给父级ul上

完整代码如下：

<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload = function(){
            var oUl = document.getElementById('ul1');
            var aLi = oUl.getElementsByTagName('li');
            var oInput = document.getElementById('input1');
            var iNow = 4;
            oInput.onclick = function(){    //add按钮点击时添加li功能
                iNow++;
                var oLi = document.createElement('li');
                oLi.innerHTML = 1111 *iNow;
                oUl.appendChild (oLi);
            };

            oUl.onmouseover = function(ev){
                var ev = ev || window.event;
                //为了兼容性，ie为window.event.srcElement,标准浏览器为event.target
                var target = ev.target || ev.srcElement;
                //判断nodeName。如果是li就执行，这样可以避免ul也执行事件。获取到的标签是大写的li。
                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 = '';
                }
            }
        };
    </script>
</head>
<body>
<ul id="ul1">
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>
<input type="button" value="add" id="input1" /> 
</body>

 

　

 

posted @ 2016-02-17 16:02  绵绵面包  阅读(159)  评论(0)  编辑  收藏  举报