鼠标事件补充

    mouseover / mouseout    与     

区别: mouseover / mouseout 会在子元素上触发，用的较少。虽然子元素会触发，但是事件的主体还是由父元素承受
mouseenter / mouseleave 不会在子元素上触发，只在作用源上起效果

浏览器事件

  onl oad 加载 
  onscroll 滚动条滚动
  onresize 浏览器窗口发生改变

表单事件

  1.表单内容改变 onchange
  当表单内容发生改变并且鼠标在表单内数去焦点，会触发
  例：  var inputEle = document.querySelector("input");
        inputEle.onchange = function () {
              console.log("改变了");
        }
  
  2.输入的内容改变 oninput
  例：  var inputEle = document.querySelector("input");
        inputEle.oninput = function (){
              console.log(this.value);
        }
  3.鼠标聚焦事件    onfocus
  例：  var inputEle = document.querySelector("input");
        inputEle.onfocus = function (){
              console.log("聚焦");
        }
  4.鼠标在表单中失去焦点  onblur
  例：  var inputEle = document.querySelector("input");
        inputEle.onblur = function (){
              conssole.log("失去焦点");
        }

移动端

  触摸事件
  1.touchstart     开始触摸  （类似鼠标按下mousedown）
  2.touchmove       触摸移动    （类似鼠标mousemove）
  3.touchend        触摸结束    （类似鼠标mouseup）
  例：  document.ontouchstart = function (){
              console.log("接触屏幕");
        }
        document.ontouchmove = function (){
              console.log("触屏并移动");
        }
        document.ontouchend = function (){
              console.log("从屏幕上移开");
        }

其他事件

  1.过渡结束事件监测    transitionend 
  例：  divEle.ontransitionend = function (){
        console.log("123");
  }
  当div元素有transition过渡的时候，我们可以用transitionend来监测div元素时候过渡结束
  2.动画结束事件监测      animationend
  和transitionend类似动画结束会触发

键盘事件

  全键触发
  1.键按下 keydown
  例：  document.onkeydown = function (){
              console.log("按下了");
        }
  2.按键抬起  keyup
  例：  document.onkeyup = function (){
              console.log("按键抬起了");
        }
  非全键触发
  3.键按压    keypress
  例：  document.onkeypress = function (){
              console.log("键按下");
        }
  注：这里触发元素是document，鼠标在文件中才会触发这些按键。触发事件时
  鼠标焦点得在按的元素内部。

判断键盘的按键

  keyCode 和 key ，keyCode是该键的ASCII码。key是该键的名字字符串。
  例如，按下小写a键，keyCode会显示65，但是key显示的'a'。
  例：  document.onkeydown = function ( event ){
              var e = event || window.event ; 
              var keyCode = e.keyCode || e.which ; 
              var key = e.key ;
              console.log( keyCode , key );
        }
  注: 在谷歌和ie中，keyCode使用会有差别。谷歌一般用e.keyCode表示按键ASCII码，
  ie8以及以下的一般用e.which表示按键ASCII码。现在keyCode处于弃用状态

组合按键

  说到组合按键，需要提一下event事件对象。当我们打印event对象时，会发现很多键名和属性值。其中
  有键名为altKey，ctrlKey，shiftKey这三个我们常用的组合按键。他们的键值有false和true的Boolean
  类型。按下表示true，没按表示false。
  例:   document.onkeydown = function ( event ){
              var e = event || window.event ; 
              var key = e.key ;
              switch( key ){
                    case 'a' :
                          if ( e.altKey ){
                                console.log("按下了alt+a");
                          }
                          break ; 
                    case 'b' :
                          if ( e.ctrlKey ){
                                console.log("按下了ctrl+b");
                          }
                          break ; 
                    case 'C' :
                          if ( e.shiftKey ){
                                console.log("按下了shift+c");
                          }
                          break ; 
                    default:
                          break ;
              }
        }
        注：  在做shift的组合键判断时，shift+字母会让字母变成大写的字母

事件监听

  事件监听
        addEventListener  添加事件监听，并绑定事件
        语法：ele.addEventListener(事件,fn);
        事件源.addEventListener(触发事件,方法/函数);    注：这里触发事件不需要on
        例: BoxEle.addEventListener("click",function(){
              console.log(1111);
        });

     事件监听绑定事件和元素.on触发事件区别

        1.元素.on触发事件，它是一个赋值的过程，将一个函数绑定给触发事件，可以看作是匿名函数赋值
        给一个绑定的事件，当它重复赋值的时候，后面的值会覆盖前面赋值，只会执行最后一个
        即它是一个1对1的关系
        2.事件监听可以看作是函数调用的过程，它不断的调用，然后用fn执行这些内容，函数调用不会盖过
        前面调用的内容
        即它是一个1对多得关系

     事件监听的兼容性
        1.监听的兼容性还是谷歌浏览器和ie浏览器的兼容问题
        在谷歌中，用ele.addEventListener(事件名,fn);给元素绑定监听事件
        在ie及ie8以下，用ele.attachEvent(on+事件名,fn);给元素绑定监听事件
        2.执行先后问题，在谷歌中，先调用/注册，先执行；在ie8及以下先调用/注册，后执行

  --注--
        事件监听的兼容性处理函数
        function bindEvent(ele,eventName,fn){
              if ( window.addEventListener ){
                    return ele.addEventListener(eventName,fn);
              } else {
                    return ele.attachEvent("on"+eventName,fn);
              }
        }