javaScript中事件对象的知识点

最新推荐文章于 2025-12-08 17:51:39 发布

原创最新推荐文章于 2025-12-08 17:51:39 发布 · 295 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javaScript #js #事件 #事件对象 #前端开发

本文深入探讨了JavaScript中事件对象的概念及使用，通过具体案例展示了如何获取事件对象，并解析其属性如target和srcElement，帮助读者理解事件处理机制。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javaScript中事件对象</title>
<link rel="stylesheet" type="text/css" href="inputAndDiv.css">
</head>
<body style="background-color: #CCE8CF;">
<h2>javaScript中事件对象</h2>
<input id="button1" type="button" value="js中事件对象案例">
<br/><br/>
<input id="button2" type="button" value="js中事件对象案例2">
</body>
<script type="text/javascript">
var buttonNode = document.getElementById('button1');
buttonNode.onclick = function(e, p2){
	console.log(e);//e表示的是事件对象
	console.log('********************');
	console.log(e.target);
	console.log('********************');
	console.log(e.srcElement);
	console.log('********************');
	console.log(p2);
	
	console.log(arguments);
	console.log(arguments.length);
	console.log(arguments[0]);
	console.log(arguments[0].target);
	console.log(arguments[0].srcElement);
	console.log(arguments[1]); //undefined
	console.log(arguments[2]); //undefined
	console.log(arguments[3]); //undefined
	console.log(arguments[666]); //undefined
}


function fn1(){
	console.log(arguments);
	console.log(arguments.length);
}
fn1();

console.log('*******************');

function fn2(p1, p2){
	console.log(arguments);
	console.log(arguments.length);
}
fn2('江西省赣州市于都县');
fn2('江西省赣州市于都县', 666);
fn2('江西省赣州市于都县', 666, 888);
fn2();

document.onclick = function() {
	console.log('---------------------------');
	console.log(arguments);
	console.log(arguments.length);
	console.log(arguments[0]);
	console.log(arguments[0].target);
	console.log(arguments[0].srcElement);
	console.log('---------------------------');
}

var button2Node = document.getElementById('button2');
button2Node.onclick = function(){
	console.log(arguments);
	console.log(arguments.length);
	console.log(arguments[0]);
	console.log(arguments[0].target);
	console.log(arguments[0].srcElement);
}

function fn3(p1, p2, p3){
	console.log(p1, p2, p3);
	console.log('++++++++++++++++++++++');
	console.log(arguments.length);
	for (var index = 0; index < arguments.length; index++) {
		console.log(arguments[index]);
	}
	console.log('++++++++++++++++++++++');
}
fn3('hello', 6, 'hi');
</script>
</html>