由浅入深JavaScript12进阶-事件2

事件对象
   再触发事件时会产生一个事件对象，事件对象记录了包含与事件有关的所有
   详细信息。包括事件元素，事件类型等。
   比如鼠标事件中会包含鼠标的位置信息，键盘事件中会包含按下的键的信息。
   事件对象不需要创建，只需要在事件处理程序传入event对象
   eg:
           window.onload = function() {
               document.onclick = function(ev) {
                   var oEvent = ev|;
                   alert(oEvent.type);
                   alert(oEvent.clientX);
                   alert(oEvent.clientY)
               }
           }
   运行结果会弹出click类型，点击时鼠标的x轴位置，和y轴位置。
   但是这个例子只能对火狐，谷歌和IE9+以上有效。
   对于IE8-是获取不到事件对象的。
   我们需要做一下兼容
   eg:
       document.onclick = function(ev) {
           var oEvent = ev||window.event;
       }


事件类型
   在DOM3级事件中规定了以下几类类型。
   UI事件：用户与页面的元素交互时触发
   焦点事件：当元素获得或失去焦点
   鼠标事件：通过鼠标在页面上执行操作时。
   滚轮事件：当使用鼠标滚轮时触发。
   文本事件：当在文档中输入文本时触发。
   键盘事件：当用户通过键盘在页面上执行操作触发。
   变动事件：当底层DOM结构发生变化是触发。
   合成事件：当为IME输入字符时触发。

   事件类型虽然多。但我们一般最常用的就是鼠标事件和键盘事件了。
   以下详细介绍鼠标事件和键盘事件。

鼠标事件
   click:用户单机鼠标按钮或者按下回车时触发。
   dbclick:用户双击鼠标时触发。
   mousedown:用户按下任意鼠标按钮时触发。
   mouseup：用户释放鼠标时触发。
   mousemove:当鼠标在元素内部移动时触发
   mouseout：当鼠标从一个元素上离开时触发。
   mouseover：当鼠标从一个元素外部，移入进来时触发。

   获得鼠标事件在客户端坐标信息。
   event.clientX,event.clientY
   获得鼠标事件在页面中的坐标信息。页面坐标只能在ie9+
   event.pageX,event.pageY
   如果页面没有发生滚动，那么客户端坐标信息，和页面坐标信息一致
   获取鼠标在屏幕上的坐标。
   event.screenX,event.screenY
   eg:
   <script>
           window.onload = function(){
               document.onclick = function(ev){
                   var oEvent = ev||event;
                   alert(oEvent.clientX);
                   alert(oEvent.clientY);
                   alert(oEvent.pageX)//ie9+
                   alert(oEvent.pageY);//ie9+
                   alert(oEvent.screenX);
                   alert(oEvent.screenY);
               }
           }
       </script>
   </head>
   <body style="height: 2000px;">

   那对于ie8及以下该如何获取页面坐标呢。我们可以通过计算。
   利用document.body或document.documentElement中的scrollLeft.scrollTop属性
   来计算。
   scrollTop,scrollLeft是获取滚动条的坐标。滚动条加视口(客户端)位置则可以表示页面坐标
   如图：
   由浅入深JavaScript12进阶-事件2

   为了解决chrome浏览器使用document.body方式而IE使用document.documentElement方式，
   我们常常做兼容。
   var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
   eg:
       <script>
           window.onload = function() {
               function getPos(ev){//chrome,safari使用document.body.scrollTop,IE火狐document.documentElement
                   var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
                   var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
                   return {x:ev.clientX+scrollLeft,y:ev.clientY+scrollTop};
               }
               document.onclick = function(ev){
               var oEvent = event||ev;
               var pos = getPos(oEvent);
               alert(pos.x+' '+pos.y);
               }
           }
       </script>

键盘事件
   键盘事件就比较容易了
   DOM3级规定的键盘事件有
   keydown：用户按下键盘上任意键时触发
   keypress:用户按下键盘上的字符键时触发
   keyup:用户释放键盘上的键时触发

   键码keyCode。对于键盘事件，事件对象上最重要的属性就是键码keycode了。
   他能帮助我们判断用户按下的键是什么键
   eg:
       var oEvent = ev||event;
       alert(oEvent.keyCode);
   有兴趣大家可以依次按下键看一看对应的数字keyCode。

   一个通过键盘左右键移动div例子
   eg:
   <style>
           #div1{width: 100px;
                  height: 100px;
                  background: red;
                  position:absolute
                  ;}

       </style>
       <script type="text/javascript">
           window.onload = function(){
               var oDiv = document.getElementById('div1');
               document.onkeydown=function(ev){
                   var oEvent = ev||event;
                   if(oEvent.keyCode==37){
                       oDiv.style.left=oDiv.offsetLeft-10+'px';
                   }else if(oEvent.keyCode==39){
                       oDiv.style.left=oDiv.offsetLeft+10+'px';
                   }
               }
           }

       </script>
   </head>
   <body>
       <div id="div1">
       </div>
   </body>
   键盘事件对象除了有一个较为重要的keyCode属性还有ctrlkey,shiftkey等属性
   oEvent.ctrlKey表示是否按下了ctrl键，此外还有shiftKey,altkey。
   我们大多数时候用来做快捷收藏，提交等功能。
   ctrl+d收藏，ctrl+enter提交。
   eg:
       <script>
           window.onload = function(){
               var oTxt1= document.getElementById('txt1');
               var oBtn1= document.getElementById('btn1');
               oBtn1.onkeydown = function(ev){
                   var oEvent = ev||event;
                   if(oEvent.keyCode==13&&oEvent.ctrlKey){
                       alert('按下ctrl+enter进行提交')
                   }
               }
           }

</script>

说在最后的话：

本博会开一个JS专栏:《大神前端：JavaScript板块》长期更新，由浅入深带大家系统的学习JavaScript，
做出多彩的JS特效。
如果对你有用就关注一下专栏吧，我会不断的更新，后期还有其他版块。
http://blog.****.net/column/details/15918.html

想深入，系统全面的学习JS，博友们可以在****搜索我的课程《多彩JavaScript》@[email protected]。
http://edu.****.net/course/detail/5619

限于文章篇幅原因，这里仅仅介绍冰山一角。由于笔者的水平有限，编写时间也很仓促，
文中难免会出现一些错误或者不准确的地方，不妥之处恳请读者批评指正

由浅入深JavaScript12进阶-事件2

相关推荐