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 已经哭了,当有更多其他性能隐患并发时,所有的浏览器都哭了。