JS中批量给元素绑定事件过程中的相关问题使用闭包解决

在JS中，你写一个for循环的时候，内部的循环变量I其实是会保存在它运行的函数或类内的，所以你会发现你给元素批量绑定事件的时候，出现i=最后一个循环变量的值，这就很坑爹啊，解决的方案有2钟，
思路就是：把这个循环变量保存起来，不要让它的作用域在整个函数，而是在循环体内

1.使用闭包(如果你不懂闭包，请打开百度：www.baidu.com)
2.使用with关键字，with语法是with( obj ) { //使得可以在此直接访问obj的属性，而不用加obj.XXX }
代码示例：


代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script type="text/javascript" src="jquery-1.7.2.js" ></script>
<script type="text/javascript" language="javascript">
$(document).ready(function (){
function Ev(i){
this.index = i;
this.click = function (){
alert(this.index );
}
}
for(var k=1; k<4; k++){
//闭包函数1
// (function(x){
// $("#div" + x).click(function(){
// f(x);
// });
// }(k));
//使用with关键字
with ({i: k}){
$("#div" + i).click(function(){
f(i);
});
}
}
var f = function (m){
alert(m);
}
});
</script>
</head>
<body>
<div id="div1">1
</div>
<div id="div2">2
</div>
<div id="div3">3
</div>
</body>
</html>

赞 (0)

相关推荐

  • js绑定事件和解绑事件

    在js中绑定多个事件用到的是两个方法:attachEvent和addEventListener,但是这两个方法又存在差异性 attachEvent方法  只支持IE678,不兼容其他浏览器 addEventListener方法   兼容火狐谷歌,不兼容IE8及以下 addEventListener方法 div.addEventListener('click',fn); div.addEventListener('click',fn2); function fn(){ console.log("春

  • js和jquery批量绑定事件传参数一(新猪猪原创)

    复制代码 代码如下: <input type="button" value="btn1" id="btn1"/> <input type="button" value="btn2" id="btn2"/> <input type="button" value="btn3" id="btn3"/>

  • JS中动态添加事件(绑定事件)的代码

    两种方式:直接给对象添加事件,节点添加事件 例如给一个id为tab1的添加onclick事件 第一种情况: 复制代码 代码如下: var t = document.getElementById("tab1"); t.onclick = function tst(){ alert(''); } 第二种情况 复制代码 代码如下: var tb = document.getElementById("tab1"); if(window.addEventListener){

  • javascript中的绑定与解绑函数应用示例

    Mozilla中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target: 文档节点.document.window 或 XMLHttpRequest. type: 字符串,事件名称,不含"on",比如"click"."mouseover"."keydown"等. listener :实现了 EventListene

  • js添加绑定事件的方法

    先介绍js添加事件通用方法,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p id="p1">测试添加事件:firefox使用addEventListener,ie使用attachEvent<br> 点击此p标签

  • JavaScript中利用jQuery绑定事件的几种方式小结

    JavaScript中利用jQuery绑定事件的几种方式小结

    开发过程中经常要给DOM元素添加一些事件,下面介绍几种方式: 先写几个好看的button //引入JQuery <script type="text/javascript" src="jquery-1.8.3.min.js"></script> <span id="tips"></span> <input type="button" id="btn1"

  • js绑定事件this指向发生改变的问题解决方法

    可对函数进行如下扩展 复制代码 代码如下: Function.prototype.bind = function(obj) { var _this = this; return function() { _this.apply(obj,arguments); } } 用法如下 复制代码 代码如下: var a = function(){ alert(this.title) }.bind(document); a(); 常用在这儿 复制代码 代码如下: function myalert() { t

  • js移除事件 js绑定事件实例应用

    复制代码 代码如下: /** * @description 事件绑定,兼容各浏览器 * @param target 事件触发对象 * @param type 事件 * @param func 事件处理函数 */ function addEvents(target, type, func) { if (target.addEventListener) //非ie 和ie9 target.addEventListener(type, func, false); else if (target.att

  • JS中批量给元素绑定事件过程中的相关问题使用闭包解决

    在JS中,你写一个for循环的时候,内部的循环变量I其实是会保存在它运行的函数或类内的,所以你会发现你给元素批量绑定事件的时候,出现i=最后一个循环变量的值,这就很坑爹啊,解决的方案有2钟, 思路就是:把这个循环变量保存起来,不要让它的作用域在整个函数,而是在循环体内 1.使用闭包(如果你不懂闭包,请打开百度:www.baidu.com) 2.使用with关键字,with语法是with( obj ) { //使得可以在此直接访问obj的属性,而不用加obj.XXX } 代码示例: 复制代码 代码

  • jQuery中对未来的元素绑定事件用bind、live or on

    对未来的元素绑定事件不能用bind, 1.可以用live代替,但是要注意jquery的版本,根据官方文档,从1.7开始就不推荐live和delegate了,1.9里就去掉live了. 2.推荐用on代替(注:1.7及以上的版本才支持).用法:on(events,[selector],[data],fn) 复制代码 代码如下: //放在$(function(){})里才有效 $(document).on("click", "#testDiv", function(){

  • js实现动态创建的元素绑定事件

    新创建的元素用传统的办法无法绑定,需要用live方法. 例: $('.rule').live('mouseover', function () { $(this).addClass("cancelable"); 以上这篇js实现动态创建的元素绑定事件就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • JS如何实现动态添加的元素绑定事件

    JS如何实现动态添加的元素绑定事件

    这篇文章主要介绍了JS如何实现动态添加的元素绑定事件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 最近做的项目要实现一个动态添加动态删除的功能,思考了一下,该怎么给动态添加的元素绑定事件.最后觉得有两种方式比较可靠,第一种是在动态添加的html代码里添加oclick事件,然后给传个唯一的参数来判断点击了哪个,然后做相应的操作,第二种是通过事件委托的原理来处理,事件委托将一个事件侦听器实际绑定到整个容器,然后在单击它时能够访问每个列表项,这种更

  • AngularJS实现给动态生成的元素绑定事件的方法

    本文实例讲述了AngularJS实现给动态生成的元素绑定事件的方法.分享给大家供大家参考,具体如下: 1 . 我们知道在jQuery中,动态生成一个元素,如果要在动态生成元素的同时,动态绑定事件,可以通过live/on方法(在jquery3.0中已经废除了bind方法). 2 . 在AngularJS中,操作DOM一般在指令中完成,事件监听机制是在对于已经静态生成的dom绑定事件,而如果在指令中动态生成了DOM节点,动态生成的节点不会被JS事件监听. 举例来说: angular.module('

  • Vue2 模版指令元素绑定事件执行顺序解析

    目录 Vue 自定义指令的执行机制 前情提要 DOM绑定 源码 directive 为什么先调用模版绑定的方法,再调用指令的方法 总结 Vue 自定义指令的执行机制 version: 2.6.14 前情提要 某日,业务需要我需要在按钮点击之前验证某些条件,如果不符合即不执行click内的业务代码.思前想后,写一个指令不就可以了.做到既不改动原有的业务代码,又可以移植. <template> <button v-capture @click="handleClick"&

  • jquery html动态添加的元素绑定事件详解

    在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况: <div id="testdiv"> <ul></ul> </div> 假设我们要给ul动态添加的<li>绑定click事件形成如下结果 <div id="testdiv"> <ul> <li name="apple">apple</li> <li name="

  • jQuery给动态添加的元素绑定事件的方法

    本文实例讲述了jQuery给动态添加的元素绑定事件的方法.分享给大家供大家参考.具体分析如下: jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定.在1.7版本以前使用live.但是在1.8版本以后推荐使用on.这里介绍jQuery中如何给动态添加的元素绑定事件 在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况 例如 <div id="testdiv"> <ul>&l

  • jquery1.10给新增元素绑定事件的方法

    jquery1.10去除了.live()方法,新增了一个.on()方法来给元素绑定事件,具体用法如下: on(events,[selector],[data],fn) 复制代码 代码如下: $("#dataTable tbody tr").on("click", function(event){ alert($(this).text()); }); 上面这中方法对所有的这个tr绑定了事件,但是对于新增的元素无法绑定事件. 复制代码 代码如下: $("#da

  • 浅谈Jquery为元素绑定事件

    Jquery如何为元素绑定事件,小记一下,防止忘记了! $(this).bind({ click:function(){ window.open(alert('OK')); }, mouseover:function(){ window.open(alert('OK')); }, mouseout:function(){ window.open(alert('OK')); } }); 以上所述就是本文的全部内容了,希望大家能够喜欢.

随机推荐