javaScript中事件、函数、this、函数传递参数、arguments知识点

最新推荐文章于 2021-06-20 16:55:22 发布

程宇寒

最新推荐文章于 2021-06-20 16:55:22 发布

阅读量499

点赞数

文章标签： javaScript 事件 this 参数函数

本文链接：https://blog.csdn.net/czh500/article/details/104346481

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javaScript中事件、函数、this、函数传递参数、arguments知识点</title>
<link rel="stylesheet" type="text/css" href="inputAndDiv.css">
</head>
<body style="background-color: #CCE8CF;">
<h2>javaScript中事件、函数、this、函数传递参数</h2>
<form name="form1" action=""></form>
<input type="button" value="案例1(函数的参数个数)" onclick="fn1();">
<br/><br/>
<input type="button" value="案例2(函数的参数个数)" onclick="fn1(this);">
<br/><br/>
<input type="button" value="案例3(函数的参数个数)" onclick="fn1(this, 'hello');">
<br/><br/>
<input type="button" value="案例4(函数传this和函数中使用this的区别)" onclick="fn2(this);">
<br/><br/>
<input type="button" value="案例5(函数的参数个数)" onclick="fn3(this);">
<br/><br/>
<input type="button" value="案例6(函数的参数个数)" onclick="fn3('令狐冲');">
<br/><br/>
<input id="button1" type="button" value="案例7(函数传递参数)">
<br/><br/>
<input id="button2" type="button" value="案例8(函数传递参数)">
<br/><br/>
<input id="button3" type="button" value="案例9(this)" onclick="fn6(this, this.value);">
<br/><br/>
<input id="button4" type="button" value="案例10(形参和实参个数不匹配)" onclick="fn6(this.id);">
<br/><br/>
<input id="button5" type="button" value="案例11(形参和实参个数不匹配)" onclick="fn8(this.type, 'haha');">
<br/><br/>
<input id="button6" type="button" value="案例12(将对象作为参数传进js函数里)" onclick="fn9(document.form1, this);">
<br/><br/>
<input id="button7" type="button" value="案例13(将对象作为参数传进js函数里)" onclick="fn9(this, document);">
<br/><br/>
<input id="button8" type="button" value="案例14(函数传多个参数)" onclick="fn10(this, 66, 'hi');">
<br/><br/>
</body>
<script type="text/javascript">
function fn1(){
	console.log(arguments, arguments.length);
	console.log(arguments[0]);
}

function fn2(parameter1){
	//从外部传进来的this指的是标签自身(哪个标签调用了fn2函数，那传进来的this就是指的该标签)
	console.log(parameter1);
	//函数中的this指的是Window对象
	console.log(this); //Window
}

function fn3(par1){
	console.log(par1, arguments, arguments.length);
}

var button1Node = document.getElementById('button1');
button1Node.onclick = function(eve) {
	//eve参数表示事件对象，程序运行时，系统会自动传递一个事件对象进来
	console.log(eve, arguments, arguments.length);
	console.log(eve.target, eve.srcElement);
	//打印出<input id="button1" type="button" value="案例7(函数传递参数)">
	console.log(this); //这里的this指的是标签本身
};

var button2Node = document.getElementById('button2');
//函数传递参数
function fn4(par1, par2) {
	console.log(par1, par2);
	console.log(arguments, arguments.length);
}

//函数传递参数
function fn5(e, p2){
	console.log('****************');
	console.log(e, p2);
	console.log('****************');
}

button2Node.onclick = function(eve, par2){
	fn4('张无忌', 666); //函数传递参数
	console.log(eve, arguments, arguments.length);
	console.log(eve.target, eve.srcElement);
	fn5(eve, par2); //函数传递参数
	//打印出<input id="button2" type="button" value="案例8(函数传递参数)">
	console.log(this);//这里的this指的是标签本身
};

function fn6(p1, p2){
	console.log(p1, p2);
	console.log(arguments, arguments.length);
	console.log(this); //Window
}

//立即执行函数中的this指的是谁
(function(){
	console.log(this); //Window
})();

//匿名函数中的this指的是谁
var fn7 = function(){
	console.log(this); //Window
};

fn7();

function fn8(){
	console.log(arguments, arguments.length);
}

function fn9(p1, p2){
	console.log("-----------------");
	console.log(p1, p2);
	console.log("-----------------");
}

//参考网页https://www.imooc.com/qadetail/180106
document.onclick = function(){
	//浏览器会默认传递一个参数，该参数就是事件对象
	console.log(arguments, arguments.length);
	console.log(arguments[0]);
	console.log(arguments[0].srcElement, arguments[0].target);
	//this指的是事件绑定对象
	console.log(this); //HTMLDocument
}

//参考网页https://www.csdn.net/gather_2a/OtDacgwsMDI4LWJsb2cO0O0O.html
function fn10(p1, p2, p3){
	console.log('####################');
	console.log(p1, p2, p3);
	var argumentCount = arguments.length;
//如果不用p1、 p2、p3来接收参数的话，可以用arguments[0]....这样的方式来获取传递进来的参数
	for (var index = 0; index < argumentCount; index++) {
		console.log(arguments[index]);
	}
	console.log('####################');
}
</script>
</html>