js解决动态绑定事件时不能传参的问题

问题描述:

js使用dom给元素绑定事件时如果直接传入参数,

会有传参失败并且语句会执行并没有成功绑定事件的情况

举个例子,假如我们有一个div (id="div1"), 我们想给它绑定一个onclick事件并传入字符串参数:

(错误案例, 会导致如上后果)

var div=document.getElementById('div1');
div.onclik=fun('传入实参');
function fun(arg)
{alert(arg);
}

会导致加载页面时就执行了,并没有等到点击事件触发, 并且点击后不执行;

正确的绑定方式是这样的:

var div=document.getElementById('div1');
div.onclik=fun;
function fun()
{alert("");
}

也就是直接把方法名赋给 dom对象的onclick事件,

但这样就不能传参了啊, 别急,老衲有一妙计

带参数的绑定:

var div=document.getElementById('div1');
div.onclik=function () { fun("此处传入实参");  }function fun(arg)
{alert(arg);
}

也就是说除了直接把方法名赋给 dom对象的onclick事件,

还可以在onclick事件事件后定义一个方法, 我们可以在方法体中掉用我们真正的方法并传入我们想要的参数,

需要注意的是:

临时定义的这个函数中 this指的是div对象, 所以我们想传入div对象时使用 this就可以了

js解决动态绑定事件时不能传参的问题相关推荐

Vue.js-Day01-PM【事件绑定(事件传参、事件对象、传参+获取事件对象)、样式处理操作(模板、事件、属性绑定)、Tab切换(原生js实现、Vue.js实现)、js中的this详解关键字】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 4.事件绑定 4.1.事件绑定(点击.双击.鼠标移动) 点击按钮-最简单的事件绑定(无参函数) 格式点击按钮 ...
Vue.js父与子组件之间传参父向子组件传参　　例子：App.vue为父，引入componetA组件之后，则可以在template中使用标签（注意驼峰写法要改成componet-a写法，因为ht
Vue.js父与子组件之间传参父向子组件传参例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为html对 ...
微信小程序基础而重要语法整理总结（数据绑定、运算表达式、循环渲染、条件渲染、事件绑定（传参））
目录数据绑定运算表达式循环渲染条件渲染事件绑定(传参) 首先对初始化后的小程序目录进行梳理(图来自某机构) 补充: sitemap配置:小程序根目录下的sitemap. json文件用来配置 ...
python 函数的调用的时候参数的传递_python定义函数时的参数调用函数时的传参...
一.定义函数: 1.位置参数:直接定义参数 2.默认参数(或者关键字参数):参数名 = "默认值" 3.位置参数必须在默认参数之前二.调用函数: 1.按位置传,直接写参数的值 2 ...
js 点击事件回调函数传参
点击事件回调函数传参使用匿名函数 function testFun(event, str) {console.log(str); }var test = document.getElementByI ...
JS一起学02：函数传参、操作属性第二种方式、提取行间事件、循环、this、焦点问题、联动选择、选项卡焦点图
一.函数传参 1.函数传参:参数就是占位符----函数里定不下来的东西 var a1=function(){ alert(123); }; function a(f){ // 相当于 f=a1 ...
js中关于带数字类型参数传参丢失首位数字0问题
最近在项目中遇到一个问题,js中传带有数字的参数时,如果参数开头有数字0,会把0给去掉. 例如: 方法abc(0123456,789); 方法abc中获取的参数0123456就会变为123456. 原 ...
react事件组件设计传参使用
1.事件和原生js事件一致事件命名用驼峰式 onclick onClick onmouseover onMouseover 事件总是要响应一个函数 render() {return ( <d ...
FusionCharts-堆栈图、xml格式、刷新数据、添加事件link、传参
*起因* 本来想用Chart.js来搞图表的, 但是来了个新需求,想搞的华丽点,毕竟对Chart.js来说,实现有点难度, *做出的改变* 最终选择了FusionCharts, *难点* 网上关于Fu ...