081|Event事件类型

最新推荐文章于 2023-06-07 15:05:56 发布
最新推荐文章于 2023-06-07 15:05:56 发布
阅读量1.1k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43846020/article/details/108045586
版权

HTML事件

window事件的load加载后触发

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>081Event事件类型</title>
		<script>
			/*
			  三.HTML事件
			    1.window事件
				  load  当页面加载完成以后触发
				  unload  浏览器解构的时候触发(刷新页面，关闭当前页面) IE浏览器兼容
				  scroll  页面滚动
				  resize  窗口大小发生变化的时候触发
			    2.表单事件
			*/
		   window.onload=function(){
			   alert(2);
		   }
		   
		</script>
	</head>
	<body>
		<h1>hello world</h1>
	</body>
	<script>
		alert(1);
	</script>
</html>

在这里插入图片描述

window事件的scroll页面滚动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>081Event事件类型</title>
		<script>
			/*
			  三.HTML事件
			    1.window事件
				  load  当页面加载完成以后触发
				  unload  浏览器解构的时候触发(刷新页面，关闭当前页面) IE浏览器兼容
				  scroll  页面滚动
				  resize  窗口大小发生变化的时候触发
			    2.表单事件
			*/
		   window.onload=function(){
			 //  alert(2);
			   var i=0;
			   window.onscroll=function(){
				   document.title=i++;
			   }
		   }
		   
		</script>
	</head>
	<body style="height: 3000px;">
		<h1>hello world</h1>
	</body>
	<script>
		//alert(1);
	</script>
</html>

在这里插入图片描述

window事件的 resize ：窗口大小发生变化的时候触发

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>081Event事件类型</title>
		<script>
			/*
			  三.HTML事件
			    1.window事件
				  load  当页面加载完成以后触发
				  unload  浏览器解构的时候触发(刷新页面，关闭当前页面) IE浏览器兼容
				  scroll  页面滚动
				  resize  窗口大小发生变化的时候触发
			    2.表单事件
			*/
		   window.onload=function(){
			 //  alert(2);
			 
			 /*
			   var i=0;
			   window.οnscrοll=function(){
				   document.title=i++;
			   }
			   */
			  var i=0;
			  window.onresize=function(){
				  document.title=i++;
			  }
		   }
		   
		</script>
	</head>
	<body style="height: 3000px;">
		<h1>hello world</h1>
	</body>
	<script>
		//alert(1);
	</script>
</html>

在这里插入图片描述

表单事件（blur,focus）

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>081Event事件类型</title>
		<script>
			/*
			  三.HTML事件
			    1.window事件
				  load  当页面加载完成以后触发
				  unload  浏览器解构的时候触发(刷新页面，关闭当前页面) IE浏览器兼容
				  scroll  页面滚动
				  resize  窗口大小发生变化的时候触发
			    2.表单事件
			*/
		   window.onload=function(){
			 //  alert(2);
			 
			 /* //scroll 页面滚动
			   var i=0;
			   window.οnscrοll=function(){
				   document.title=i++;
			   }
			   */
			  
			  /* //  resize  窗口大小发生变化的时候触发
			  var i=0;
			  window.οnresize=function(){
				  document.title=i++;
			  }
		   }
		   */
		 
			  var oInput1=document.getElementById("input1");
			  oInput1.onblur=function(){
				  this.value="失去焦点";
			  }
			  oInput1.onfocus=function(){
				    this.value="获取焦点";
			  }
			  
		  }
		   
		</script>
	</head>
	<body style="height: 3000px;">
		<h1>hello world</h1>
		<input value="默认文本" id="input1" type="text" />
	</body>
	<script>
		//alert(1);
	</script>
</html>

在这里插入图片描述

表单事件（select,change）

在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>081Event事件类型</title>
		<script>
			/*
			  三.HTML事件
			    1.window事件
				  load  当页面加载完成以后触发
				  unload  浏览器解构的时候触发(刷新页面，关闭当前页面) IE浏览器兼容
				  scroll  页面滚动
				  resize  窗口大小发生变化的时候触发
			    2.表单事件
				   blur  失去焦点
				   focus 获取焦点
				   select 当我们在输入框内选中文本的时候触发
				   change 当我们对输入框文本进行修改并且失去焦点的时候
			*/
		   window.onload=function(){
			 //  alert(2);
			 
			 /* //scroll 页面滚动
			   var i=0;
			   window.οnscrοll=function(){
				   document.title=i++;
			   }
			   */
			  
			  /* //  resize  窗口大小发生变化的时候触发
			  var i=0;
			  window.οnresize=function(){
				  document.title=i++;
			  }
		   }
		   */
		 
			  var oInput1=document.getElementById("input1");
			  oInput1.onblur=function(){
				  this.value="失去焦点";
			  }
			  oInput1.onfocus=function(){
				    this.value="获取焦点";
			  }
			  oInput1.onselect=function(){
				  alert("被选中了");
			  }
			  oInput1.onchange=function(){
				  alert("被修改了");
			  }
			  
		  }
		   
		</script>
	</head>
	<body style="height: 3000px;">
		<h1>hello world</h1>
		<input value="默认文本" id="input1" type="text" />
	</body>
	<script>
		//alert(1);
	</script>
</html>

表单（submit提交,reset重置）

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>081Event事件类型</title>
		<script>
			/*
			  三.HTML事件
			    1.window事件
				  load  当页面加载完成以后触发
				  unload  浏览器解构的时候触发(刷新页面，关闭当前页面) IE浏览器兼容
				  scroll  页面滚动
				  resize  窗口大小发生变化的时候触发
			    2.表单事件
				   blur  失去焦点
				   focus 获取焦点
				   select 当我们在输入框内选中文本的时候触发
				   change 当我们对输入框文本进行修改并且失去焦点的时候
				   
				   [注]必须要添加到form元素上
				   submit 当我们点击submit上的按钮才能触发
				   reset 当我们点击reset上的按钮才能触发
			*/
		   window.onload=function(){
			 //  alert(2);
			 
			 /* //scroll 页面滚动
			   var i=0;
			   window.οnscrοll=function(){
				   document.title=i++;
			   }
			   */
			  
			  /* //  resize  窗口大小发生变化的时候触发
			  var i=0;
			  window.οnresize=function(){
				  document.title=i++;
			  }
		   }
		   */
		 
			  var oInput1=document.getElementById("input1");
			  oInput1.onblur=function(){
				  this.value="失去焦点";
			  }
			  oInput1.onfocus=function(){
				    this.value="获取焦点";
			  }
			  oInput1.onselect=function(){
				  alert("被选中了");
			  }
			  oInput1.onchange=function(){
				  alert("被修改了");
			  }
			  
			  
			  var of1=document.getElementById("f1");
			  of1.onsubmit=function(){
				  alert("提交");
				  
			  }
			  of1.onreset=function(){
				  alert("重置");
			  }
		  }
		   
		</script>
	</head>
	<body style="height: 3000px;">
		<h1>hello world</h1>
		<input value="默认文本" id="input1" type="text" />
		
		<form id="f1">
			<input type="text" />
			<input type="submit" />
			<input type="reset" />
		</form>
		
	</body>
	<script>
		//alert(1);
	</script>
</html>
Asteroid 325
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
十五、Events类
singhwong
05-20 404
与互斥和信号量对象一样，事件也是一个系统范围内的资源同步方法。为了从托管代码中使用系统事件，.NET Framework在System.Threading名称空间中提供了ManualResetEvent、AutoResetEvent、ManualResetEventSlim和CountdownEvent类。 ...
Event 事件类型-基本类型
ww_Filling_it的博客
05-22 729
Event 事件类型-基本类型
Event-----事件类型：基本类型
m0_51272779的博客
05-19 423
Event-----事件类型：基本类型---鼠标类型+案例
javascript 中的事件Event (二) — 事件类型
林涧的专栏
01-03 744
前面介绍了，javascript中的事件流，事件处理程序以及事件对象Event包含的属性和方法。 这篇开始介绍Event的类型，包括常用的UI事件，焦点事件以及鼠标事件等。 一、UI事件 UI事件是页面级事件，包括的基本的事件有如下： 1. load : 当页面完全加载完后（包括图片，js文件，css文件等外部资源）触发window上面的load事件。 ...
yii2源码学习笔记(五）
diaopeng8543的博客
05-25 110
Event是所有事件类的基类。它封装了与事件相关的参数。 yii2\base\Event.php 1 <?php 2 /** 3 * @link http://www.yiiframework.com/ 4 * @copyright Copyright (c) 2008 Yii Software LLC 5 * @license http:...
QT拖放事件八：通过全局剪切板中的接口QClipboard::mimeData()来获取MIME类型数据
最新发布
06-25
本篇文章将深入探讨如何利用全局剪切板中的接口`QClipboard::mimeData()`来获取MIME类型数据，尤其在QT拖放事件中的应用。 首先，理解MIME类型（Multipurpose Internet Mail Extensions）至关重要。MIME类型是一种...
javaScript中常用事件
12-15
每个事件都有一个事件对象，它包含了与事件相关的各种信息，如事件类型、目标元素、坐标位置等。通过`event`参数可以在事件处理函数中访问这些信息。 九、阻止事件默认行为 使用`event.preventDefault()`可以阻止...
Newnes.Practical.UML.Statecharts.In.C.C++.Event.Driven.Programming.For.Embedded.Systems.2nd.Edition.2009.5star.pdf
02-02
第十一章讲解了软件追踪技术，这对于调试和优化事件驱动的嵌入式系统至关重要。主要内容包括： - **软件追踪的重要性**：解释了为什么在嵌入式系统开发过程中需要使用软件追踪技术。 - **追踪工具和技术**：介绍了...
JavaScript的事件操作
04-25
每个事件处理程序都会接收到一个事件对象，其中包含了关于事件的详细信息，如事件类型、触发事件的元素等。例如： ```javascript element.addEventListener('click', function(event) { console.log('Event type:',...
EVENT事件类型-基本类型
m0_69532049的博客
05-23 226
UI事件： load当页面完全加载后在window上触发，图片也可以触发load事件 resize 当窗口大小变化时在window上触发 scroll当用户滚动带滚动条的元素中的内容时，在该元素上面触发 鼠标事件： onclick单击 ondbliclick双击 oncontextmenu 右击菜单 onmouseover 移入 onmouseout移出 onmouseenter移入 onmouseleave移出 onmousedown按下 onmouseup抬起 onmouse
Event 类
m0_38066007的博客
08-24 152
【代码】Event 类。
[Event]事件（高程版）（一）事件类型
zccst的专栏
06-17 191
作者：zccst [b]一、UI事件[/b] 1，load 两种添加方式：js方式添加， img也可以触发load事件，无论在DOM中，还是HTML中，例如 ，当然也可以用js方式实现 但一定要先添加事件，再指定src属性。 [img]http://dl2.iteye.com/upload/attachment/0104/4495/b507febe-b76e-3da8-a58...
$event对象总结
m0_63855883的博客
06-07 2350
监听 input 输入框的 focus 和 blur 事件并切换类名。监听 window 的 resize 事件并实时更新元素宽度。监听 form 表单的 submit 事件并发送数据。监听 button 按钮的点击并获取鼠标点击坐标。监听 touchmove 事件并实时改变元素位置。监听 keydown 事件并判断是否按下回车键。监听 scroll 事件并实时更新滚动进度。监听 a 标签的点击并阻止默认行为。监听鼠标移动并实时改变元素位置。
Event类的实例方法
iteye_96的博客
08-30 117
[size=large]Event类中包含7个实例方法，可以分为如下3类： 实用程序方法：包含clone()、formatToString()、toString()。可以创建事件对象的副本或将其转换为字符串。 事件流方法：包含stopImmediatePropagation()和stopPropagation()用于阻止事件在事件流中进行传播。 默认行为方法：包含isDefaultPreve...
javascript中event详解
swingboat
02-23 309
event代表事件的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键等等。event对象只在事件发生的过程中才有效。event的某些属性只对特定的事件有意义。比如，fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义。例子 下面的例子检查鼠标是否在链接上单击，并且，如果shift键被按下，就取消链接的跳转。code&l...
event是什么?事件对象
樊小勇的博客
04-17 8277
一、什么是event 1.event是事件函数对象，内置对象的一种 事件对象包含的几个操作原语：(这里只当了解) CreateEvent（） 创建一个事件对象 OpenEvent（） 打开一个事件对象 SetEvent（） 设置指定的事件对象为有信号状态 WaitForSingleObject（） 等待一个事件 WaitForMultipleObjects（） 等待多个事件 WaitFo...
事件类型总结
huyao的博客
07-18 267
链接：MDN事件类型一览表 鼠标事件 click、mousedown、mousemove、mouseup、contextmenu、mouseover、mouseout、 mouseenter mouseleave 用button来区分鼠标的按键，0/1/2 DOM3标准规定:click事件只能监听左键,只能通过mousedown 和 mouseup来判断鼠标键 如何解决mousedown...
常用事件类型
Albert_ChengXY的博客
08-12 443
change事件(只针对表单) 如果标签内容value值发生改变，并且失去焦距触发 input 中的text checkbox radio select(下拉菜单) select.value是选中的值 select会有多选(multiple)的可能性,这样会导致value一直是第一次选中的值 select.selectedOptions 被选择的多个元素 select.selectedIndex 选择下标 load error 用于图片的加载，ajax的通信以及JSON或者其他文件的加载 load是加
e = e || event;
09-14
`e`是一个变量，它被赋值为`e`本身，如果`e`已经存在，或者赋值为`event`，如果`e`不存在。 这段代码的目的是为了兼容不同的浏览器。在有些浏览器中，事件对象被传递给事件处理函数作为参数直接使用，而在其他...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值