resize事件

原生事件分析

window一次resize事件：

IE7 触发3次, IE8 触发2次, IE9 触发1次, IE10 触发1次
Chrome 触发1次
FF 触发2次
Opera 触发1次
Safari 触发1次

场景分析

window resize时。部分组件须要重置大小（一次）。部分组件不须要重置大小。

开源库分析

jquery-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 ] );
};

jquery-smartresize

长处：分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就可以满足一次调用就可以

转载于:https://www.cnblogs.com/bhlsheji/p/5244117.html

跨浏览器resize事件分析相关推荐

一些js代码，自己备用的。高手不要笑话我。。（跨浏览器基础事件，浏览器检测，判断浏览器的名称、版本号、操作系统）...
跨浏览器基础事件 View Code 1 //跨浏览器添加事件 2 function addEvent(obj, type, fn) { 3 if (obj.addEventListener) { 4 ...
原生JS实现跨浏览器的事件处理程序
<!doctype html> <html lang="en"> <head><meta charset="UTF-8" ...
IFE-16 addEventHandler跨浏览器实现事件绑定
/** * addEventHandler方法 * 跨浏览器实现事件绑定 */ function addEventHandler(ele, event, hanlder) {if (ele.addEv ...
JavaScript --- 跨浏览器的事件对象
var EventUtil={addHandler: function(element, type, handler){ // 添加事件方法if (element.addEventListener){ ...
addevent()实现跨浏览器绑定事件
绑定事件一般有三种方式:传统绑定事件,IE绑定事件,W3C绑定事件.传统绑定存在可读性问题,this问题,覆盖问题.为实现跨浏览器绑定事件,我们采用自定义方法addEvent().代码如下: //跨浏 ...
javascript --- DOM0级、DOM2级、跨浏览器的事件处理程序
DOM0级事件处理程序: // 使用DOM0级方法指定的事件处理程序被认为是元素的方法 // 这个时候的事件处理程序是在元素的作用域中运行: <div id = "myBtn" ...
跨浏览器的事件处理程序
我们第一个要创建的方法是addHandler() 它的职责是视情况分别使用DOM0级方法.DOM2级方法或者IE方法来添加事件.这个方法属于一个名叫EventUtil的对象.addHandler() ...
JavaScript --- 跨浏览器的事件处理程序
var EventUtil = {addHandler: function(element, type, handler) { // 添加事件处理程序if (element.addEventListe ...
dean edward大神的跨浏览器addEvent事件
2019独角兽企业重金招聘Python工程师标准>>> function addEvent(element, type, handler) {// assign each event ...

跨浏览器resize事件分析

resize事件

原生事件分析

场景分析

开源库分析

结论

跨浏览器resize事件分析相关推荐

最新文章

热门文章