事件处理（3）：使用页面事件（页面初始化、窗口重置、页面滚动、错误处理）、使用UI事件（焦点处理、选择文本、字段值变换检测、剪切板数据）

最新推荐文章于 2023-09-13 12:18:36 发布

无知的小菜鸡

最新推荐文章于 2023-09-13 12:18:36 发布

阅读量912

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_41897680/article/details/106104310

版权

JavaScript 专栏收录该内容

35 篇文章 5 订阅

订阅专栏

使用页面事件

页面初始化
load事件类型在页面完全加载完毕的时候触发，在加载之前任何DOM操作都不会发生。为window对象绑定load事件类型的方法有两种。
（1）直接为window对象注册页面初始化事件处理函数

window.onload = function() {
	alert("页面加载完毕")
}

（2）在页面body标签中定义onload事件处理属性

<body onload="f()">
    <script type="text/javascript">
		function f() {
			alert("页面加载完毕")
		}
	</script>
</body>

注：
1、如果同时使用上面两种方法定义页面初始化事件类型，它们并没有发生冲突，也不会出现两次触发事件。
2、如果发现同时使用两种方法定义load事件类型，会使用window对象注册的事件处理函数覆盖掉body元素定义的页面初始化事件属性
3、如果分别绑定load事件处理函数，则会发生相互覆盖，最终只能有一个绑定响应函数被调用

窗口重置
resize事件类型是在浏览器窗口被重置时触发，当用户调整窗口大小、或者最大化、最小化、回复窗口大小显示均可触发事件。利用该事件可以跟踪窗口大小的变化以便动态调整页面元素的显示大小

示例： 跟踪窗口大小变化，及时调整页面内红色盒子的大小，使其始终保持与窗口固定大小的比例
传送门
页面滚动
scroll事件类型用于在浏览器窗口内移动文档的位置时触发，如通过键盘箭头键、翻页键或空格键移动文档位置，或者通过滚动条滚动文档位置。利用该事件可以跟踪文档位置变化，及时调整某些元素的显示位置，确保他始终显示在屏幕可见的区域中

示例： 控制红色小盒子位置始终位于窗口内坐标为（100px，100px）的位置
传送门

错误处理

error事件类型是在JavaScript代码发生错误时触发的，利用该事件可以捕获并处理错误信息。error事件类型与try/catch语句功能相似，都用来捕获页面错误信息。不过error事件类型无需传递事件对象，且可以包含已经发生错误的解释信息
该事件默认包含3个参数，第一个参数表示错误信息、第二个参数表示出错文件的url、第三个参数表示文件中错误位置的行号
该事件处理函数返回值为false时浏览器弹出错误提示框，显示标准的出错信息；返回true，则不会显示标准出错信息

示例：

<script type="text/javascript">
	window.onerror = function(message) {
		alert("错误原因：" + arguments[0] +
			"\n错误URL：" + arguments[1] +
			"\n错误行号：" + arguments[2])
		return true
	}
	a.innerHTML = "" //制造错误机会
</script>

我这里true和false均弹出了对话框，我是谷歌浏览器

使用UI事件

焦点处理
焦点处理事件包括focus（获取焦点）、blur（失去焦点）。所谓焦点就是激活表单字段，使其响应键盘事件
1、focus
当单击或使用tab键切换到某个表单元素或超链接对象时，会触发该事件。focus事件是确定页面内鼠标当前位置的一种方式
2、blur
blur事件类型表示在元素失去焦点时响应，与focus事件类型是对应的

示例： 当元素获取焦点时凸起显示，失去焦点时则显示为默认的凹陷效果
传送门

选择文本
当在文本框或文本区域内选择文本时，将触发select事件。通过该事件，可以设计用户选择操作的交互行为

示例： 当选择第一个文本框中的文本时，则第二个文本框会动态显示用户所选择的文本
传送门

字段值变化检测
change事件类型是在表单元素的值发生变化时触发，他主要作用于input、select、textarea元素。对于input和textarea元素来说，当它们失去焦点且value值改变时触发；对于select元素，在其选项改变时触发，也就是说不失去焦点，也会触发change事件

示例1： 当在第一个文本框中输入或修改值时，第二个文本框内会立即显示第一个文本框中的当前值

示例2： 在下拉列表框中选择不同的网站时，会自动打开该网站的首页

传送门

剪切板数据
剪切板数据操作主要包括6个剪切板事件

beforecopy：在发生复制操作前触发
copy：在发生复制操作时触发
beforecut：在发生剪切操作前触发
cut：在发生剪切操作时触发
befarepaste：在发生粘贴操作前触发
paste：在发生粘贴操作时触发

对于copy、cut和paste事件，只要是在上下文菜单中选择了响应的选项，或者使用了响应的键盘组合键，所有浏览器都会触发它们。在实际的事件发生之前，通过beforecopy、beforecut、beforepaste事件可以向剪切板发送数据，或者从剪切板取得数据之前修改数据

使用clipboardData对象可以访问剪切板中的数据。在ie中，可以在任何情况下使用window.clipboardDate 访问剪切板；在火狐、谷歌中可以通过事件对象的clipboardData属性访问剪切板，且只有在处理剪切板事件期间，clipboardData对象才有效

clipboardData对象定义了2个方法：

getData()：从剪切板中读取数据。包含1个参数，设置取得的数据的格式。IE提供两种数据格式：“text"和"URL"；火狐。谷歌中定义参数为MIME类型，可以用’‘text’'代表”text/plain“
setData()：设置剪切板数据。包含2个参数，第一个参数设置数据类型，第二个参数是要放在剪切板中的文本，不过对于火狐、谷歌不在支持text代表text/plain。在成功将文本放到剪切板中后，都会返回true，否则返回false

示例： 利用剪切板事件，当用户向文本框粘贴文本时，先检测剪切板中的数据，是否都是数字，如果不是数字，取消默认行为，则禁止粘贴操作，这样可以确保文本框只能接收数字字符
传送门

无知的小菜鸡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
事件处理（3）：使用页面事件（页面初始化、窗口重置、页面滚动、错误处理）、使用UI事件（焦点处理、选择文本、字段值变换检测、剪切板数据）

使用页面事件页面初始化load事件类型在页面完全加载完毕的时候触发，在加载之前任何DOM操作都不会发生。为window对象绑定load事件类型的方法有两种。（1）直接为window对象注册页面初始化事件处理函数window.onload = function() { alert("页面加载完毕")}（2）在页面body标签中定义onload事件处理属性<body onload="f()"> <script type="text/javascript">
复制链接

扫一扫