一、event对象

document.οnclick=function(ev){

　　oEvent=event?event:ev;//兼容性写法

　　alert(oEvent.clientX);

　　alert(oEvent);//IE为object、chrome为object MouseEvent

　　/*if(ev){

　　　　alert(event.clientX);//IE

　　}else{

　　　　//alert(ev.clientX);//ff

　　　　alert(ev);

　　}*/

}

二、事件冒泡

var oBtn = document.getElementById('btn1');

var oDiv = document.getElementById('div1');

oBtn.οnclick=function(ev){

　　var oEvent = ev||event;

　　oDiv.style.display='block';alert('block');

　　oEvent.cancelBubble=true;//阻止事件冒泡

}

　　document.οnclick=function(){

　　oDiv.style.display='none';alert('none');

}

三、鼠标位置

栗子一：跟随鼠标的提示框

document.οnmοusemοve=function(ev){

　　var oEvent=event||ev;//兼容性写法

　　var oDiv = document.getElementById('div1');

　　var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;

　　var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft;

  　　oDiv.style.left=oEvent.clientX+scrollLeft+'px';//只要用到clientX必须加上scrollLeft

  　　oDiv.style.top=oEvent.clientY+scrollTop+'px';//只要用到clientY必须加上scrollTop

}

栗子二、跟随鼠标的一串div

var lDiv = document.getElementsByTagName('div');

var i=0;

document.οnmοusemοve=function(ev){

　　var oEvent=event||ev;//兼容性写法

　　for(i=lDiv.length-1;i>0;i--){

　　　　lDiv[i].style.left=lDiv[i-1].style.left;

　　　　lDiv[i].style.top=lDiv[i-1].style.top;

　　}

　　var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;

　　var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft;

　　lDiv[0].style.left=oEvent.clientX+scrollLeft+'px';

　　lDiv[0].style.top=oEvent.clientY+scrollTop+'px';

}

四、keyCode

键盘控制移动div

document.οnkeydοwn=function(ev){

　　var oEvent = event||ev;

　　var oDiv = document.getElementById('div1');//alert(oEvent.keyCode);

　　if(oEvent.keyCode==37||oEvent.keyCode==65){

　　　　oDiv.style.left=oDiv.offsetLeft-10+'px';

　　}else if(oEvent.keyCode==39||oEvent.keyCode==68){

　　　　oDiv.style.left=oDiv.offsetLeft+10+'px';

　　}else if(oEvent.keyCode==87){

　　　　oDiv.style.top=oDiv.offsetTop-10+'px';

　　}else if(oEvent.keyCode==83){

　　　　oDiv.style.top=oDiv.offsetTop+10+'px';

　　}

}

五、ctrl+回车提交

var oBtn = document.getElementById('btn1');

var oTxt1 = document.getElementById('txt1');

var oTxt2 = document.getElementById('txt2');

oBtn.οnclick=function(ev){

　　oTxt1.value+=oTxt2.value+'\r\n';

　　oTxt2.value='';

}

oTxt2.οnkeydοwn=function(ev){

　　var oEvent = ev||event;

　　if(oEvent.ctrlKey&&oEvent.keyCode==13){

　　oTxt1.value+=oTxt2.value+'\r\n';

　　oTxt2.value='';

}

六、阻止默认事件

栗子一：屏蔽右键菜单

document.oncontextmenu=function(ev){

　　return false;

}

栗子二：阻止表单提交

var oForm=document.getElementById('form1');

oForm.onsubmit = function(){

　　return false;

}

栗子三：阻止输入文本

var oTxt = document.getElementById('txt1');

oTxt.οnkeydοwn=function(){

　　return false;

}

栗子四：自定义右键菜单

document.οncοntextmenu=function(ev){

　　var oUl = document.getElementById('ul1');

　　var oEvent = ev||event;

　　oUl.style.display = 'block';

　　var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;

　　var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft;

　　oUl.style.left = oEvent.clientX+scrollTop+'px';

　　oUl.style.top = oEvent.clientY+scrollLeft+'px';

　　return false;

}

document.οnclick=function(){

　　var oUl = document.getElementById('ul1');

　　oUl.style.display = 'none';

}

 

七、拖拽

var oDiv = document.getElementById('div1');

var disX=0;

var disY=0;

document.οnmοusedοwn=function(ev){

　　var oEvent=ev||event;

　　disX = oEvent.clientX-oDiv.offsetLeft;

　　disY = oEvent.clientY-oDiv.offsetTop;

　　document.οnmοusemοve=function(ev){

　　　　var oEvent=ev||event;

　　　　var l = oEvent.clientX-disX;

　　　　var t = oEvent.clientY-disY;

　　　　var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;

　　　　var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft;

　　　　if(l>0&&l<document.documentElement.clientWidth-oDiv.offsetWidth&&t>0&&t<document.documentElement.clientHeight-oDiv.offsetHeight){

　　　　　　oDiv.style.left = l+'px';

　　　　　　oDiv.style.top = t+scrollTop+'px';

　　　　}

　　}

　　document.οnmοuseup=function(){

　　　　document.οnmοusemοve=null;

　　　　document.οnmοuseup=null;

　　}

}