一、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;
}
}