javascript事件委托

在引入事件委托以前，首先来看下面这个例子：点击改变li的背景颜色。

<ul id="container">
    <li>1</li>
    <li>2</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

    window.onload = function () {
        var liLis = document.getElementsByTagName('li');
        for (var i = 0; i < liLis.length; i++) {
            //addEventListener不兼容ie9如下版本，请自行用attachEvent作兼容处理
            liLis[i].addEventListener('click', function (ev) {
                //兼容ie低版本
                var ev = ev || window.event;
                var target = ev.target || ev.srcElement;
                target.style.background = 'red';
            }, false)
        }
    }

上面能够作到，点击li，改变li的背景颜色为红色。可是请思考一个 问题，若是页面存在不少的li，那么使用for循环给全部的li都绑定click事件的话就将直接影响到页面的总体运行性能，缘由是每一个函数都是对象，都会占用内存，内存中的对象越多，性能就越差，其次事先指定全部事件处理程序而致使DOM访问次数，会延迟整个页面的交互就绪时间。针对“事件处理程序过多”这个问题， 事件委托这个解决方案就诞生了。

 

那么 什么是事件委托呢？事件委托就是利用事件冒泡，只指定一个事件处理程序，就能够管理某一类型的全部事件。说简单点儿，上面的click事件我不用给每一个li都绑定，只需在ul（DOM树中尽可能高的层次上）上绑定一个click事件，就能够管理全部li的click事件。

下面请看实现代码。

    window.onload = function () {
        var ul = document.getElementById('container');
        //addEventListener不兼容ie9如下版本，请自行用attachEvent作兼容处理
        ul.addEventListener('click', function (ev) {
            //兼容ie低版本
            var ev = ev || window.event;
            var target = ev.target || ev.srcElement;
            //nodeName:找到元素标签名
            if (target.nodeName.toLowerCase() == 'li') {
                target.style.background = 'green';
            }
        }, false)
    }

上面这么作的 好处：页面中设置事件处理程序所需时间更少，只添加一个事件处理程序所需的DOM引用更少，所花的时间也更少；整个页面占用的内存空间更少，可以提高总体性能。

 

注意：1.对于使用appendChild方法添加的元素，在使用事件委托后，也可以绑定上事件；2，最适合采用事件委托技术的事件包括click、mousedown、mouseup、keydown、keyup和keypress。虽然mouseover和mouseout事件也冒泡，可是要适当处理它们并不容易，并且常常须要计算元素的位置。（由于当鼠标从一个元素移到其子节点时，或者当鼠标移出该元素时，都会触发mouseout事件  ）这点请读者自行验证。