DOM事件（部分）

DOM事件
  用户使用js和浏览器交互。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。
   (1)事件三要素：
          事件源
          事件处理函数
          事件对象
         
          var btn=document.getElementById('btn')
            //btn事件源
          btn.οnclick=function(e){
             //事件处理函数
            
             //e事件对象
          }
   (2)绑定事件的方式:
       1)btn.οnclick=function(e){}
      
       2)<div οnclick='handler()'>点击</div>
       <script>
       function handler(){
       }
       </script>
       btn.οnclick=null    //移除事件
       
       3)addEventListener("click",handler)    //IE9+  添加事件
       removeEventListener('click',h)     //IE9+  移除事件
       
       attachEvent('onclick',h)      //IE9-    添加事件
       detachEvent('onclick',h)       //IE9-    移除事件
   (3)事件流
       事件流三阶段:
             事件捕获
             事件执行
             事件冒泡
   
   事件冒泡(由内向外):
    var box1=document.getElementById('box1')
    var box2=document.getElementById('box2')
    var box3=document.getElementById('box3')
       // 事件冒泡  
    box1.οnclick=function(){
        console.log('box1');
    }
    box2.οnclick=function(){
        console.log('box2');
    }
    box3.οnclick=function(){
        console.log('box3');
    }
    document.body.οnclick=function(){
        console.log('body');
    }
    
    事件捕获(由外向内)

   (4)事件处理函数
   事件处理函数以“ on ”开头
     btn.οnclick=function(e){

     }

   (5)事件对象
    事件对象的属性均为只读属性
      bubbles                Boolean         事件是否冒泡
      cancelable             Boolean         是否可取消事件默认行为
      currentTarget          Element         事件处理程序当前正在处理事件的那个元素
      eventPhase            Integer         调用事件处理程序的阶段;1捕获 2处于目标 3冒泡
      target                 Element          事件真正目标
      type                    String         事件类型，需要一个函数，处理多个事件时，可使用该属性。
      preventDefault()       Function         取消事件的默认行为
      stopPropagation()    Function         取消事件的进一步捕获或者冒泡
   
   (6)事件类型
        1)UI事件
     load    当页面完全加载后在window上触发，当所有框架加载完时在框架集上触发，当图像加载完毕时在img元素上触发，当嵌入的内容加载完时在<object>触发        
     unload    当页面完全卸载后在window上触发，当所有框架都卸载后在框架集上触发，当嵌入的内容卸载完毕后再<object>上触发,(firefox不支持)
     select    当用户选择文本框（<input>,<textarea>）中的一个或多个字符时
     change  在select的下拉列表的选中的选项更改的时候触发
     resize     当浏览器窗口被调整到一个新的高度或者宽度时，会触发
     scroll    当用户滚动带滚动条的元素中的内容时，在该元素上触发resize,scroll会在变化期间重复被激发，尽量保持代码简单
        
        2)焦点事件
      blur        元素失去焦点的时候触发
      focus    元素获得焦点的时候触发，不支持冒泡    
       //IE支持
      focusin    与focus等价，支持冒泡
      focusout    与blur等价，支持冒泡
        3)鼠标与滚轮事件
    click     点击主鼠标按钮或者按下回车按键的时候触发。只有在一个元素上相继发生mousedown,mouseup事件，才会触发click事件
     dblclick    双击主鼠标按钮时触发.只有在一个元素上相继触发两次click时间才会触发dbclick事件