javascript事件之调整大小(resize)事件
当浏览器窗口被调整到一个新的高度或宽度时,就会触发resize事件。
var EventUtil = {
addHandler: function (element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
}
};
EventUtil.addHandler(window, "resize", function () {
alert("Resized");
});
而IE则未提供任何属性关于何时会触发resize事件,不同浏览器有不同的机制。IE、Safari、Chrome和Opera会在浏览器窗口变化了1像素时就触发resize事件,然后随着变化不断重复触发。
Firefox则只会在用户停止调整窗口大小时才会触发resize事件。
由于存在这个差别,应该注意不要在这个事件的处理程序中加入大计算量的代码,因为这些代码有可能被频繁执行,从而导致浏览器反映明显变慢。
浏览器窗口最大化时也会触发resize事件。
注意:该事件会触发两次,比如浏览器全屏显示,如果使用screen.availHeight重布局屏幕会闪两次,因为resize方法会进2次.而且每次screen.availHeight都不一样.
解决办法:设置延迟
window.onresize = function() {
var res;
if (res){clearTimeout(res)}
res = setTimeout(function(){console.log("resize triggered");},20);
};
javascript事件之调整大小(resize)事件的更多相关文章
- javascript中的cookie,以及事件解析
Cookie: 它的意思是在本地的客户端的磁盘上以很小的文件形式保存数据,Cookie的处理原则上需要在服务器环境下运行,目前Chrome不可以在客户端操作Cookie,其他浏览器均可以, Coo ...
- [JavaScript] JavaScript事件注册,事件委托,冒泡,捕获,事件流
面试题 event 事件 事件委托是什么? 如何阻止事件冒泡,阻止默认事件呢? Javascript 的事件流模型都有什么? 事件绑定和普通事件有什么区别? Event 对象 Event 对象,当事件 ...
- resize([[data],fn]) 当调整浏览器窗口的大小时,发生 resize 事件。
resize([[data],fn]) 概述 当调整浏览器窗口的大小时,发生 resize 事件. 参数 fnFunctionV1.0 在每一个匹配元素的resize事件中绑定的处理函数.直线电机 ...
- 怎样给div增加resize事件
当浏览器窗口被调整到一个新的高度或宽度时,就会触发resize事件,这个事件在window上面触发,那么如何给div元素增加resize事件,监听div的高度或宽度的改变呢? 先来回答另一个问题,监听 ...
- javaScript事件(一)事件流
一.事件 事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字.事件是javaScript和DOM之间的桥梁.你若触发,我便执行——事件发生,调用它的处理函数 ...
- JavaScript高级程序设计学习笔记--事件
HTML事件处理程序 <input type="button" value="Click Me" onclick"showMessage()&q ...
- javascript和jquey的自定义事件小结
“通过事件机制,可以将类设计为独立的模块,通过事件对外通信,提高了程序的开发效率.” 可以把多个关联但逻辑复杂的操作利用自定义事件的机制灵活地控制好 对象之间通过直接方法调用来交互 1)对象A直接调用 ...
- javascript事件监听与事件委托
事件监听与事件委托 在js中,常用到element.addEventListener()来进行事件的监听.但是当页面中存在大量需要绑定事件的元素时,这种方式可能会带来性能影响.此时,我们可以用事件 ...
- javaScript事件(二)事件处理程序
一.事件 二.事件流 以上内容见:javaScript事件(一)事件流 三.事件处理程序 前面提到,事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字.响应 ...
随机推荐
- Zsh安装及常用操作
Zsh因为插件丰富而闻名,但是 zsh 的默认配置及其复杂繁琐,让人望而却步,直到有了oh-my-zsh这个开源项目,让zsh配置降到0门槛.而且它完全兼容 bash. 安装Zsh: [root@lo ...
- codeforces-1140 (div2)
A.维护一个前缀最大值,不断跳即可 #include <map> #include <set> #include <ctime> #include <cmat ...
- GO语言系列(一)- 初识go语言
一.golang语言的特性 1.垃圾回收 a.内存自动回收,再也不需要开发人员管理内存 b.开发人员专注业务实现,降低了心智负担 c.只需要new分配内存,不需要释放 2.天然并发 a.从语言层面支持 ...
- Python项目读取配置的几种方式
1. 将配置写在Python文件中 配置文件(config.py 或 settings.py) 通常放置在程序源代码的目录,方便引用 配置文件 # settings.py class Config(o ...
- JDBC事务管理
JDBC事务管理 概念回顾: 事务:一个包含多个步骤的业务操作,如果这个业务操作被事务管理,那么这个业务操作的多个步骤要么同时失败,要么同时成功 事务操作: 开启事务 提交事务 回滚事务 使用Conn ...
- 纯css美化下拉框、复选框以及单选框样式并用jquery获取到其被选中的val
具体样式如图所示: 注:获取val值时记得要先引入jquery库奥. 1.下拉框 css部分 #cargo_type_id{ font-size: 13px; border: solid 1px #b ...
- 运维工作笔记-------nginx的反向代理
1.nginx的反向代理意义 一般来说,我们在项目中,不会直接让项目服务器ip与外网做直接映射,这样一则是不安全,二是客户直接去访问项目服务器,对项目服务器带来的压力太大,从而导致项目运行速度变慢,程 ...
- MyEclipse编码方式设置
1.windows -> Preferences -> general -> Workspace:
- django发送邮件send_mail&send_mass_mail
一.配置 在setting.py中进行相关配置: EMAIL_HOST = 'smtp.sina.cn' #SMTP地址 EMAIL_PORT = 25 #SMTP端口 EMAIL_HOST_USER ...
- spawn-fcgi启动的一些报错问题
spawn-fcgi启动报错 //编译生成bin文件,这里用到了fcgi和google的glog # g++ test.cpp -lfcgi -lglog -o test //运行 # spawn-f ...