首页 > 其他分享 >js给onclick事件赋值,动态传参数实例解说

js给onclick事件赋值,动态传参数实例解说

时间:2022-08-27 20:00:09浏览次数:67  
标签:show 代码 value js 参数 onclick btn 赋值

js给onclick事件赋值,动态传参数实例解说_javascript技巧_脚本之家  https://www.jb51.net/article/35107.htm

我们先看看错误的例子
Html代码

复制代码代码如下:
<body>
<input id="certid" type="text" value="123456" >
<input id="btn" type="button" value="button" onclick="">
</body>
Javascript代码
复制代码代码如下:
<script>
function show(value)
{
alert(value);
}

btn.onclick = show(certid.value);
<script>
以上代码执行起来是有错误的,因为show(certid.value)这句,直接就执行了show方法,而没有正确把这个方法对象赋给btn.onclick事件.
如果我们改成这样
复制代码代码如下:

 


btn.onclick = show;
参数又无法传递.
所以正确的代码应该这样写,我们加一个参数以看得更明白一些:
Html代码
复制代码代码如下:
<body>
<input id="certid" type="text" value="123456" >
<input id="btn" type="button" value="button" onclick="">
</body>
Javascript代码
复制代码代码如下:
<script>
function show(value1,value2)
{
alert(value1+","+value2);
}

var i = 10;
btn.onclick = function(){
show(certid.value,i);
};
<script>
这样就实现了动态给onclick事件句柄赋值,并支持参数的传递.  

标签:show,代码,value,js,参数,onclick,btn,赋值
From: https://www.cnblogs.com/jmbt/p/16631333.html

相关文章

  • Js 函数eval() 用法记录
    js函数eval()用法记录问题描述:遇到一串数据responseText,在浏览器中使用console函数输出responseText这个字段整体的时候,eg:console.log(“—————–responseText—-“......
  • js中alert的换行问题
    关于alert的内容还行问题,参考了很多人的意见,在这里我做一个总结,当然我们平时只要使用一种能达到效果的方法即可:这个与使用的浏览器也有关系在使用alert弹窗过程中,对于大......
  • js声明数组的四种方式
    js声明数组的四种方式_麦客子的博客-CSDN博客_js声明数组的写法 https://blog.csdn.net/a911711054/article/details/72869324<!DOCTYPEhtml><htmllang="en"><head......
  • vscode可以通过改json让程序运行完不退出
    如图改相应的launch.json至于D盘test.exe是因为有中文路径"program":"C:\\Windows\\System32\\cmd.exe","args":["/c","${fileDirname}/${fileBasenameNoExtension}.......
  • js 函数的参数长度问题
    js函数的参数长度问题_Jamie_java的博客-CSDN博客_js传参数有长度限制 https://blog.csdn.net/baidu_27062827/article/details/52276635js函数,如果传入参数的长度太长......
  • js - 修改弹出窗口的标题
    js-修改弹出窗口的标题_xsscacy的博客-CSDN博客 https://blog.csdn.net/shen813/article/details/9087029先利用window.open(url)打开一个窗口,然后在利用设置document.t......
  • js高级
    一、面向对象的编程介绍1.面向过程编程pop面向过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候再一个一个的依次调用就可以了。......
  • 【前端】 第05回 JS操作与jQuery
    目录1.JS操作1.1JS获取用户输入1.2JS类属性操作1.3JS样式操作2.事件2.1事件理解2.2绑定事件的两种方式2.3事件中的关键字this2.4window.onload2.5校验用户输入案......
  • js笔记整理2
    对象及日期定时器日期对象的定义(使用new关键词)1.获取当前的时间(本地的时间)vardate=newDate()//不传参就是获取当前时间2.获取指定的时间vardate=newDate(......
  • day 22 JSONP及Axios
    JSONP及Axiosjsonp概述:JSONP是一种跨域解决方案,它主要是利用了script标签不受跨域影响的特性来完成对应的请求操作。实际上是一个get请求。什么叫跨域同源策略(属于浏览......