知识大全浅谈JavaScript之事件绑定

Posted 2022-07-20 事件

篇首语：勤奋是你生命的密码，能译出你一部壮丽的史诗。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全浅谈JavaScript之事件绑定相关的知识，希望对你有一定的参考价值。

浅谈JavaScript之事件绑定 以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！

关于 JavaScript 的事件绑定在网上已经有不少相关的资料了今天这篇文章也是在被同事问及的时候才顺便把它记录下来算是 JavaScript 事件绑定中的一个小技巧如果能在工作中善加利用会有出其不意的效果

　　其实没有什么新的知识点只是为了方便其他有需要的朋友们翻阅对自己而言也算是一个积累所以只能算是闲谈 JavaScript 老鸟们可以尽情飘过在进入正题之前先提个问题热热身吧 现在有如下 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>

　　 以及如下 JavaScript 代码

复制代码代码如下: var wrap = document getElementById( wrap ) inputs = wrap getElementsByTagName( input ); for (var i = l = inputs length; i < l; i++) inputs[i] onclick = function () alert(i);

　　 请问这样执行的结果是什么？ /***************************分割线***************************/ 如果你的回答是“点击按钮时 alert 当前按钮的索引值 i” 那你就中了我的圈套了大家不妨试试无论你点击哪个按钮它都会alert( ) 这个看似理所当然的结果为什么会和实际情况不同呢？其实也是很好理解的因为 onclick 只是事件绑定而不是执行当我们执行 onclick 事件的时候这时的 i 已经是循环以后的值了照这样看每个按钮都alert( ) 也就不足为奇了那么如果我们要怎么实现“点击按钮时 alert 当前按钮的索引值 i”呢？这里就要用到 JavaScript 中暗藏玄机的一个概念“闭包” 我们可以用闭包的方式改写以上 JS 把 for 循环中的 i 值保存在内存中 代码如下

复制代码代码如下: var wrap = document getElementById( wrap ) inputs = wrap getElementsByTagName( input ); for (var i = l = inputs length; i < l; i++) (function (cur) inputs[cur] onclick = function () alert(cur); )(i)

　　 再试试效果？确实能 alert 出相应的索引值了不过至此为止还只是开胃菜正题才刚刚开始！以上的方法我们是通过循环 + 闭包给 button 按钮上绑定事件我们知道在 JavaScript 中函数也是对象对象就会占用内存现在的例子中只有个按钮或许你会认为这样的性能开销可以忽略不计但是如果当我们有个甚至个按钮的时候 IE 已经哭了当有更多其他性能隐患并发时所有的浏览器都哭了回到刚才的例子我们可以用“事件委托”的方法来解决这个因绑定事件随着按钮增加而可能导致的性能问题原理很简单利用 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 = l = inputs length; i < l; i++) if (inputs[i] === target) alert(i)

　　至此正餐完毕我们还可以再深入一下来些餐后甜点除了在性能上事件委托比闭包的事件绑定更有优势以外事件委托还无需顾及子元素（即被绑定事件的元素）的数量比如我们在 onclick 事件绑定以后 增加一个按钮

复制代码代码如下: var newInput = document createElement( input ); newInput setAttribute( type button ); newInput setAttribute( value 按钮六 ); wrap appendChild(newInput); cha138/Article/program/Java/JSP/201311/20249

知识大全 浅谈JavaScript之事件绑定

知识大全浅谈JavaScript之事件绑定