“监听”窗口的“高度”

 

 

首先是获取窗口的高度：

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

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

1	obj.onclick=method1;

2	obj.onclick=method2;

3	obj.onclick=method3;

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

1	//object.attachEvent(event,function);

2	btn1Obj.attachEvent("onclick",method1);

3	btn1Obj.attachEvent("onclick",method2);

4	btn1Obj.attachEvent("onclick",method3);

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

method3->method2->method1

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

1	//element.addEventListener(type,listener,useCapture);

2	btn1Obj.addEventListener("click",method1,false);

3	btn1Obj.addEventListener("click",method2,false);

4	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) {

09	handlers = element.events[type] = {};

10	//存储存在的事件处理函数(如果有)

11	if (element["on" + type]) {

12	handlers[0] = element["on" + type];

13

}

14

}

15	//将事件处理函数存入哈希表

16	handlers[handler.$$guid] = handler;

17	//指派一个全局的事件处理函数来做所有的工作

18	element["on" + type] = handleEvent;

19

};

20	//用来创建唯一的ID的计数器

21	addEvent.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使用全局事件对象)

31	event = 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方法

46	event.preventDefault = fixEvent.preventDefault;

47	event.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<el.length;i++){

06	addEvent(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<el.length;i++){

16	addEvent(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

})();

可能细心的读者发现了IE的attachEvent和W3C标准的addEventListener绑定多个事件的执行顺序是不一样的

文章转自：http://www.popo4j.com/article/js-add-event-attachEvent-and-addEventListener.html

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

扩展：转

<script type="text/javascript"> 
var     s   =   " "; 
s   +=   "/r/n<br>网页可见区域宽： "+   document.body.clientWidth; 
s   +=   "/r/n<br>网页可见区域高： "+   document.body.clientHeight; 
s   +=   "/r/n<br>网页可见区域宽： "+   document.body.offsetWidth     + "   (包括边线的宽) "; 
s   +=   "/r/n<br>网页可见区域高： "+   document.body.offsetHeight   + "   (包括边线的宽) "; 
s   +=   "/r/n<br>网页正文全文宽： "+   document.body.scrollWidth; 
s   +=   "/r/n<br>网页正文全文高： "+   document.body.scrollHeight; 
s   +=   "/r/n<br>网页被卷去的高： "+   document.body.scrollTop; 
s   +=   "/r/n<br>网页被卷去的左： "+   document.body.scrollLeft; 
s   +=   "/r/n<br>网页正文部分上： "+   window.screenTop; 
s   +=   "/r/n<br>网页正文部分左： "+   window.screenLeft; 
s   +=   "/r/n<br>屏幕分辨率的高： "+   window.screen.height; 
s   +=   "/r/n<br>屏幕分辨率的宽： "+   window.screen.width; 
s   +=   "/r/n<br>屏幕可用工作区高度： "+   window.screen.availHeight+" （去掉状态栏）"; 
s   +=   "/r/n<br>屏幕可用工作区宽度： "+   window.screen.availWidth; 
//alert(s);
document.write(s);
</script>