20170707

事件流

• 事件流–描述的是从页面中接受事件的顺序。
• 事件冒泡：即事件最开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播至最不具体的那个节点（文档，document）。
• 事件捕获：不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件。

事件处理程序

• HTML事件处理程序：直接在HTML中添加事件。

• dom0级事件处理程序：先获得元素，将事件添加到元素上。

  例如：

  btn.onclick=function（）{
  }

  删除方法：

  btn.onclick=null;

• dom2级事件处理程序：addEventListener()和removeEventListener()

  • 接收三个参数：要处理的事件名；事件处理程序的函数；布尔值。第一个参数事件名不能加on，比如onclick，onmouseover都要将on去掉；第三个参数布尔值，true：捕获阶段调用事件处理程序，false：冒泡阶段调用事件处理程序
  • removeEventListener()参数必须与addEventListener()一致
  • 通过addEventListener添加的事件必须用removeEventListener移除

• IE事件处理程序（IE和Opera）
  attachEvent() 添加事件
  detachEvent() 删除事件
  只有两个参数：要处理的事件名和事件处理程序的函数，没有第三个参数布尔值，原因是IE8以及更早的浏览器版本只支持事件冒泡；第一个参数事件名，要加上on。

• 跨浏览器事件处理程序
  之前没有考虑到IE的事件处理程序，下边的程序是考虑了IE事件处理程序的，解决跨浏览器事件处理的兼容性：

var event = {
        //添加事件
        addHandler: function (elem, type, handler) {
            if (elem.addEventListener) {
                elem.addEventListener(type, handler, false);
            } 
            else if (elem.attachEvent) {
                elem.attachEvent(type, handler);
            } 
            else {
                elem['on' + type] = handler;
            }
        },
        //删除事件
        removeHandler: function (elem, type, handler) {
            if (elem.removeEventListener) {
                elem.removeEventListener(type, handler, false);
            } 
            else if (elem.detachEvent) {
                elem.detachEvent(type, handler);
            } 
            else {
                elem['on' + type] = null;
            }
        }
}

调用：

event.addHandler(elem, type, handler)
event.removeHandler(elem, type, handler)

DOM中的事件对象

• type属性：用于获取事件类型，如click，mouseover等；
• target属性：用于获取事件目标，即触发该事件的元素；
• stopPropagation()方法：用于阻止事件冒泡；
• preventDefault()方法：用于阻止事件的默认行为，如a标签的默认行为就是点击它跳转。

IE中的事件对象

• type属性：同DOM；
• srcElement属性：用于获取事件目标；
• cancelBubble属性：用于阻止事件冒泡，设置为true表示阻止冒泡，false表示不阻止冒泡；
• returnValue属性：阻止事件的默认行为，设置为false表示阻止。

解决有关事件的兼容性

封装到event.js（见github），需要用的时候直接调用就可以了。
github地址：
https://github.com/Leaf217/IFE-2017/blob/c58a5130935e357e1b0f2f2b7368ea2fdee5d847/day29/script/event.js