“监听”窗口的“高度”

最新推荐文章于 2024-06-21 17:41:59 发布

iteye_13425

最新推荐文章于 2024-06-21 17:41:59 发布

阅读量217

点赞数

分类专栏： js 文章标签：前端 javascript ViewUI

本文链接：https://blog.csdn.net/iteye_13425/article/details/82541897

版权

js 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

首先是获取窗口的高度：

function getContentHeight(){
		// scrollHeight:网页全文高度；clientHeight：可见区域的高度
		var h = 0;
		var body = document.body;
		var docEle = document.documentElement;
		try{
			if($.browser.safari) {
				h = docEle.scrollHeight;
			} else {
				h = Math.max(body.scrollHeight,body.clientHeight)+20;
			}
		}catch(e){
			h = body.clientHeight +20;
		}
		return h;
	};

然后，监听事件：

function onEvent(node, event, cb) {
		//attachEvent：ie ； addEventListener：others
		if (node == null) {
			return false;
		}
		if ((typeof cb).toLowerCase() != "function") {
			return;
		}
		if (node.attachEvent) {
			node.attachEvent("on" + event, cb);
		} else {
			if (node.addEventListener) {
				node.addEventListener(event, cb, false);
			} else {
				node["on" + event] = cb;
			}
		}
		return true;
	}

定义何种事件需要监听：

	
	onEvent(window, "load", adjustWindow);//load网页加载事件
	onEvent(window, "load", function(){
//	       DOMSubtreeModified——当文档或者元素的子树因为添加或删除节点而改变时触发；
//	       DOMNodeInserted——当一个节点作为另一个节点的子节点插入时触发；
//	       DOMNodeRemoved——当一个节点作为另一个节点的子节点删除时触发；
		onEvent(body, "DOMSubtreeModified", adjustWindow);
		onEvent(body, "DOMNodeInserted", adjustWindow);
		onEvent(body, "DOMNodeRemoved", adjustWindow);
	});

===============================================================================

扩展：转

一般我们在JS中添加事件,是这样子的

`1`	`obj.onclick=method`

这种绑定事件的方式，兼容主流浏览器,但如果一个元素上添加多次同一事件呢?

 
    1obj.onclick=method1;
 
    2obj.onclick=method2;
 
    3obj.onclick=method3;

如果这样写,那么只有最后绑定的事件,这里是method3会被执行,这个时候我们就不能用onclick这样的写法了,主角改登场了,在IE中我们可以使用attachEvent方法

 
    1//object.attachEvent(event,function);
 
btn1Obj.attachEvent("onclick",method1); 
 
btn1Obj.attachEvent("onclick",method2); 
 
btn1Obj.attachEvent("onclick",method3);

使用格式是前面是事件类型,注意的是需要加on,比如onclick,onsubmit,onchange,执行顺序是

method3->method2->method1

可惜这个微软的私人方法,火狐和其他浏览器都不支持,幸运的是他们都支持W3C标准的addEventListener方法

 
    1//element.addEventListener(type,listener,useCapture);
 
btn1Obj.addEventListener("click",method1,false); 
 
btn1Obj.addEventListener("click",method2,false); 
 
btn1Obj.addEventListener("click",method3,false);

执行顺序为method1->method2->method3

做前端开发工程师,最悲剧的某过于浏览器兼容问题了,上面有两种添加事件的方法,为了同一添加事件的方法,我们不得不再重新写一个通用的添加事件函数,幸亏再有前人帮我们做了这件事

 
    01 function addEvent(elm, evType, fn, useCapture) { 
 
    02 if (elm.addEventListener) { 
 
    03 elm.addEventListener(evType, fn, useCapture);//DOM2.0 
 
    04 return true; 
 
    05}
 
    06 else if (elm.attachEvent) { 
 
    07 var r = elm.attachEvent(‘on‘ + evType, fn);//IE5+ 
 
    08 return r; 
 
    09}
 
    10 else { 
 
    11 elm['on' + evType] = fn;//DOM 0 
 
    12}
 
    13}

下面是Dean Edwards 的版本

 
    01 function addEvent(element, type, handler) { 
 
    02//为每一个事件处理函数分派一个唯一的ID
 
    03 if (!handler.$$guid) handler.$$guid = addEvent.guid++; 
 
    04//为元素的事件类型创建一个哈希表
 
    05 if (!element.events) element.events = {}; 
 
    06//为每一个"元素/事件"对创建一个事件处理程序的哈希表
 
    07 var handlers = element.events[type]; 
 
    08 if (!handlers) { 
 
    09handlers = element.events[type] = {};
 
    10//存储存在的事件处理函数(如果有)
 
    11 if (element["on" + type]) { 
 
    12 handlers[0] = element["on" + type]; 
 
    13}
 
    14}
 
    15//将事件处理函数存入哈希表
 
    16handlers[handler.$$guid] = handler;
 
    17//指派一个全局的事件处理函数来做所有的工作
 
    18 element["on" + type] = handleEvent; 
 
    19};
 
    20//用来创建唯一的ID的计数器
 
    21addEvent.guid = 1;
 
    22 function removeEvent(element, type, handler) { 
 
    23//从哈希表中删除事件处理函数
 
    24 if (element.events && element.events[type]) { 
 
    25 delete element.events[type][handler.$$guid]; 
 
    26}
 
    27};
 
    28 function handleEvent(event) { 
 
    29 var returnValue = true; 
 
    30//抓获事件对象(IE使用全局事件对象)
 
    31event = event || fixEvent(window.event);
 
    32//取得事件处理函数的哈希表的引用
 
    33 var handlers = this.events[event.type]; 
 
    34//执行每一个处理函数
 
    35 for (var i in handlers) { 
 
    36 this.$$handleEvent = handlers[i]; 
 
    37 if (this.$$handleEvent(event) === false) { 
 
    38 returnValue = false; 
 
    39}
 
    40}
 
    41 return returnValue; 
 
    42};
 
    43//为IE的事件对象添加一些“缺失的”函数
 
    44 function fixEvent(event) { 
 
    45//添加标准的W3C方法
 
    46event.preventDefault = fixEvent.preventDefault;
 
    47event.stopPropagation = fixEvent.stopPropagation;
 
    48 return event; 
 
    49};
 
    50 fixEvent.preventDefault = function() { 
 
    51 this.returnValue = false; 
 
    52};
 
    53 fixEvent.stopPropagation = function() { 
 
    54 this.cancelBubble = true; 
 
    55};

功能非常强悍，解决IE的this指向问题，event总是作为第一个参数传入，跨浏览器就更不在话下。

最后贡献一个HTML5工作组的版本：

 
    01 var addEvent=(function(){ 
 
    02 if(document.addEventListener){ 
 
    03 return function(el,type,fn){ 
 
    04 if(el.length){ 
 
    05 for(var i=0;i&lt;el.length;i++){ 
 
    06addEvent(el[i],type,fn);
 
    07}
 
    08 }else{ 
 
    09 el.addEventListener(type,fn,false); 
 
    10}
 
    11};
 
    12 }else{ 
 
    13 return function(el,type,fn){ 
 
    14 if(el.length){ 
 
    15 for(var i=0;i&lt;el.length;i++){ 
 
    16addEvent(el[i],type,fn);
 
    17}
 
    18 }else{ 
 
    19 el.attachEvent(‘on‘+type,function(){ 
 
    20 return fn.call(el,window.event); 
 
    21});
 
    22}
 
    23};
 
    24}
 
    25})();