HTML事件的种类_html resize-CSDN博客

本文链接：https://blog.csdn.net/qq_38220914/article/details/127677331

HTML事件的种类：

load：它在对象完全载入时发生。页面完全载入后，在 window 对象上触发；所有框架都载入后，在框架集上触发；<img> 完全载入后，在其上触发；<object> 完全载入后，在其上触发。

unload：它在对象完全卸载时发生。页面完全卸载后，在 window 对象上触发；所有框架都卸载后，在框架集上触发；<img> 完全卸载后，在其上触发；<object> 完全卸载后，在其上触发。

abort：用户停止下载 <img> 或 <object> 时发生。

error：JS脚本出错时发生。

select：用户在文本框中选择了文本时发生。

change：用户改变文本框中的文本时发生，用户改变了列表框中选择的项目时发生。

submit：用户点击提交按钮时在表单上发生。

reset：用户点击重置按钮时在表单上发生。

resize：窗口或框架的大小发生改变时发生。

scroll：用户滚动滚动条时发生。（IE浏览器无效）

focus：元素或窗口获得焦点时发生。

blur：元素或窗口失去焦点时发生。

load 和 unload 事件

load 事件一般用于对页面进行初始化，它在页面完全载入后发生（注意：在页面完全载入前任何DOM操作都是不能进行的）。使用 load 事件可以执行那些一打开网页就需要执行的代码。

load 事件一般在 <body> 标签中处理，但它实际上是由 window 对象处理的。它的调用方法是：

如：

unload 事件在页面卸载时发生，如单击超链接打开另一个页面、使用前进/后退按钮、关闭浏览器窗口时会触发该事件。

unload 事件也是由 window 对象处理的，一般也在 <body> 标签中调用：

resize 事件

resize 事件窗口或框架的大小被调整时发生，包括最小化、最大化。在IE和Opera浏览器中，只要窗口边框被拖动，就触发该事件，在Mozilla浏览器中，resize 事件只是在停止改变窗口大小时才会触发。

resize 事件也是由 window 对象处理的，一般在 <body> 标签中调用：

例如：

<body οnresize="getSize()">
<div id="bwidth"> </div>
<div id="bheight"> </div>

<script type="text/javascript">
function getSize()
{
document.getElementById("bwidth").innerHTML = "文档宽度："+document.body.offsetWidth;
document.getElementById("bheight").innerHTML = "文档高度："+document.body.offsetHeight;
}
</script>

效果为：

本例的效果可以调节浏览器窗口来查看。

scroll 事件

scroll 事件在调节滚动条时发生，可用于含有滚动条的元素，如浏览器窗口、多行文本框等。

浏览器窗口的 scroll 事件在 <body> 标签中调用：

事件发生后，body 对象的 scrollLeft 属性保存了窗口水平方向的滚动距离，scrollTop 属性保存了窗口垂直方向的滚动距离。

例如：

<body οnscrοll="getScroll()">
<div id="bleft"> </div>
<div id="btop"> </div>

<script type="text/javascript">
function getScroll()
{
document.getElementById("bleft").innerHTML = "水平滚动距离："+document.body.scrollLeft;
document.getElementById("btop").innerHTML = "垂直滚动距离："+document.body.scrollTop;
}
</script>

效果为：

水平滚动距离：0

垂直滚动距离：0

本例在IE浏览器中无效。