今天碰到了这样一个问题,我在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传参问题的更多相关文章

  1. aspx页面,后端通过Attributes.Add给textbox添加事件时,传参失效问题。

    测试一:------------------------------------------------------------------------------------------------ ...

  2. Vue.js父与子组件之间传参

    父向子组件传参 例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为html对大小写不敏感,component ...

  3. 当一个HTML元素需要添加mouseon、mouseout与click事件,或者mouserenter、mouseleave和click事件时,click事件无法触发

    当一个HTML元素需要添加mouseon.mouseout与click事件,或者mouserenter.mouseleave和click事件时,click事件无法触发 针对上述问题,我遇到的有两种情况 ...

  4. js方法用来获取路径传参上所带的参数

    //js方法用来获取路径传参上所带的参数 function GetQueryString(param) { var reg = new RegExp("(^|&)" + p ...

  5. python定义函数时的参数&调用函数时的传参

    一.定义函数: 1.位置参数:直接定义参数 2.默认参数(或者关键字参数):参数名 = "默认值" 3.位置参数必须在默认参数之前 二.调用函数: 1.按位置传,直接写参数的值 2 ...

  6. react 入坑笔记(四) - React 事件绑定和传参

    React 事件处理 建议:在了解 js 的 this 取值后食用更佳. 一.react 与 Html 中用法的异同和注意点 html 中的绑定事件的写法: <button onclick=&q ...

  7. js中关于带数字类型参数传参丢失首位数字0问题

    最近在项目中遇到一个问题,js中传带有数字的参数时,如果参数开头有数字0,会把0给去掉. 例如: 方法abc(0123456,789); 方法abc中获取的参数0123456就会变为123456. 原 ...

  8. FusionCharts-堆栈图、xml格式、刷新数据、添加事件link、传参

    *起因* 本来想用Chart.js来搞图表的, 但是来了个新需求,想搞的华丽点,毕竟对Chart.js来说,实现有点难度, *做出的改变* 最终选择了FusionCharts, *难点* 网上关于Fu ...

  9. 不用Ajax时的传参方法

    不用Ajax时的怎么传参 创建一个form表单 function test(){ var params = { "参数名": "参数值" }; postExce ...

随机推荐

  1. WPF - 属性系统 - APaas(AttachedProperty as a service)

    是的,文章的题目看起来很牛,我承认. 附加属性是WPF中的一个非常重要的功能.例如在设置布局的过程中,软件开发人员就常常通过DockPanel的Dock附加属性来设置其各个子元素所处的布局位置.同样地 ...

  2. Java的异步HttpClient

    上篇提到了高性能处理的关键是异步,而我们当中许多人依旧在使用同步模式的HttpClient访问第三方Web资源,我认为原因之一是:异步的HttpClient诞生较晚,许多人不知道:另外也可能是大多数W ...

  3. 写自己的Socket框架(三)

    在通信写完了以后,应用层接收到Socket抛上来的byte[],这个时候对于实际的写逻辑的开发者来说,这样的数据并不友好,我们就需要在应用层统一一个包的规则(应用层协议),处理完以后,然后再传给实际的 ...

  4. Azure File Storage 基本用法 -- Azure Storage 之 File

    Azure Storage 是微软 Azure 云提供的云端存储解决方案,当前支持的存储类型有 Blob.Queue.File 和 Table. 笔者在<Azure Blob Storage 基 ...

  5. hibernate一对一外键单向关联

    关联是类(类的实例)之间的关系,表示有意义和值得关注的连接. 本系列将介绍Hibernate中主要的几种关联映射 Hibernate一对一主键单向关联Hibernate一对一主键双向关联Hiberna ...

  6. WCF学习之旅—HTTP双工模式(二十)

    WCF学习之旅—请求与答复模式和单向模式(十九) 四.HTTP双工模式 双工模式建立在上文所实现的两种模式的基础之上,实现客户端与服务端相互调用:前面介绍的两种方法只是在客户端调用服务端的方法,然后服 ...

  7. python多行字符串

    Python中如何处理长代码格式化问题,如何提高格式化输出的长字符串的可读性? 当我们需要格式化输出一个很长的字符串的时候,都写在一行显得很难看,而且可读性也很差:当我们使用链式的语法写代码的时候常常 ...

  8. JavaScript高级程序设计--对象,数组(栈方法,队列方法,重排序方法,迭代方法)

    1.使用对象字面量定义对象 var person={}; 使用这种方式创建对象时,实际上不会调用Object构造函数. 开发人员更喜欢对象字面量的语法.   2.有时候需要传递大量可选参数的情形时,一 ...

  9. 前端学PHP之PHP操作memcache

    × 目录 [1]安装 [2]连接 [3]增删改查[4]分布式[5]状态[6]安全[7]应用 前面的话 和访问mysql服务器类似,PHP也是作为客户端API访问memcached服务器的,所以同样需要 ...

  10. ASP.NET MVC5+EF6+EasyUI 后台管理系统(61)-如何使用框架来开发

    系列目录 前言: 有些园友经常问如何正确快速开发,但是我告诉你没有什么帮助文档比自己动手做更加实在,不用代码生成器 这一节专门抽了些时间来非常非常详细演示这个框架的数据流,废话不多说,现在开始!下面看 ...