跨浏览器resize事件分析
resize事件
原生事件分析
window一次resize事件:
IE7 触发3次, IE8 触发2次, IE9 触发1次, IE10 触发1次
Chrome 触发1次
- FF 触发2次
- Opera 触发1次
- Safari 触发1次
场景分析
- window resize时。部分组件须要重置大小(一次)。部分组件不须要重置大小。
开源库分析
长处:使用简便
$('#div1').on('resize', function (e) {
console.log('[div1] resize');
})
$('#div1').resize(function (e) {
console.log('[div1] resize2');
});
缺点:内部使用轮询,性能堪忧
function loopy() {
// Start the polling loop, asynchronously.
timeout_id = window[ str_setTimeout ](function(){
// Iterate over all elements to which the 'resize' event is bound.
elems.each(function(){
var elem = $(this),
width = elem.width(),
height = elem.height(),
data = $.data( this, str_data );
// If element size has changed since the last time, update the element
// data store and trigger the 'resize' event.
if ( width !== data.w || height !== data.h ) {
elem.trigger( str_resize, [ data.w = width, data.h = height ] );
}
});
// Loop.
loopy();
}, jq_resize[ str_delay ] );
};
长处:分Debounced和Throttled两种类型,类型明白
缺点:使用不算简易
$(window).on("debouncedresize", function( event ) {
// Your event handler code goes here.
});
// or...
$(window).on("throttledresize", function( event ) {
// Your event handler code goes here.
});
// unbind at will
$(window).off( "debouncedresize" );
结论
大多数场景使用jquery-smartresize的Debounced就可以满足一次调用就可以
跨浏览器resize事件分析的更多相关文章
- js实现一些跨浏览器的事件方法
用JavaScript实现事件的绑定,移除,以及一些常用的事件属性的获取,时常要考虑到在不同浏览器下的兼容性,下面给出了一个跨浏览器的事件对象: var EventUtil = { on: funct ...
- 跨浏览器的事件对象-------EventUtil 中的方法及用法
什么是EventUti----封装好的事件对象 在JavaScript中,DOM0级.DOM2级与旧版本IE(8-)为对象添加事件的方法不同 为了以跨浏览器的方式处理事件,需要编写一段“通用代码”,即 ...
- js事件对象--DOM中的事件对象/IE中的事件对象/跨浏览器的事件对象
事件对象 在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息.包括导致事件的元素.事件的类型,以及其他与特定事件相关的信息.例如,鼠标操作导致的事件对 ...
- JavaScript跨浏览器绑定事件函数的优化
JavaScript作为一门基于事件驱动的语言(特别是用在DOM操作的时候),我们常常需要为DOM绑定各种各样的事件.然而,由于低版本的IE的不给力,在绑定事件和移除事件监听上都与众不同,我们常常需要 ...
- Javascript跨浏览器的事件对象
一.跨浏览器的事件对象 var EventUtil = { ///添加事件 addHandler: function (element, type, handler) { if (element.ad ...
- EventUtil——跨浏览器的事件对象
. 首页 博客园 联系我 前言:什么是EventUtil?. EventUtil对象全见. addHandler方法. removeHandler方法. event对象与getEvent方法. tar ...
- js 跨浏览器实现事件
我们知道不同的浏览器实现事件是不同的,就比如说我们常见的有三种方法: 1,dom0处理事件的方法,以前的js处理事件都是这样写的. (function () { var p=document.getE ...
- javaScript之跨浏览器的事件对象
跨浏览器的兼容代码 var eventHandler = { addHandler: function(element, type, handler){}, removeHandler: functi ...
- 如何写一个跨浏览器的事件处理程序 js
如何 写一个合格的事件处理程序,看如下代码: EventUtil可以直接拿去用 不谢 <!DOCTYPE html> <html> <head> <title ...
随机推荐
- 一些CSS命名规则
一些CSS命名规则 头:header 内容:content/containe 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中 ...
- 10.java.lang.FileNotFoundException
java.lang.FileNotFoundException 文件未找到异常 当程序试图打开一个不存在的文件进行读写时将会引发该异常.该异常由FileInputStream,FileOutputSt ...
- 供应类型与计划分类一致性检查(PO)
应用 Oracle Purchasing 层 Level Function 函数名 Funcgtion Name CUXPOIMM 表单名 Form Name CUXPOIMM 说明 Descri ...
- Syslog Cisco Incident
http://www.cisco.com/web/about/security/intelligence/identify-incidents-via-syslog.html
- Android setTag IllegalArgumentException
E/AndroidRuntime(19480): java.lang.IllegalArgumentException: The key must be an application-specific ...
- 雕爷牛腩这样判断零售未来-搜狐IT
雕爷牛腩这样判断零售未来-搜狐IT 雕爷牛腩这样判断零售未来
- 在Mac上配置Apache+PHP环境
1.启用Apache/Web共享 打开终端,运行启动Apache命令: sudo apachectl start 然后输入系统密码,运行成功. 关闭命令: sudo apachectl stop 重启 ...
- ZooKeeper源码阅读(二):客户端
源代码: http://svn.apache.org/repos/asf/zookeeper/trunk/ 导入eclipse: 在包含build.xml目录下执行ant eclipse将产生.cla ...
- linux 使用sudo开放普通用户权限
整理一下以前写的东东,刚才又忘了- ---------------------------------------------------------------------------------- ...
- 转载 C# 序列化与反序列化意义详解
C# 序列化与反序列化意义详解 总结: ①序列化基本是指把一个对象保存到文件或流中,比如可以把文件序列化以保存到Xml中,或一个磁盘文件中②序列化以某种存储形式使自定义对象持久化: ③将对象从一个地方 ...