1. 事件对象的兼容：var oEvent=ev||event;
2. clientX/clientY必须与scrollLeft/scrollTop同时使用，并且都必须使用兼容写法；
3. 冒泡事件取消（兼容）：oEvent.cancelBubble=true;
4. 键盘事件的兼容
5. 案例：ctrl+enter提交留言、鼠标跟随、自由拖拽、自定义右键菜单
6. 事件：onmousedown/onmouseup、 onmouseover/onmouseout、 onmousemove
onkeydown/onkeyup、onkeypress
7. 属性：ctrlKey/altKey/shiftKey/keyCode
取消冒泡事件兼容写法：
obj.onclick=function (ev)
{
var oEvent=ev||event;
oEvent.cancelBubble=true; //取消冒泡事件。（多个块叠在一起，每个都有onclick事件，当点击最上面的块时，下面的点击事件也会被依次触发）
};
clientX/clientY必须与scrollLeft/scrollTop同时使用，并且都必须使用兼容写法：
// 跟随鼠标事件 =============================================================
document.onmousemove=function (ev)
{
var oEvent=ev||event;
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‘;
oDiv.style.top=oEvent.clientY+scrollTop+‘px‘;
};
键盘事件：
document.onkeydown=function (ev){
var oEvent=ev||event;
alert(oEvent.keyCode);
};
取消事件的默认行为
document.oncontextmenu=function (){ //取消浏览器右键菜单：
return false;
};
oTxt.onkeydown=function (){ //按键无效
return false;
};
oForm.onsubmit=function (){ //阻止提交表单，输入验证不通过时使用
return false;
};
案例：
// ctrl+enter 提交留言====================================================================================
<script>
window.onload=function (){
var oBtn=document.getElementById(‘btn1‘);
var oTxt1=document.getElementById(‘txt1‘);
var oTxt2=document.getElementById(‘txt2‘);
oBtn.onclick=function (){
oTxt1.value+=oTxt2.value+‘\n‘;
oTxt2.value=‘‘;
};
oTxt2.onkeydown=function (ev){
var oEvent=ev||event;
if(oEvent.ctrlKey && oEvent.keyCode==13){
oTxt1.value+=oTxt2.value+‘\n‘;
oTxt2.value=‘‘;
}
};
};
</script>
<textarea id="txt1" rows="10" cols="40"></textarea><br />
<input id="txt2" type="text" />
<input id="btn1" type="button" value="留言" />
// 鼠标跟随====================================================================================
<style>div {width:10px; height:10px; background:red; position:absolute;}</style>
<script>
window.onload=function (){
var aDiv=document.getElementsByTagName(‘div‘);
var i=0;
document.onmousemove=function (ev){
var oEvent=ev||event;
for(i=aDiv.length-1;i>0;i--) {
aDiv[i].style.left=aDiv[i-1].style.left;
aDiv[i].style.top=aDiv[i-1].style.top;
}
aDiv[0].style.left=oEvent.clientX+‘px‘;
aDiv[0].style.top=oEvent.clientY+‘px‘;
};
};
</script>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
// 自由拖拽 ====================================================================================
<style>#div1 {width:100px; height:100px; background:red; position:absolute;}</style>
<script>
window.onload=function (){
var oDiv=document.getElementById(‘div1‘);
var disX=0;
var disY=0;
oDiv.
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;
if(l<0){l=0;}
else if(l>document.documentElement.clientWidth-oDiv.offsetWidth){ //判断是否超出边界
l=document.documentElement.clientWidth-oDiv.offsetWidth;}
if(t<0){t=0;}
else if(t>document.documentElement.clientHeight-oDiv.offsetHeight){
t=document.documentElement.clientHeight-oDiv.offsetHeight;}
oDiv.style.left=l+‘px‘;
oDiv.style.top=t+‘px‘;
};
document.onmouseup=function (){
document.onmousemove=null; //清除事件
document.onmouseup=null;
};
return false;
};
};
</script>
<body><div id="div1"></div></body>
// 自定义右键菜单 ====================================================================================
<style>* {margin:0; padding:0;}#ul1 {width:100px; background:#CCC; border:1px solid black; position:absolute; display:none;}</style>
<script>
document.
oncontextmenu=function (ev){
var oEvent=ev||event;
var oUl=document.getElementById(‘ul1‘);
oUl.style.display=‘block‘;
oUl.style.left=oEvent.clientX+‘px‘;
oUl.style.top=oEvent.clientY+‘px‘;
return false;
};
document.onclick=function (){
var oUl=document.getElementById(‘ul1‘);
oUl.style.display=‘none‘;
};
</script>
<body><ul id="ul1"><li>登陆</li><li>回到首页</li><li>注销</li><li>加入VIP</li></ul></body>
