关于在窗口或框架被调整大小时发生的onresize 事件的使用总结

最新推荐文章于 2022-12-12 15:16:07 发布

你是我的youaremine

最新推荐文章于 2022-12-12 15:16:07 发布

阅读量1.3k

点赞数

分类专栏： jQuery javascript 文章标签：事件

本文链接：https://blog.csdn.net/weimeixiehou/article/details/72763289

版权

jQuery 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

javascript

4 篇文章 0 订阅

订阅专栏

开篇：不知不觉中，自己已经身着码农身份已近两年时间了，可是慢慢的发现自己不懂的好东西实在是太多了，就在昨天，我居然第一次知道有onresize这个事件的存在，真应该好好反省一下自己才行，闲话不多说，以下就我个人对该事件的理解以及使用做一总结，一方面是便于日后使用到而又忘掉的时候查阅，另一方面，也希望帮助那些和我一样对此有些迷茫的朋友，个人水平有限，欢迎大神指正！

释义：首先，我们得清楚onresize是什么，是用来干什么的。

顾名思义， onresize是在（窗口或者框架）改变大小时，会被触发的函数，而其使用场景多用于动态的改变窗口或框架的大小。

其语法为：<element οnresize="SomeJavaScriptCode" >

W3SChool对其参数的解释是：

参数	描述
SomeJavaScriptCode	必需。规定该事件发生时执行的 JavaScript。

其实说明白一点，就是对于支持使用该事件的元素（

<a>, <address>, <b>, <big>, <blockquote>, <body>, <button>, <cite>, <code>, 
<dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <frame>, <h1> to <h6>,
<hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>, <li>, <object>, <ol>, <p>, 
<pre>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, 
<textarea>, <tt>, <ul>, <var>

），其中的onresize对应的既可以是诸如“javascript:alert('hello world')”这样的JavaScript脚本，也可以是直接引用已有定义的js函数，就跟onClick等事件的使用方式是一样的。

说说各主流浏览器对其的支持：大家都支持。

还有就是HTML4.01跟HTML5是否存在差异：否。

使用：如此，就可以说到使用了。

这个又有js和jQ两种使用场景（直接赋值）：

------------------------------------------分隔线--------------------------------------------------------------

先说说js：

window.οnresize=function(){} //直接跟匿名函数(针对窗口)

window.οnresize=newFunction; //newFunction是已经定义了的函数(针对窗口)

document.body.οnresize=function(){}; //针对body

document.body.οnresize=newFunciton; //针对body

然后是jQ：

$(window).resize(function(){

//javascript

//function

alert("hello world");

});

------------------------------------------分隔线--------------------------------------------------------------

window.addEventListener('resize',fn); //事件监听，只对window起作用
------------------------------------------分隔线---------------------------------------------------------------
<element οnresize="SomeJavaScriptCode" > //这种的其实也是一种使用方式，即直接在元素中定义
------------------------------------------分隔线--------------------------------------------------------------

备注：对于直接赋值的方式，当window和body均被定义并赋值的时候，两者只有一个起作用，后定义的覆盖先定义的，而且直接赋值的方式会覆盖掉元素中定义的方式哦，是不是感觉刚好跟样式反着来啊（样式都是行内样式←内部样式←覆盖外部样式倒着被覆盖的）

附：其实该事件主要是结合得到窗口或者可见域大小的函数来计算并处理窗口的显示效果，我在这里将我搜到的几个贴出来，跟大家分享，另，在文章末尾会标明文章出处，大家可以去看人家更详细的讲解。

--------------------------------------------------------------------------引用---------------------------------------------------------

所谓可视区域是指能看得见的区域，即在浏览器中能看到页面的区域（高度与宽度）。刚刚使用 document.body.clientHeight 来获取可视区域的高度得到的却是整个文档的高度，然后在cnblogs.com的一篇文章中获知需要通过 document.documentElement.clientHeight 才能获取到浏览器的可视区域的高度，顺便将该文章摘下来，如下：

在没有声明DOCTYPE的IE中，浏览器显示窗口大小只能以下获取：

 
        document.body.offsetWidth 
       
        document.body.offsetHeight

在声明了DOCTYPE的浏览器中，可以用以下来获取浏览器显示窗口大小：

 
        document.documentElement.clientWidth 
       
        document.documentElement.clientHeight

IE，FF，Safari皆支持该方法，opera虽支持该属性，但是返回的是页面尺寸；

同时，除了IE以外的所有浏览器都将此信息保存在window对象中，可以用以下获取：

 
        window.innerWidth 
       
        window.innerHeight

网页可见区域宽： document.body.clientWidth;
网页可见区域高： document.body.clientHeight;
网页可见区域高： document.body.offsetWidth; //包括边线的宽
网页可见区域高： document.body.offsetHeight; //包括边线的宽
网页正文全文宽： document.body.scrollWidth;
网页正文全文高： document.body.scrollHeight;
网页被卷去的高： document.body.scrollTop;
网页被卷去的左： document.body.scrollLeft;
网页正文部分上： window.screenTop;
网页正文部分左： window.screenLeft;
屏幕分辨率的高： window.screen.height;
屏幕分辨率的宽： window.screen.width;
屏幕可用工作区高度： window.screen.availHeight;
屏幕可用工作区宽度： window.screen.availWidth;

clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。

clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。

offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。

offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。

screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。

screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。

x 设置或获取鼠标指针位置相对于父文档的 x 像素坐标。

y 设置或获取鼠标指针位置相对于父文档的 y 像素坐标。

----------------------------------------------------------------------------引用----------------------------------------------------------------------

引用：

http://www.cnblogs.com/henw/archive/2011/12/19/2293585.html

http://www.cnblogs.com/liujin0505/p/4125289.html