document是位于html标签之上的，可以说是权力最大的。下面的实例当你单击页面上的任何位置都会弹出“a”,正是运用了document的特性。
复制代码 代码如下:
<script> <br> document.onclick=function(){<br> alert('a');<br> };<br> </script>
获取鼠标位置clientX,clientY---注意这里仅仅只是可视区的鼠标位置
复制代码 代码如下:
<script><br> document.onclick=function(ev){<br> if(ev)<br> {<br> alert(ev.clientX+','+ev.clientY);<br> }<br> else{<br> alert(event.clientX+','+event.clentY);<br> };<br> };<br></script>
或者
复制代码 代码如下:
<script><br> document.onclick=function(ev){<br> /* if(ev)<br> {<br> alert(ev.clientX+','+ev.clientY);<br> }<br> else{<br> alert(event.clientX+','+event.clentY);<br> };<br> };*/<br> var oEvent=ev||event;<br> alert(oEvent.clientX+','+oEvent.clientY);<br> };<br></script>
事件冒泡---一层一层叠加的元素在一起，形成事件冒泡，比如下面的例子：document的最大范围影响了div的响应。
复制代码 代码如下:
<script><br> window.onload=function(){<br> var obtn=document.getElementById('btn1');<br> var odiv=document.getElementById('div1');<br> obtn.onclick=function(ev){<br> var oEvent=ev||event;<br> odiv.style.display='block';<br> oEvent.cancelBubble=true;//清除冒泡<br> };<br> document.onclick=function(){<br> odiv.style.display='none';<br> };<br> };<br></script>
鼠标移动---在可视区有效
立即学习“Java免费学习笔记（深入）”；
PHP5 MySQL 编程入门
下载
既有较为详细的PHP与MySQL基础知识介绍，也有大量针对不同应用的技术说明，并伴随了大量小而精的示例来加深读者的理解，便于通过实验来掌握知识并学会应用。令书以PHP开发者为核心，从环境搭建到系统开发，从局部技术点到项目全程把握，立体式介绍了PHP5+MySQL的技术要点以及丰富的延伸知识，可以让读者享受到提升开发能力的极速体验。
复制代码 代码如下:
<script><br> window.onmousemove=function(ev){<br> var oEvent=ev||event;<br> var odiv=document.getElementById('div1');<br> odiv.style.left=oEvent.clientX+'px';<br> odiv.style.top=oEvent.clientY+'px';<br> };<br></script>
键盘改变位置和方向---通过keycode获取键盘的键值来执行相应的操作。
复制代码 代码如下:
<script><br>document.onkeydown=function (ev)<br>{<br> var oEvent=ev||event;<br> var oDiv=document.getElementById('div1');<br><br> //← 37<br> //右 39<br><br> if(oEvent.keyCode==37)<br> {<br> oDiv.style.left=oDiv.offsetLeft-10+'px';<br> }<br> else if(oEvent.keyCode==39)<br> {<br> oDiv.style.left=oDiv.offsetLeft+10+'px';<br> }<br>};<br></script>
鼠标跟随小尾巴
复制代码 代码如下:
<script><br>window.onload=function ()<br>{<br> var aDiv=document.getElementsByTagName('div');<br> var i=0;<br><br> document.onmousemove=function (ev)<br> {<br> var oEvent=ev||event;<br><br> for(i=aDiv.length-1;i>0;i--)<br> {<br> aDiv[i].style.left=aDiv[i-1].style.left;<br> aDiv[i].style.top=aDiv[i-1].style.top;<br> }<br><br> aDiv[0].style.left=oEvent.clientX+'px';<br> aDiv[0].style.top=oEvent.clientY+'px';<br> };<br>};<br></script>
keycode
复制代码 代码如下:
<script><br>document.onkeydown=function (ev)<br>{<br> var oEvent=ev||event;<br><br> alert(oEvent.keyCode);<br>};<br></script>
ctrlKey---可以通过ctrl+enter组合键来提交内容
复制代码 代码如下:
<script><br>window.onload=function ()<br>{<br> var oBtn=document.getElementById('btn1');<br> var oTxt1=document.getElementById('txt1');<br> var oTxt2=document.getElementById('txt2');<br><br> oBtn.onclick=function ()<br> {<br> oTxt1.value+=oTxt2.value+'\n';<br> oTxt2.value='';<br> };<br><br> oTxt2.onkeydown=function (ev)<br> {<br> var oEvent=ev||event;<br><br> if(oEvent.ctrlKey && oEvent.keyCode==13)<br> {<br> oTxt1.value+=oTxt2.value+'\n';<br> oTxt2.value='';<br> }<br> };<br>};<br></script>
