700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > button标签的onclick事件

button标签的onclick事件

时间:2021-05-25 06:14:42

相关推荐

button标签的onclick事件

1.普通的button标签定义onclick事件

(1):无参

<button onclick="mymethon()"></button><script type="text/javascript">function mymethon(){alert("触发点击事件");}</script>

(2):有参

①:一个参数

<button onclick="mymethon('123')"></button><script type="text/javascript">function mymethon(num){alert("单个参数:"+num);}</script>

②:多个参数,用","隔开

<button onclick="mymethon('张三','男','北京市朝阳区')"></button><script type="text/javascript">function mymethon(name,sex,address){alert("姓名"+name+";性别:"+sex+";住址:"+address);}</script>

2.for循环给button标签定义onclick事件并调用

说明:无参for循环onclick方法和普通的方法方式一样,可以参考案例1.(1),在此不做过多解释,主要是说一下追加传参的时候,转义符的神奇存在

另外需要注意的是操作顺序:先定义方法再调用,不然容易出现类似"未定义"的相关错误,根据JS代码的执行顺序,方法写的$(document).ready(function(){});外比较合适

PS:在此顺便说明一下js代码的执行顺序:

<script type="text/javascript">$(document).ready(function() {//后执行});//先执行</script>

(1):一个参数

<script type="text/javascript">function mlook(name){alert(name);}$(document).ready(function() {//数组,一会儿以便循环追加时使用var ckName=new Array();ckName[0]="张三";ckName[1]="李四";ckName[2]="王五";ckName[3]="张柳";ckName[4]="赵六";var mDiv document.getElementById("mWindows");//给id为"mWindows"的标签(此处是div盒子)追加内容for (var i = 1; i < ckName.length; i++) {mDiv .innerHTML += '<span>'+ ckName[i]+ '</span>次'+//传字符串类型的数据时需要加"引号","\'"是转义符,可以有效的转义引号'<button onclick="mlook(\''+ckName[i]+'\')">查看详情</button>'; } });</script>

(2):多个参数

<script type="text/javascript">$(document).ready(function() {var ckName=new Array();ckName[0]="张三";ckName[1]="李四";var officeName=new Array();officeName[0]="李老师";officeName[1]="王老师";var bstartTime=new Array();bstartTime[0]="-05-01";bstartTime[1]="-05-31";var mDiv= document.getElementById("mWindows");//给id为"mWindows"的标签(此处是div盒子)追加内容for (var i = 1; i < ckName.length; i++) {mDiv.innerHTML += '<span>'+ ckName[i]+ '</span>次&nbsp;'+'<button onclick="mwant(\''+ckName[i]+'\',\''+officeName+'\',\''+bstartTime+'\')">查看详情</button>';//同理:多个参数的话,用逗号隔开,注意看清楚每对符号是否齐全}});function mwant(student,teacher,date){alert(name+teacher+date);}</script>

PS:如果有不太会使用转义符的盆友,给你们推荐一个在线HTML代码转换为JavaScript字符串工具:/transcoding/html2js

最最后:这是我自己总结的,若发现有不足或者其他新知识点欢迎提意见和补充!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。