事件委托笔记

事件委托原理：事件冒泡机制。

什么是事件委托：

事件委托——给父元素绑定事件，用来监听子元素的冒泡事件，并找到是哪个子元素的事件。

优点：1.可以大量节省内存占用，减少事件注册。比如ul上代理所有li的click事件就很不错。

2.可以实现当新增子对象时，无需再对其进行事件绑定，对于动态内容部分尤为合适

缺点：事件代理的常用应用应该仅限于上述需求，如果把所有事件都用事件代理，可能会出现事件误判。即本不该被触发的事件被绑定上了事件。

<li id="ul1>111</li>

<li>222</li>

<li>333</li>

    var oUl1 = document.getElementById('ul1');

    myAddEvent(oUl1,'click',function(e){

        var e = e || window.event;

        var target = e.target || e.srcElement;

        if(target.nodeName.toLowerCase() == 'li'){

            alert(target.innerHTML);

            target.style.background = 'red';

        }

    });

    // 事件绑定封装成js函数

    function myAddEvent(obj, ev, fn){

        if(obj.attachEvent){ // ie

            obj.attachEvent('on'+ev, fn);

        }else{

            obj.addEventListener(ev, fn, false);

        }

    }