事件委托

事件委托好处:

1.提供性能。

2.添加元素仍然有以前的事件效果。

js片段

window.onload = init;
function init(){
    var oUl =document.getElementById('ul');
    var oInput = document.getElementById('input');
    var iNow =4;
    oInput.onclick = function(){
        iNow++;
        var oLi = document.createElement('li');
        oLi.innerHTML = ""+iNow+"";
        oUl.appendChild(oLi);
        }
    oUl.onmouseover=function(ev){
        var ev = ev || window.event;
        var target =ev.srcElement||ev.target;
        if(target.nodeName.toLocaleLowerCase()=="li"){
            target.style.backgroundColor="red";
            }
        }
    oUl.onmouseout=function(ev){
        var ev = ev || window.event;
        var target =ev.srcElement||ev.target;
        if(target.nodeName.toLocaleLowerCase()=="li"){
            target.style.backgroundColor="";
            }
        }
    }

html片段

<input id="input" type="button" value="点击" />
<p>1.提高性能</p>
<p>2.新添加的元素还会有以前的事件例如微博应用</p>
<ul id="ul">
    <li>11111</li>
    <li>22222</li>
    <li>33333</li>
    <li>44444</li>
</ul>

原文地址:https://www.cnblogs.com/dm511418503/p/2942729.html