今天测试下js的函数调用方法
首先,
css:
<style type="text/css">
body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
text-align: center
}
button{
margin: 50px auto;
width: 100px;
height: 30px;
border: 1px solid red;
border-radius: 5px;
background-color: red;
box-shadow: 5px 5px 3px #888888;
}
</style>
h5:
<button οnclick="sj1()">事件1</button>
<button οnclick="sj2()">事件2</button>
<button οnclick="sj3()">事件3</button>
把样式布局好 ,然后开始测试
只说说常用的点击事件
js:
<script type="text/javascript">
function sj1(){
console.log("这是事件1");
}
function sj2(){
console.log("这是事件2");
}
function sj3(){
console.log("这是事件3");
}
</script>
最常用的触发事件之一;
然后是 匿名函数:
(function(){
console.log("我是匿名函数");
})
这就是一个匿名函数,怎么调用呢,只需要在函数括号后面几个()就OK了
(function(){
console.log("我是匿名函数");
})();
但是如果我们把 函数写入闭包,那么点击事件就失效了
(function(){
function sj1(){
console.log("这是事件1");
}
function sj2(){
console.log("这是事件2");
}
function sj3(){
console.log("这是事件3");
}
})();
所以需要在内部添加事件
(function(){
var but = document.querySelectorAll('button');
for(var i=0; i < but.length; i++){
(function(){
var t=i;
but[i].οnclick=function(e){
console.log("这是事件"+ (t+1));
}
})();
}
})();
为什么需要在内部添加闭包,因为这个i算是全局变量了,如果不加上闭包会导致每次输出的结果都是but的length+1;
这也算是闭包的一种用法吧,想多了解可以自己去百度下。
还有一种:
var s = function(){
return{
sj1(){
console.log("这是事件1");
},
sj2(){
console.log("这是事件2");
},
sj3(){
console.log("这是事件3");
}
}
}
var sj = s();
function sj1(){
sj.sj1();
}
function sj2(){
sj.sj2();
}
function sj3(){
sj.sj3();
}
这种方法就是对象方法,我自己也了解这么点,
写法千变万化,多种多样的。怎么使用完全看各位工程师自己的习惯了。
还有更多的方法也希望大家分享出来。我只是个菜鸟,如果有不足请指出来,谢谢!