js动态绑定click事件时function传参问题
今天碰到了这样一个问题,我在javascript中动态创建了一个button,
然后我想给改button添加click事件,绑定的function想要传入一个变量参数,
一开始我想直接通过函数传参传进来,然而不知道为什么,click事件无法正常响应,
最后发现可以这么做,将需要传入的参数加入button的属性中,然后通过getAttribute()获得:
function add_book_panel(infor){
//在这个函数中进行DOM元素操作,需要传入参数infor
…
var button = document.createElement("button");
button.setAttribute("infor",infor);
button.addEventListener("click", function(){
document.getElementById("id").innerText = this.getAttribute('infor');
});
…
}
js动态绑定click事件时function传参问题的更多相关文章
- aspx页面,后端通过Attributes.Add给textbox添加事件时,传参失效问题。
测试一:------------------------------------------------------------------------------------------------ ...
- Vue.js父与子组件之间传参
父向子组件传参 例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为html对大小写不敏感,component ...
- 当一个HTML元素需要添加mouseon、mouseout与click事件,或者mouserenter、mouseleave和click事件时,click事件无法触发
当一个HTML元素需要添加mouseon.mouseout与click事件,或者mouserenter.mouseleave和click事件时,click事件无法触发 针对上述问题,我遇到的有两种情况 ...
- js方法用来获取路径传参上所带的参数
//js方法用来获取路径传参上所带的参数 function GetQueryString(param) { var reg = new RegExp("(^|&)" + p ...
- python定义函数时的参数&调用函数时的传参
一.定义函数: 1.位置参数:直接定义参数 2.默认参数(或者关键字参数):参数名 = "默认值" 3.位置参数必须在默认参数之前 二.调用函数: 1.按位置传,直接写参数的值 2 ...
- react 入坑笔记(四) - React 事件绑定和传参
React 事件处理 建议:在了解 js 的 this 取值后食用更佳. 一.react 与 Html 中用法的异同和注意点 html 中的绑定事件的写法: <button onclick=&q ...
- js中关于带数字类型参数传参丢失首位数字0问题
最近在项目中遇到一个问题,js中传带有数字的参数时,如果参数开头有数字0,会把0给去掉. 例如: 方法abc(0123456,789); 方法abc中获取的参数0123456就会变为123456. 原 ...
- FusionCharts-堆栈图、xml格式、刷新数据、添加事件link、传参
*起因* 本来想用Chart.js来搞图表的, 但是来了个新需求,想搞的华丽点,毕竟对Chart.js来说,实现有点难度, *做出的改变* 最终选择了FusionCharts, *难点* 网上关于Fu ...
- 不用Ajax时的传参方法
不用Ajax时的怎么传参 创建一个form表单 function test(){ var params = { "参数名": "参数值" }; postExce ...
随机推荐
- .NET基础拾遗(1)类型语法基础和内存管理基础
Index : (1)类型语法.内存管理和垃圾回收基础 (2)面向对象的实现和异常的处理 (3)字符串.集合与流 (4)委托.事件.反射与特性 (5)多线程开发基础 (6)ADO.NET与数据库开发基 ...
- MVVM大比拼之avalon.js源码精析
简介 avalon是国内 司徒正美 写的MVVM框架,相比同类框架它的特点是: 使用 observe 模式,性能高. 将原始对象用object.defineProperty重写,不需要用户像用knoc ...
- [Intel Edison开发板] 01、Edison开发板性能简述
Integrated Wi-Fi certified in 68 countries, Bluetooth® 4.0 support, 1GB DDR and 4GB flash memory sim ...
- C++ std::array
std::array template < class T, size_t N > class array; Code Example #include <iostream> ...
- Java多线程基础知识篇
这篇是Java多线程基本用法的一个总结. 本篇文章会从一下几个方面来说明Java多线程的基本用法: 如何使用多线程 如何得到多线程的一些信息 如何停止线程 如何暂停线程 线程的一些其他用法 所有的代码 ...
- MySQL有趣的查询方式
背景介绍 美国大选开始了,国防部要求我对两个总统候选人的票数进行统计.我首先简单的进行一次无条件查询,了解了一下表格的结构及所有数据长什么样子. select * from foo 查询到的结果令我很 ...
- [转]安装 SciTE 报错 No package ‘gtk+-2.0′ found
centos 记事本,有时候感觉不够用,或者 出毛病,打不开文件 然后决定安装个其他的记事本, 找来找去, 感觉 SciTE 还可以,于是下载源码编译安装,结果 No package ‘gtk+-2 ...
- 【WCF】自定义地址头的筛选器
前面的文章中,老周已向大伙伴们介绍了如何在终结点上使用地址头,只要服务是沿着该终结点调用的,那么每一次调用都会自动把地址头插入到SOAP消息的Header列表中. 而通过前一篇文章中的示例,大家也看到 ...
- 高性能JavaScript--数据存储(简要学习笔记二)
1.JavaScript中四种基本数据存取位置:字面量,本地变量,数组元素,对象成员. 一般来说:[字面量,局部变量]运行速度>[数组,对象成员] 2.内部属性包含了一个函数被创建的作用域中 ...
- 了解HTML列表
前面的话 从某种意义上讲,不是描述性文本的任何内容都可以认为是列表.人口普查.太阳系.餐馆菜单等都可以表示为一个列表或列表的列表.列表分为无序列表.有序列表和定义列表三种 无序列表 无序列表(unor ...