JS事件

JS事件:
  声明:为了事件对象event跨浏览器兼容: var oEvent==ev||event;
      所以在下面用到 event 的地方都用 oEvent 代替

  1)doucument的本质:是整个文档的根节点,所有的html都包含在document里面,
      不过我们平时都是省略document
          document.childNodes[0].tagName-->!
          document.childNodes[1].tagName-->html

  2)事件对象:即event对象
    在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件相关的信息
    如:获取鼠标的位置,获取键盘按键
    如:不同浏览器下的事件对象:
              IE/Chrom:  event
              FF/IE9+/Chrom:  传参ev
      跨浏览器的事件对象兼容性写法:var oEvent==ev||event;
          document.oncilck=function(ev){
              var oEvent==ev||event;
              if(oEvent){
                  alert(oEvent.clientX);
              }
          }

  3)事件类型:
    1.window上面的事件:
       --window.onload:当页面完全加载完后就会触发onload事件
       --window.onunload:与onload事件相对应,当文档被完全卸载后触发
       --window.onresize:当浏览器窗口大小被改变期间被重复触发
       --window.onscroll:在文档被滚动期间重复触发

    2.焦点事件:
      --element.onblur:元素失去焦点时触发
      --element.onfocus:元素获得焦点时触发

    3.鼠标事件:
      --elelment.onclick:当用户点击某个对象时触发
      --element.ondblclick:当用户双击某个对象时触发
      --elelment.onmousedown:鼠标按键被按下时触发
      --element.onmouseup:鼠标按键被松开时触发
      --element.onmousemove:当鼠标移动时触发
      --element.onmouseover:鼠标移到某元素之上时触发
      --element.onmouseout:鼠标从某元素上面移开时触发

    4.鼠标事件的属性:
      1.--oEvent.button=0|1|2: 当事件被触发时哪个鼠标按键被点击
          非IE下:
            0     表示鼠标左键被点击
            1     表示鼠标中键被点击
            2     表示鼠标右键被点击
          IE下：
            1     表示鼠标左键被点击
            4     表示鼠标中键被点击
            2     表示鼠标右键被点击

      2.--oEvent.clientX,oEvent.clientY:获取鼠标在可视区的相对位置,
        即参照点在浏览器的左上角,会随着滚动条的滚动而变化,在没有滚动条时,
        直接oEvent.clientX,oEvent.clientY即可获取鼠标位置,当有滚动条时,则不能直接使用
        所以获取鼠标的绝对位置可以封装成一个函数:(页面有无滚动条时都可以用)
          function getMousePosition(ev){
            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};
          }

        例子2:让一个div跟随鼠标运动:
            document.onmousemove=function(ev){
              var oEvent==ev||event;
              var pos=getMousePosition(oEvent);
              if(oEvent){
                oDiv.style.top=pos.y+'px';
                oDiv.style.left=pos.x+'px';
              }
            }

        例子2:一串div跟随鼠标移动
        (html是很多宽和高都很小的div)
        window.onload=function(ev){
              var oDiv=document.getElementsByTagName('div');
              var oEvent=ev||event;
              var pos=getMousePosition(oEvent);
              for(var i=oDiv.length-1;i>0;i--){    //让后一个div跟着前一个运动
                  oDiv[i].style.left=oDiv[i-1].offsetLeft+'px';
                  oDiv[i].style.top=oDiv[i-1].offsetTop+'px';
              }
              //让第0个div跟着鼠标运动
              oDiv[0].style.top=pos.x+'px';
              oDiv[0].style.left=pos.y+'px';
          }

     3.--oEvent.page.X, oEvent.pageY: 获取的是鼠标的绝对位置,参照点是浏览器的左上角,
        与上面的getMousePosition函数的作用一样,但是IE8及以下不兼容,所以一般不使用,
        获取鼠标的绝对位置还是使用getMousePosition函数

     4.--oEvent.screenX, oEvent.screenY: 获取的是屏幕坐标的位置,参照点是屏幕的左上角,而不是浏览器左上角

     总结:
       1.screenX, clientX, pageX三者的区别:
         --screenX:鼠标位置相对于用户屏幕水平偏移量,而screenY也就是垂直方向的,此时的参照点也就是原点是屏幕的左上角
         --clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角,该参照点会随之滚动条的移动而移动
         --pageX：参照点也是浏览器内容区域的左上角,但它不会随着滚动条而变动(不兼容,所以还是使用clientX方法获取鼠标位置)
      2.只要用到event.clientX,event.clientY,obj.clientWidth,obj.clientHeight都要用到scrollTop/scrollLeft

    5.键盘事件:
      --element.onkeydown:某个键盘按键被按下触发
      --element.onkeyup:某个键盘按键被松开时触发

    6.键盘事件的属性:
      1.修改键:是指Shift,Ctrl,Alt,Meta(Windows中指win键,苹果机中指Cmd键)
            这些修改键经常用来修改鼠标事件的行为,所以DOM为此规定了四个属性,
            表示这些修改键的状态,更别为:shiftKey,ctrlKey,altKey,metaKey
            这些属性返回的都是布尔值,当相应的键被按下时,返回true,否则返回false
         使用表示:
            --oEvent.shiftKey
            --oEvent.ctrlKey
            --oEvent.altKey
            --oEvent.metaKey

        ctrl+enter提交留言:
                windown.onload=function(ev){
                    var oEvent=ev||event;
                    var otxt=document.getElementById('txt');
                    txt.onkeydown=function(){
                        if(oEvent.keyCode==13 && oEvent.ctrlKey){
                            otxtArea.value+=otxt.value;
                            otxt.value='';
                        }
                    }
                }

      2.keyCode属性:
          --oEvent.keyCode可以获取鼠标的键码,也可以根据键码,判断用户按下的是哪一个按键
          --在键盘控制或者是鼠标控制运动的过程中,必须要给绝对定位,才能运动
            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';
                    }
                }

  7.文本事件:
    1.element.onchange: 当输入域的内容改变时触发
        一般适用于文本域(text field),以及 textarea 和 select 元素
        <input type="text" value="Hello world!" onchange="this.value='abccdef';" />
        或者: oTxt.onchange=function(){
                this.value='abccdef';
              }

    2.element.onselect:文本被选中时触发
    <input type="text" value="Hello world!" onselect="alert('selected text')" />

  8.其他事件:
      --element.onabort:图像的加载被中断时触发
      --element.onerror:在加载文档或图像时发生错误时触发
      --element.onreset:重置按钮被点击时触发
      --element.onsubmit:确认按钮被点击时触发
      --element.oncontextmenu:自定义右键菜单事件,有返回值

  9.补充:
    --什么是浏览器的默认行为:浏览器自己本身就有的一些事件,
        如在页面中我们点击右键,会出来一个浏览器自己的右键菜单; 我们在文本框中输入内容也是一种默认行为
    --阻止默认行为:return false;-->会阻止浏览器所有的默认行为

      示例1:只能输入数字的文本框
            var oTxt=document.getElementById('txt');
            oTxt.onkeydown=function(ev){
                var oEvent=ev||event;
                if(oEvent.keyCode!=8 && (oEvent.keyCode<48||oEvent.keyCode>57)){
                    return false;
                }
            }

      有时候我们需要阻止默认行为,自己定义一个右键菜单出来:
      例子2:右键弹出自己自定义的菜单(自己定义oDiv的样式)
        document.oncontextmenu=function(ev){
          var oEvent=ev||event;
          return false;    //阻止浏览器默认的浏览器右键菜单
          oDiv.style.display='black';
          oDiv.style.left=oEvent.clientX;    //没有滚动条的情况
          oDiv.style.top=oEvent.clientY;
        }
        document.onclick=function(){
          oDiv.style.display='none';  //单击页面其他位置,自定义菜单消失
        }

4)多事件绑定: attachEvent/attachEventLister
  当页面中有两个window.onload时,页面会只执行第二个
    有时我们希望两个相同的函数都能执行,这里需要事件绑定
 
    1)事件绑定:(不兼容需要两个结合做兼容if..else..)
        IE8以下用: attachEvent('事件名',fn);
        FF,Chrome,IE9-10用: attachEventLister('事件名',fn,false);
      
        同一对象绑定两个相同事件,两个事件都会执行
            if(oBtn.attachEvent){
                oBtn.attachEvent('onclick',function(){
                    alert('a');
                });
                oBtn.attachEvent('onclick',function(){
                    alert('b');
                });
            }else{
                oBtn.attachEventLister('click',function(){
                    alert('a');
                },false);
                oBtn.attachEventLister('click',function(){
                    alert('b');
                },false);
            }
        
      多事件绑定封装成一个兼容函数:
          function myAddEvent(obj,ev,fn){
              if(obj.attachEvent){
                  obj.attachEvent('on'+ev,fn);
              }else{
                  obj.attachEventLister(ev,fn,false);
              }
          }
          myAddEvent(oBtn,'click',function(){
              alert(a);
          });
          myAddEvent(oBtn,'click',function(){
              alert(b);
          });

    2)解除绑定:
        IE:detachEvent('事件名',fn);
        FF,Chrome,IE9-10:removeEventLister('事件名',fn,false);