javascript事件委托

事件委托可以

　　来解决这个因绑定事件随着按钮增加而可能导致的性能问题。原理很简单，利用 Javascript 的事件冒泡，我们可以把事件的绑定从按钮移到它们的父级元素上，不管按钮有多　　　　少，它们只有一个共同的父级元素，那样我们只需要绑定一次事件就可以了

var wrap = document.getElementById('wrap'),
    inputs = wrap.getElementsByTagName('input');
 
wrap.onclick = function (ev) {
    var ev = ev || window.event,
    target = ev.target || ev.srcElement;
    for (var i = 0, l = inputs.length; i < l; i++) {
        if (inputs[i] === target) {
            alert(i)
        }
    }
}

 　　　现有如下的HTML结构：

　　　　

<div id="wrap">
    <input type="button" value="按钮一" />
    <input type="button" value="按钮二" />
    <input type="button" value="按钮三" />
    <input type="button" value="按钮四" />
    <input type="button" value="按钮五" />
</div>

如下的绑定事件方式：会产生闭包的效果，每个按钮绑定的是同一个效果事件。

var wrap = document.getElementById('wrap'),
    inputs = wrap.getElementsByTagName('input');
 
for (var i = 0, l = inputs.length; i < l; i++) {
    inputs[i].onclick = function () {
        alert(i);
    }
}

改进方式如下：

var wrap = document.getElementById('wrap'),
    inputs = wrap.getElementsByTagName('input');
 
for (var i = 0, l = inputs.length; i < l; i++) {
    (function (cur) {
  //给绑定的事件创造一个执行环境      
        inputs[cur].onclick = function () {
            alert(cur);
        }
    })(i) 
}

但这里面的缺陷如下:

　　我们是通过循环 + 闭包给 button 按钮上绑定事件，我们知道，在 JavaScript 中函数也是对象，对象就会占用内存，现在的例子中只有 5 个按钮，或许你会认为这样的性能开销可以忽略不计，但是如果当我们有 50个，甚至 500 个按钮的时候，IE 已经哭了，当有更多其他性能隐患并发时，所有的浏览器都哭了。