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]="2018-05-01";
bstartTime[1]="2018-05-31";
var mDiv= document.getElementById("mWindows");
//给id为"mWindows"的标签(此处是div盒子)追加内容
for (var i = 1; i < ckName.length; i++) {
mDiv.innerHTML += '<span>'+ ckName[i]+ '</span>次 '+
'<button onclick="mwant(\''+ckName[i]+'\',\''+officeName+'\',\''+bstartTime+'\')">查看详情</button>';
//同理:多个参数的话,用逗号隔开,注意看清楚每对符号是否齐全
}
});
function mwant(student,teacher,date){
alert(name+teacher+date);
}
</script>
PS:如果有不太会使用转义符的盆友,给你们推荐一个在线HTML代码转换为JavaScript字符串工具:http://tools.jb51.net/transcoding/html2js
最最后:这是我自己总结的,若发现有不足或者其他新知识点欢迎提意见和补充!
更多推荐
已为社区贡献11条内容
所有评论(0)