js添加多个窗口监听事件

淩亂°似流年 2022-06-12 08:15 403阅读 0赞

看过一个[文章][Link 1]，说js有相对较多的瑕疵，对此，我是比较认同的，就如我将要说的js的窗口监听事件，如窗口改变大小事件需要定义window.resize函数。

但，相当多的情况是：不只在一地方或者一个时刻监听window.resize，此时就需要有多个回调函数,如果再定义window.resize函数就会覆盖之前定义好的window.resize。

解决方法：

/**
     * window.onresize 事件 专用事件绑定器 v0.1 Alucelx
     * http://www.cnblogs.com/Alucelx/archive/2011/10/20/2219263.html
     * <description>
     *   用于解决 lte ie8 & chrome 及其他可能会出现的 原生 window.resize 事件多次执行的 BUG.
     * </description>
     * <methods>
     *   add: 添加事件句柄
     *   remove: 删除事件句柄
     * </methods>
     */
    var onWindowResize = function(){
    	//事件队列
    	var queue = [],
    
    			indexOf = Array.prototype.indexOf || function(){
    						var i = 0, length = this.length;
    						for( ; i < length; i++ ){
    							if(this[i] === arguments[0]){
    								return i;
    							}
    						}
    
    						return -1;
    					};
    
    	var isResizing = {}, //标记可视区域尺寸状态， 用于消除 lte ie8 / chrome 中 window.onresize 事件多次执行的 bug
    			lazy = true, //懒执行标记
    
    			listener = function(e){ //事件监听器
    				var h = window.innerHeight || (document.documentElement && document.documentElement.clientHeight) || document.body.clientHeight,
    						w = window.innerWidth || (document.documentElement && document.documentElement.clientWidth) || document.body.clientWidth;
    
    				if( h === isResizing.h && w === isResizing.w){
    					return;
    
    				}else{
    					e = e || window.event;
    
    					var i = 0, len = queue.length;
    					for( ; i < len; i++){
    						queue[i].call(this, e);
    					}
    
    					isResizing.h = h,
    							isResizing.w = w;
    				}
    			}
    
    	return {
    		add: function(fn){
    			if(typeof fn === 'function'){
    				if(lazy){ //懒执行
    					if(window.addEventListener){
    						window.addEventListener('resize', listener, false);
    					}else{
    						window.attachEvent('onresize', listener);
    					}
    
    					lazy = false;
    				}
    
    				queue.push(fn);
    			}else{  }
    
    			return this;
    		},
    		remove: function(fn){
    			if(typeof fn === 'undefined'){
    				queue = [];
    			}else if(typeof fn === 'function'){
    				var i = indexOf.call(queue, fn);
    
    				if(i > -1){
    					queue.splice(i, 1);
    				}
    			}
    
    			return this;
    		}
    	};
    }.call(this);

定义一个这个的方法，之后使用该方法：

function onResizeEvent() {
    	console.log(window.innerWidth, window.innerHeight);
    }
    onWindowResize.add(onResizeEvent);

完毕。

[Link 1]: http://www.ruanyifeng.com/blog/2010/01/12_javascript_syntax_structures_you_should_not_use.html