JS什么是事件代理

事件代理,又称之为事件委托,是JS中绑定事件的常用技巧,顾名思义,事件代理就是把原本需要绑定在子元素上的事件委托给父元素,事件代理的原理是冒泡机制。下面我来举个例子:

添加按钮

<ul id="uls">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

<script>
var lis = document.getElementsByTagName("li"),
    btn = document.getElementById("btn"),
    uls = document.getElementById("uls");

btn.onclick = function(){
    var len = lis.length;
    var li = document.createElement("li");
    li.innerHTML = len;
    uls.appendChild(li);
}

uls.onclick = function(e){
    var e = window.event || e;
    var tar = e.target || e.srcElement;
    if(tar.nodeName=='LI'){//注意这里要大写
        tar.style.background='red';
    }

}
//本身是给li添加事件，现在委托在ul身上
//如果不这么做，之后添加的li将绑定不了事件，因为js执行的时候lis.length已经定了
// for(var i=0;i<lis.length;i++){
//     lis[i].onclick = function(){
//         this.style.background='red'
//     }
// }
</script>