常见的UI事件

最新推荐文章于 2024-07-29 19:27:46 发布

天空守护云

最新推荐文章于 2024-07-29 19:27:46 发布

阅读量276

点赞数

本文链接：https://blog.csdn.net/weixin_44606660/article/details/87620885

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
		/*
			常见的UI事件
				load
				resize
				scroll
				select  选中
				focus   获取焦点
				blur	失去焦点事件
		*/
	</script>
	<img src="images/1.jpg" alt="" id="pic">
	<input type="text" id="txt">

	<script type="text/javascript">
		/*
			1.当窗口尺寸1200以上，图片显示为充满页面

			2.无论何时打开窗口时，图片填充满屏幕

			3.当窗口尺寸发生改变时，图片依然填充满屏幕
		*/

		// var oImg;
		// window.onload=function () {
		// 	oImg=document.getElementById('pic');
		// 	// setImg();
		// };

		// //窗口尺寸发生改变
		// window.onresize=function(){
		// 	setImg();
		// };


		// function setImg(){
		// 	var w=document.documentElement.offsetWidth;//获取窗口尺寸

		// 	// if(w>1200){
		// 	// 	oImg.style.width=w+'px';
		// 	// }
		// 	oImg.style.width=w+'px';//设置图片大小和窗口尺寸保持一致
		// }


		var t=document.getElementById('txt');
		//获取焦点事件
		t.onfocus=function(){
			console.log('有焦点');
		};

		//失去焦点事件
		t.onblur=function(){
			console.log('失焦');
		};
	</script>
</body>
</html>