DOM事件

DOM事件：
        javascript与HTML之间的交互是通过事件实现的。事件就是文档或浏览器窗口中发生
的一些特定的交互瞬间。

事件三要素：
1. 事件目标（event target）
发生的事件与之相关联或与之相关的对象
2. 事件处理程序（event handler）
处理或相应事件的函数
3. 事件对象（event object）
与特定事件相关且包含有关该事件详细信息的对象

  
事件流（页面接收事件的顺序）
    1. 事件冒泡
      特点：从内往外传递
          事件由一个具体的元素接收，然后又逐步传递到不具体的节点
      注意：元素需要嵌套，每层元素都绑定事件
      阻止事件冒泡
    2. 事件捕获
      特点：从外往内传递
        事件由不太具体的节点接收到，然后传递到具体的节点上
      addEventListener()
        作用：绑定事件监听器
        参数：
          1. 事件类型（click mouseover 等）
          2. 事件处理函数 当绑定的事件被触发时 要执行的操作
          3. boolean？ 用来决定事件流类型 事件冒泡false  事件捕获true 
      removeEventListener()
        作用：移除事件
        参数：
          1. 事件名
          2. 事件处理函数 
          3. boolean？ 事件冒泡false  事件捕获true 
      onXXXXX
        属性
        作用：绑定事件
        比如：onclick onmouseover
        调用者：节点 可以是div 也可以是button
      IE事件处理程序
        attachEvent()
          作用：事件绑定
          参数： 事件处理程序名称
                事件处理函数
        detachEvent()
          作用：事件移除
  
事件对象 event
    在触发DOM的某个事件时 会产生一个事件对象 event 
    这个包含所有与事件相关的信息
    浏览器默认会把event传入到事件处理函数中
    event对象的属性都是只读属性

    属性          类型          说明
    type        String        事件类型
    bubbles     Boolean       事件是否冒泡
    cancelable  Boolean       是否可取消事件默认行为
    target      Element       事件目标
  
事件类型 
    鼠标事件
      click     点击鼠标的主按钮  点击触控板
      dblclick  双击鼠标的主要按钮
      mousedowm 任意鼠标按钮按下时触发
      mouseup   任意鼠标按钮抬起（释放）时触发
      mousemove 鼠标在元素内部移动时会重复触发
      mousewheel  滚轮事件
      mouseover
      mouseenter
      mouseout
      mouseleave 
    焦点事件
      blur 元素失去焦点
      focus 元素获得焦点
    UI事件
      load
        在页面完全加载后会在window上触发这个事件
        如果是图像加载完成后 会在img元素上触发
        window.onload
      unload
        在页面完全卸载后会在window上触发这个事件
      select
        当用户选择文本框中的字符时会触发
      resize
        当浏览器窗口被调整宽高时会触发 会重复触发
      scroll
        滚动条滚动时会触发 会重复触发
    键盘事件
      keydown 按下键盘任意键触发 如果按住不放会重复触发
      keypress 按下键盘字符键触发
      keyup   释放按键时触发

    事件代理
           将事件绑定当前元素的父元素上，这时候点击当前元素时，就会执行父元素上绑定的事件处理函数
    好处：父元素代理子元素的事件，子元素可以动态添加，不用频繁的去绑定事件
               可以通过 event.target 获得当前元素