事件绑定及深入下

<span id="pox">
<div id="box" class="red">测试Div</div>
</span>

addEvent(window,'load',function(){
var box=document.getElementById('box');

//W3C的mouseover,mouseout
//addEvent(box,'mouseover',function(evt){
// alert(evt.relatedTarget); //得到移入box最近的那个DOM对象
//})

//addEvent(box,'mouseout',function(evt){
// alert(evt.relatedTarget); //从box移出最近的那个DOM对象
//})

//IE
addEvent(box,'mouseover',function(){
alert(window.event.fromElement.tagName); //得到移入box最近的那个DOM对象
})

addEvent(box,'mouseout',function(){
alert(window.event.toElement.tagName); //从box移出最近的那个DOM对象
})

 

//兼容
addEvent(box,'mouseover',function(evt){
alert(getTarget(evt));
})
})

兼容：
function getTarget(evt) {
var e=evt||window.event;
if(e.srcElement){ //IE
if(e.type=='mouseover'){
return e.fromElement;
}else if(e.type=='mouseout'){
return e.toElement;
}
}else if(e.relatedTarget){ //W3C
return e.relatedTarget;
}
}

--------------------------------------------------------------------------------------------------
阻止默认行为:

addEvent(window,'load',function(){
var link=document.getElementsByTagName('a')[0];
link.onclick=function(){
alert('Lee');
return false;
};

addEvent(link,'click',function(){
return false; //不起作用
})

//PS: return false 不好的原因，必须在最后，导致可能根本无法阻止默认行为，最好是放到最前
//PS: 放到最前之后，后面的代码又无法执行

//所以，用这种
addEvent(link,'click',function(evt){
evt.preventDefault(); //IE 不支持
alert('Lee');
})

//所以，用这种兼容写法
addEvent(link,'click',function(evt){
preDef(evt); //阻止默认行为
})

})

兼容：
function preDef(evt){
var e=evt||window.event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue=false;
}
}

------------------------------------------------------------------------------
上下文菜单事件：contextmenu,当我们右击网页的时候，会自动出现windows自带的菜单。那么我们可以使用contextmenu
事件来修改我们指定的菜单，但前提是把右击的默认行为取消掉。

<textarea id="text" style="width: 200px;height:100px;"></textarea>
<ul id="menu">
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
</ul>

#menu {
width: 50px;
background:orange;
position:absolute;
display: none;
}

addEvent(window,'load',function(){
var text=document.getElementById('text');
addEvent(text,'contextmenu',function(evt){
preDef(evt); //阻止右击菜单
var menu=document.getElementById('menu');
menu.style.left=e.clientX+'px';
menu.style.top=e.clientY+'px';
menu.style.display='block';

addEvent(document,'click',function(){
menu.style.display='none';
})
})
})

-------------------------------------------------------------------------------------
卸载前事件：beforeunload，这个事件可以帮助在离开本页的时候给出相应的提示，“离开”或者“返回”操作。

addEvent(window,'beforeunload',function(evt){
preDef(evt);
});

鼠标滚轮(mousewheel)和DOMMouseScroll,用于获取鼠标上下滚轮的距离。

addEvent(document,'mousewheel',function(evt){
var e=evt||window.event;
alert(e.wheelDelta);
})

addEvent(document,'DOMMouseScroll',function(evt){
alert(-evt.detail*30);
})

做兼容：
function WD(evt){
var e=evt||window.event;
if(e.wheelDelta){
return e.wheelDelta;
}else if(evt.detail){
return -evt.detail*30;
}
}

------------------------------------------------------------------------------------
DOMContentLoaded 事件和readystatechange 事件