082|事件对象和事件对象属性

最新推荐文章于 2021-12-15 14:19:42 发布

Asteroid 325

最新推荐文章于 2021-12-15 14:19:42 发布

阅读量151

点赞数

本文链接：https://blog.csdn.net/weixin_43846020/article/details/108111304

版权

JS 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

事件对象获取

普通函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>082事件对象和事件对象属性</title>
		<script>
			/*
			    番茄炒蛋
				番茄+鸡蛋+调料
				
				事件绑定：
				     元素节点.on+事件类型=匿名函数;
					 [注]系统会在事件绑定一旦完成的时候，生成一个事件对象
					 
			*/
		   //普通函数
		   function show(){
			   alert("hello world!");
		   }
		   show();
		</script>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述

系统自动调用事件绑定的函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>082事件对象和事件对象属性</title>
		<script>
			/*
			    番茄炒蛋
				番茄+鸡蛋+调料
				
				事件绑定：
				     元素节点.on+事件类型=匿名函数;
					 [注]系统会在事件绑定一旦完成的时候，生成一个事件对象
					 
			*/
		 
		   function show(){
			   alert("hello world!");
		   }
		  
		   
		   window.onload=function(){
			   var oBtn=document.getElementById("btn1");
			   oBtn.onclick=show;//hello world!
		   }
		</script>
	</head>
	<body>
		<button id="btn1">按钮</button>
	</body>
</html>

在这里插入图片描述

触发事件的时候，系统会自动调用事件绑定的函数，将事件对象当做第一个参数传入

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>082事件对象和事件对象属性</title>
		<script>
			/*
			    番茄炒蛋
				番茄+鸡蛋+调料
				
				事件绑定：
				     元素节点.on+事件类型=匿名函数;
					 [注]系统会在事件绑定一旦完成的时候，生成一个事件对象
					 
			*/
		   //普通函数
		   function show(){
			  
			   alert(arguments.length);//1
			   alert(arguments[0]);//[object MouseEvent]
			   alert("hello world");
		   }
		   //show();
		   
		   window.onload=function(){
			   var oBtn=document.getElementById("btn1");
			   oBtn.onclick=show;
		   }
		</script>
	</head>
	<body>
		<button id="btn1">按钮</button>
	</body>
</html>

e

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>082事件对象和事件对象属性</title>
		<script>
			/*
			    番茄炒蛋
				番茄+鸡蛋+调料
				
				事件绑定：
				     元素节点.on+事件类型=匿名函数;
					 [注]系统会在事件绑定一旦完成的时候，生成一个事件对象
					 
			*/
		   //普通函数
		   /*
		   function show(){
			  
			   alert(arguments.length);//1
			   alert(arguments[0]);//[object MouseEvent]
			   alert("hello world");
		   }
		   */
		   //show();
		   function show(ev){
			   alert(ev);//[object MouseEvent],但是通过形参拿事件的方式在IE8以下不兼容。IE8以下，window.event
			    var e=ev||window.event;
				alert(e);//[object MouseEvent]
			   alert("hello world!");
		   }
		   
		   window.onload=function(){
			   var oBtn=document.getElementById("btn1");
			   oBtn.onclick=show;
		   }
		</script>
	</head>
	<body>
		<button id="btn1">按钮</button>
	</body>
</html>