js中事件委托小记录

事件委托如何实现？

• 111
• 222
• 333
• 444

实现功能是点击li，弹出li里的内容： window.onload = function(){ var oUl = document.getElementById("ul1"); var aLi = oUl.getElementsByTagName('li'); for(var i=0;i

那么我们用事件委托的方式做又会怎么样呢？
window.onload = function(){
　　var oUl = document.getElementById(“ul1”);
　　oUl.onclick = function(ev){
　　　　var ev = ev || window.event;
　　　　var target = ev.target || ev.srcElement;
　　　　if(target.nodeName.toLowerCase() == ‘li’){
　　　　　　　 alert(target.innerHTML);
　　　　}
　　}
}
这样改下就只有点击li会触发事件了，且每次只执行一次dom操作，如果li数量很多的话，将大大减少dom的操作，优化的性能可想而知！
//===============================================================

上面的例子是说li操作的是同样的效果，要是每个li被点击的效果都不一样，那么用事件委托还有用吗？

window.onload = function(){
var Add = document.getElementById(“add”);
var Remove = document.getElementById(“remove”);
var Move = document.getElementById(“move”);
var Select = document.getElementById(“select”);

        Add.onclick = function(){
            alert('添加');
        };
        Remove.onclick = function(){
            alert('删除');
        };
        Move.onclick = function(){
            alert('移动');
        };
        Select.onclick = function(){
            alert('选择');
        }
        
    }

事件委托：
window.onload = function(){
var oBox = document.getElementById(“box”);
oBox.onclick = function (ev) {
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLocaleLowerCase() == ‘input’){
switch(target.id){
case ‘add’ :
alert(‘添加’);
break;
case ‘remove’ :
alert(‘删除’);
break;
case ‘move’ :
alert(‘移动’);
break;
case ‘select’ :
alert(‘选择’);
break;
}
}
}
}

//=============================================================

• 11111111111

• 22222222
• 3333333333
• 4444444

如上列表，有4个li，里面的内容各不相同，点击li，event对象肯定是当前点击的对象，怎么指定到li上，下面我直接给解决方案：
var oUl = document.getElementById(‘test’);
oUl.addEventListener(‘click’,function(ev){
var target = ev.target;
while(target !== oUl ){
if(target.tagName.toLowerCase() == ‘li’){
console.log(‘li click~’);
break;
}
target = target.parentNode;
}
})