2-4 js基础-事件对象小结

var e=ev||event;

e.cancelBubble=true;

document.documentElement   html

document.body                          body

【所以写的时候一定要加document.documentElement.scrollTop】

e.clientX;//鼠标在可视取中的x坐标。

e.clientY//鼠标在可是去中的y坐标。

 

//不兼容【不用】

e.pageX;//鼠标在页面中的x坐标。

e.pageY;//鼠标在页面中的y坐标。

 

e.keyCode

e.ctrlKey

e.altKey

e.shiftKey

e.preventDefault 阻止默认事件，addEventListener绑定时。

 

e.detail    //火狐下滚轮滚动结果

e.wheeldelta//其他浏览器下滚轮滚动

 

e.target

e.srcElement

e.toElement

e.fromElement

 

function $(fn){
	if(document.addEventListener){
		document.addEventListener('DOMContentLoaded',function(){
			fn();
		},false)
	}else{
		document.attachEvent('onreadystatechange',function(){
			if(document.readyState=='complete'){
				fn();
			}
		});
	}
}

事件委托

1、给未来元素加事件。

oUl.onclick=function(ev){
		var oEvent = ev||event;
		var oSrc = oEvent.srcElement||oEvent.target;
		if(oSrc.tagName!='A')return;
		oUl.removeChild(oSrc.parentNode);
	};

 

2、提高性能。

 

oEvent.srcElement:    在哪个元素上触发的。//兼容性：兼容ie和chrome

oEvent.target:    兼容火狐的事件委托。//兼容高版本浏览器。

oEvent.target.tagName//获取点击的标签名

 

//放大镜bug修复；

oEvent.toElement//判断移除到谁上。输出到哪的元素。//不兼容

oEvent.relatedTarget//兼容火狐

 

oEvent.fromElement//判断移除到谁上。输出到哪的元素。//不兼容

oEvent.relatedTarget//兼容火狐

 

obj.contains('b');//a是否包含b//完全兼容；

 

    div移除的时候是body

 

3、onmouseover和onmouseout的bug导致放大镜在ie写有闪烁。

      //onmouseenter  onmouseleave   解决了over和out的bug. 据说不稳定。

        解决方式。

        oEvent.toElement//判断移除到谁上。输出到哪的元素。//不兼容

        oEvent.relatedTarget//兼容火狐

 

4、页面加载之后执行。【DOMready】

    window.onload

                    执行的很慢。

                        html css js img flash.....之后【所有的资源加载完成后】。

        更灵活

   document.onreadystatechange//当加载状态改变。【低版本浏览器】，用时间绑定的方式加

        document.readyState:

        状态1：interactive;//状态正在开始。

        状态2：complete//事件准备完成。

        

   DOMContentLoaded【高版本浏览器】