js基础之事件

一、event对象

document.onclick=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.onclick=function(ev){
　　var oEvent = ev||event;
　　oDiv.style.display='block';alert('block');
　　oEvent.cancelBubble=true;//阻止事件冒泡
}
　　document.onclick=function(){
　　oDiv.style.display='none';alert('none');
}

三、鼠标位置

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

document.onmousemove=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.onmousemove=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.onkeydown=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.onclick=function(ev){
　　oTxt1.value+=oTxt2.value+'\r\n';
　　oTxt2.value='';
}
oTxt2.onkeydown=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.onkeydown=function(){

　　return false;

}

栗子四：自定义右键菜单

document.oncontextmenu=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.onclick=function(){
　　var oUl = document.getElementById('ul1');
　　oUl.style.display = 'none';
}

 

七、拖拽

var oDiv = document.getElementById('div1');
var disX=0;
var disY=0;
document.onmousedown=function(ev){
　　var oEvent=ev||event;
　　disX = oEvent.clientX-oDiv.offsetLeft;
　　disY = oEvent.clientY-oDiv.offsetTop;
　　document.onmousemove=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.onmouseup=function(){
　　　　document.onmousemove=null;
　　　　document.onmouseup=null;
　　}
}