js函数调用

- 日理万妓 2022-05-20 03:17 229阅读 0赞

今天测试下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();
    }

这种方法就是对象方法，我自己也了解这么点，

写法千变万化，多种多样的。怎么使用完全看各位工程师自己的习惯了。

还有更多的方法也希望大家分享出来。我只是个菜鸟，如果有不足请指出来，谢谢！

发表评论取消回复

表情：

评论列表（有 0 条评论，229人围观）

还没有评论，来说两句吧...

相关阅读

相关 JAVA调用JS函数

1、JS文件 multiply.js function multiply(a, b) { return a b; } add.js

╰+哭是因爲堅強的太久メ/ 2023年10月07日 11:16/ 0 赞/ 4 阅读

相关 js：自调用（自执行）函数

(function()\{ 　　return ..... \})() 举例： ![1190185-20190925203148083-1943487946.pn

曾经终败给现在/ 2023年08月17日 17:09/ 0 赞/ 104 阅读

相关 js立即调用函数

(function()\{\}())与(function()\{\})() 这两种写法，都是一种立即执行函数的写法，即IIFE (Immediately Invoked

落日映苍穹つ/ 2022年11月27日 15:42/ 0 赞/ 143 阅读

相关 js将字符串作为函数名调用函数

var slideArr=new Array( 'slideLeft', 'slideTop', 'slideRight',

末蓝、/ 2022年10月06日 00:55/ 0 赞/ 187 阅读

相关 js 函数调用顺序研究

-------------------- 花了半个小时自己测验了一下,关于JS同名函数调用的总结同大家分享一下: html中如果出现函数同名时：如果有多个外部引入的

亦凉/ 2022年09月18日 06:53/ 0 赞/ 147 阅读

相关 html初始化调用js函数

<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script> <script ty

Dear 丶/ 2022年09月05日 01:41/ 0 赞/ 301 阅读

相关 js 函数调用顺序研究

转：http://blog.csdn.net/lovingprince/article/details/1531892 花了半个小时自己测验了一下,关于JS同名函数调用的总结

灰太狼/ 2022年08月24日 14:19/ 0 赞/ 155 阅读

相关 krpano调用网页js函数

![TIM截图20170703104850][TIM_20170703104850] ![TIM截图20170703104941][TIM_20170703104941]

「爱情、让人受尽委屈。」/ 2022年06月06日 04:39/ 0 赞/ 280 阅读

相关 js函数调用

今天测试下js的函数调用方法首先， css: <style type="text/css"> body{ width: 100%;

- 日理万妓/ 2022年05月20日 03:17/ 0 赞/ 230 阅读

相关 js--函数的四中调用形式

前言了解函数的调用过程有助于深入学习与分析JavaScript代码. 这篇博客主要介绍JavaScript中函数的四种使用形式. 在JavaScript中，函数是一等公

拼搏现实的明天。/ 2021年09月27日 04:28/ 0 赞/ 331 阅读