其实,没有什么新知识,只是为了方便其他需要阅读的朋友,对自己来讲,也是一种积累,所以这只是一个javascript,鸟儿可以尽情享受。
在你进入这个问题之前,让我们先热身。
现在有以下HTML结构:
复制代码代码如下所示:








下面的Javascript代码:
复制代码代码如下所示:
VaR套= document.getelementbyid('wrap),
输入= wrap.getelementsbytagname(输入的);

对于(var i = 0,L = inputs.length;i < L;i++){
输入{我}。onclick =函数(){
警报(一);
}
}

请问执行的结果是什么
***************************线*************************** / /
如果你的答案是点击按钮,那么当前按钮的索引值是我,而你在我的陷阱里,你不妨试试看。不管你点击哪个按钮,它都会保持警惕(5)。

为什么这个看似合理的结果与实际情况不同事实上,这是很好理解的。
因为我只是事件绑定,而不是执行。当我们执行onclick事件,我已经在循环的价值。所以每个按钮都是警报(5)也就不足为奇了。

那么,如果我们要实现单击按钮,那么当前警报按钮的索引值i呢这里使用了Javascript中隐藏机器的概念闭包,我们可以在一个壁橱中重写上面的js,并将i值保存在for循环内存中。代码如下:
复制代码代码如下所示:
VaR套= document.getelementbyid('wrap),
输入= wrap.getelementsbytagname(输入的);

对于(var i = 0,L = inputs.length;i < L;i++){
(函数){
电流输入{ }。onclick =函数(){
警报(电流);
}
})(一)
}

再试一次吗它确实是一个警报指数,但到目前为止它只是一个开胃菜,而且才刚刚开始!
以上的方法,我们通过闭环+按钮上绑定的事件,我们知道Javascript是一个函数对象,该对象将被记忆,只有5个按钮现在,例如,你可能认为的性能开销是微不足道的,但当我们有50个,甚至500个按钮,IE一直在哭,当有更多的风险,当其他的并发性能,所有的浏览器都哭了。

回到示例,我们可以使用事件委托的方法来解决由于按钮增加而增加绑定事件导致的性能问题,原理非常简单。通过Javascript事件冒泡,我们可以将事件从按钮到其父元素的绑定移动。不管它们有多少个按钮,它们只有一个公共父元素,所以我们只需要绑定一个事件。
代码如下:
复制代码代码如下所示:
VaR套= document.getelementbyid('wrap),
输入= wrap.getelementsbytagname(输入的);

wrap.onclick =功能(EV){
VaR EV = EV window.event | |,
目标= ev.target ev.srcelement | |;
对于(var i = 0,L = inputs.length;i < L;i++){
如果(输入{ } =目标){
警报(一)
}
}
}

晚餐结束时,我们还可以深入一些甜点。
除了性能之外,事件委托比具有闭包的事件绑定更有优势。事件委托是不需要考虑的若干子要素,即绑定的事件。例如,onclick事件结合后,我们添加一个按钮:
复制代码代码如下所示:
VaR document.createelement(输入的)新的DDT输入=;
newinput.setattribute(按钮);
newinput.setattribute(币值,按钮六);
wrap.appendchild(新的DDT输入);

同样,当我们终于把封闭模式和事件这个代码代表的方式,我们可以看到,点击按钮六在实施关闭事件绑定没有影响,但事件绑定点击按钮实现事件委托六将有警报。相反的,如果我们想删除一个按钮关闭方式保存在内存中删除按钮的onclick事件(除非手动设置为null),没有事件代表记忆的额外负担,因为这个原因,我们还应该加上通过绑定事件的方式同级别的多个元素。