js关于循环中onclick绑定带参数的函数问题

最新推荐文章于 2023-04-25 20:23:58 发布
最新推荐文章于 2023-04-25 20:23:58 发布
阅读量4.1k 收藏 2
点赞数 1
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/struggle1103/article/details/50927085
版权
<!DOCTYPE html>
<html>
<head>
    <title>测试页面</title>
    <script src="openlayers/js/jquery-1.8.3.min.js" type="text/javascript"></script>
    <style type="text/css">
       
    </style>
    <script type="text/javascript">
        var data = [{ data: 1 }, { data: 2 }, { data: 3 }, { data: 4 }, { data: 5 }];
        function init() {
            test();
        }


        function test() {
            var box = document.getElementById('box');
            var tb = document.createElement('table');
            tb.style.border = '1px solid black';
            for (var i = 0; i < data.length; i++) {
                var tmpData = data[i];
                var tr = document.createElement('tr');
                var td1 = document.createElement('td');
                td1.innerHTML = i + 1 + ".";
                var td2 = document.createElement('td');
                td2.innerHTML = "name" + i + 1;
                tr.appendChild(td1);
                tr.appendChild(td2);
                //方式一：js闭包方式监听事件在循环中绑定带参数的问题
                //tr.onclick = (function (obj1) { return function () { trClickHandler(obj1) } })(tmpData);
                //方式二：将数据绑定到元素上，然后利用js事件的机制找到元素本身，然后在取出数据，作为参数传到外部
                tr.data = tmpData;//将数据绑定到元素上
                tr.className = 'tr-mark';
                tr.onclick = function (evt) {
                    var evt = evt ? evt : window.event;//获取事件对象
                    var cObj = evt.srcElement || evt.target;//获取元素本身
                    while (cObj == null || cObj.className != 'tr-mark') {
                        if (!cObj) {
                            break;
                        }
                        cObj = cObj.parentElement;
                    }
                    //获取到tr
                    trClickHandler(cObj.data);


                };
                tr.style.cursor = 'pointer';
                tb.appendChild(tr);
            }
            box.appendChild(tb);
        }


        var trClickHandler = function (obj1) {
            alert(obj1.data);
        };






    </script>
</head>
<body οnlοad="init()">
    <div id="box"></div>
</body>
</html>
struggleqiang
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JavaScript在for循环中绑定事件解决事件参数不同的情况
12-04
有时候要对响应一堆相似的事件，但是每个事件的参数都不同，一开始还以为挺简单的，用个for循环不就得了，结果发现，额，都是使用了最后一个参数。。。 上网查资料！！！结果大神说用闭包解决 代码： 代码如下: for(var i=0;i<10;i++){ btns[i].onclick=(function(i){ return function(){alert(i)} })(i) } 大概原因是直接用btns[i].onclick=function(){alert(i)}时，JavaScript引擎会先将for循环里的代码执行完， 当用户出发onclick事件时，JavaScript会寻找i，结
js中onclick事件里面传递参数
热门推荐
Howey的博客
10-11 2万+
在onclick事件中添加参数，很多时候在onclick事件中触发的是界面的跳转，那么一般需要传递参数过去。 href="javascript:void(0)" onclick="doCheck(this)" type=0 （也可以这样写：href="javascript:void(0)" onclick="doCheck(this.type)" type=0,这样就只是把一个参数传进去， 后
onclick点击事件绑定参数时
dw5235的博客
11-08 1564
&lt;a href="javascrpit:;" onclick="test('{$v.name}')"&gt; &lt;/a&gt;   注：若test里传递的是字符穿外面一定要带上单引号
javascript中绑定带参数的函数
weixin_62721323的博客
10-05 607
【代码】javascript中绑定带参数的函数。
JS:for循环下onclick点击事件的i值捕捉问题
gg1229505432的博客
07-14 745
HTML部分代码 <divclass="tab_box"> <ulclass="tab_tit"> <liclass="current">tab1</li> <li>tab2</li> <li>tab3</li> <li>tab4</li> ...
关于li标签循环绑定点击事件后输出i的问题
YW博客
09-17 514
代码： <body> <li>0</li> <li>1</li> <li>2</li> <li>3</li> <script> var lis = document.querySelectorAll('li'); for (var i = 0; i < lis.length; i++) {
JS中关于事件处理函数名后面是否带括号的问题
11-27
　JS中的事件处理（事件绑定）就是让某种或某些事件触发某些活动。有两种常见的形式，分别是DOM Level 0 和DOM Level 2。这两种方式最大的区别就在于DOM 0级事件处理只能用于事件冒泡，而DOM 2级事件处理却可以通过...
解决Layui中templet中a的onclick参数传递的问题
12-30
以下是我的模板，主要用在列表页table中的按钮，点击弹窗展开详情页的功能。 [removed] [removed];' bfnclick='showContent({{d.CONTENT}})'>查看内容 ...于是改成下面的形式解决问题。 <script type=
js动态添加onclick事件可传参数与不传参数
01-19
1）当方法没有参数时，赋值可以直接用onclick = 方法名 [removed] = function() { $('btnTest').onclick = test; } function test() { alert(val); } 2）当方法有参数时，用onclick = 方法名(参数)时就有错...
javascript 带参方法在onclick中如何正确传值
@凌晨三点半的博客
04-01 1万+
1. varoperate=function(row,index){ varope="<ahref='#'onclick='update(\""+row+"\")'>修改</a>|<ahref='javascript:void(0)'>删除</a>"; returnope; } 注意点：需要用转...
onclick传参使用function()
会转圈的易拉罐的博客
04-25 1379
对于有需要传参的按钮，需要按照以下的方式进行.直接上代码。
JavaScript OnClick事件以及事件绑定方法
opo77_的博客
04-27 1万+
事件之鼠标点击事件 事件 说明 onclick 鼠标点击事件 onmouseover 鼠标经过事件 onmouseout 鼠标移开事件 onchange 文本框内容改变事件 onselect 文本框内容被选中事件 onfocus 光标聚集 onblur 光标离开 onload 网页导入 onunload 关闭网页 那么要怎么做的呢？ 1、将HTM...
React onClick/onChange 传参 （bind绑定）
菜鸡哥的码场
10-21 2923
一般是通过bind 函数绑定 this，来传递参数的，没有参数就是下面这种方式或者直接写函数名，代码如下： //被触发函数写法： const onChange = (e) => { //操作 } onChange={onChange} or onChange={onChange.bind(this)} 有参调用，代码如下： //被触发函数写法： const onChange = (index, e) => { //操作 } 传值调用...
js中的onclick事件传参
OnlyYoushu的专栏
10-17 6326
js中的onclick事件传参   1、在页面中给方法传参数，有如下的两种方法： 方法1，onclick=cancel(id，patientId); 在js文件中定义cancel方法 如果要把当前对象传过去用onclick="cancel(this,id,patientId)" js中cancel（obj，id，patientId） 方法2，在js中用 复制代码代码示例
js循环添加onclick事件
朱明代月的博客
12-09 1万+
javascript在循环添加onclick事件时会出现函数传入参数均为最后一个值的问题，编写一个test.html如下所示： for (var i=0;i<2 ;i++) { var bt=document.getElementById('bt'+i); bt.onclick=function(){ console.log(i);//无论点击哪个按
onclick如何调用含参函数_如何讲清楚闭包？
weixin_39586395的博客
11-12 510
我们都知道一个概念。在JS当中，一个函数可以访问其外部的变量资源。一个典型的代码但以下这种情况会出错。function m1(){ var a = 100; console.log(a++); } function m2(){ console.log(a++); //这里无法访问a } 如果，我们想在m2的作用域里，访问m1里的变量，就像下面这样：首先，我们可以在m1...
js绑定事件、传递参数
cherry的博客
09-12 1万+
绑定事件的方式、以及如何在绑定事件方法中传递参数。
js for循环给点击事件传参i
breakCSDN的博客
11-21 860
想法：想将外面的i传到onclick事件中去 一开始的错误做法： <script type="text/javascript"> //得到class为a的标签list数组 var zujian = document.getElementsByClassName("a"); //遍历 for (var i = 0 ; i < zujian.length ; i++) { alert(i); //zujian[i].onclick = function(i){
python中onclick
最新发布
07-25
另外，引用\[2\]提到了使用mechanize库时无法执行或触发onclick函数，因为执行onclick需要执行JavaScript，而mechanize无法执行JavaScript。 此外，引用\[3\]给出了一个范例，展示了如何在Python中使用turtle库实现...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值