由浅入深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是获取滚动条的坐标。滚动条加视口(客户端)位置则可以表示页面坐标
    如图:
    
    为了解决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.οnkeydοwn=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.csdn.net/column/details/15918.html

想深入,系统全面的学习JS,博友们可以在CSDN搜索我的课程《多彩JavaScript》@_@。
http://edu.csdn.net/course/detail/5619

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



  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值