JS事件~（1）

look_w

DOM事件流

事件流包括三个阶段

    捕获阶段
    目标阶段
    冒泡阶段
    事件一开始从文档的根节点流向目标对象（捕获阶段），然后在目标对象上被触发（目标阶段），之后再回溯到文档的根节点（冒泡阶段）

    所有的事件都会经过捕获阶段和目标阶段，但有些事件会跳过冒泡阶段，比如，让元素获得输入焦点的focus事件已经失去输入焦点的blur事件就都不会冒泡

事件处理程序

HTML事件处理程序

    <input type="button" value="click me" onclick=“console.log(event.type)” />
     
    <input type="button" value="click me" onclick=“handler(event)” />

    结构和行为相耦合，不易维护
    DOM 0级事件处理程序

    btn.onclick = function(){
      ...
    }

    这种方式会在事件流的冒泡阶段被处理，删除事件 btn.onclick = null

DOM 2级事件处理程序
dom.addEventListenter() / dom.removeEventListener()
接收3个参数：要处理的事件名， 函数， 布尔值
可以为同一个元素添加多个同类型事件
按照顺序触发
IE事件处理程序
attachEvent() 和 detachEvent()
接收2个参数， 事件名（要加‘on’），函数
IE8及之前的版本
只支持事件冒泡
可添加多个处理程序，但触发顺序是反着来的
最大的区别是：作用域是 全局，this.id指的是 window的id

    // 兼容性写法
    function addEvent(type, el, fn){
      if(window.addEventListener){
        el.addEventListenter(type,fn,false)
      }else if(window.attachEvent){
        el.attachEvent('on'+type, fn)
      }
    }
    // 结合惰性函数的兼容性写法
     var addEvent = function (type, el, fn){
      if(window.addEventListener){
        addEvent = function(type, el, fn){
          el.addEventListenter(type,fn,false)
        }
      }else if(window.attachEvent){
        addEvent = function(type, el, fn){
           el.attachEvent('on'+type, fn)
        }
      }
    }