事件流

事件冒泡

概念：即事件最开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到最不具体的那个节点（文档）

事件捕获

概念：不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件

事件处理程序

HTML事件处理程序

将事件处理程序直接加在HTML文档结构内

缺点：不满足结构、样式、行为分离的原则

DOM0级事件处理程序

较传统的方式：把一个函数赋值给一个事件的处理程序属性

btn.onclick = function(){
    alert('hello world!')
}

DOM2级事件处理程序

DOM2级事件定义了两个方法：用于处理指定和删除事件处理程序的操作

addEventListener()
removeEventListener()

语法：element.addEventListener(event, function, useCapture)

event：指定事件名。注意: 不要使用on前缀。例如，使用click,而不是使用onclick。
function：指定要事件触发时执行的函数。
useCapture：可选。布尔值，指定事件是否在捕获或冒泡阶段执行。

true表示事件句柄在捕获阶段执行
false默认。事件句柄在冒泡阶段执行

注意：通过addEventListener添加的事件只能通过removeEventListener来删除，而不能通过DOM0级事件处理程序来删除

IE事件处理程序及跨浏览器解决方案

attachEvent() 添加事件
detachEvent() 删除事件

语法： target.attachEvent(event, function)

event：字符串，事件名称，含on，比如onclick、onmouseover等。
function ：指定要事件触发时执行的函数

不使用第三个参数useCapture的原因：IE8以及更早的浏览器版本只支持事件冒泡

跨浏览器事件处理程序

// 跨浏览器事件处理程序
var EventUtil = {
    // 添加事件
    addHandler:function (element,type,handler) {
        if(element.addEventListener){
         element.addEventListener(type, handler,false);
        } else if (element.attachEvent) {
         element.attachEvent("on" + type,handler);
        }else {
         element["on" + type] = handler;
        }
    },
    // 删除事件
    removeHandler:function (element,type,handler) {
        if (element.removeEventListener) {
         element.removeEventListener(type, handler,false);
        } else if (element.detachEvent) {
         element.detachEvent("on" + type,handler);
        }else {
         element["on" + type] = null;
        }
    }
};
// 调用方法
var btn = document.getElementById("myBtn");
var handler = function () {
     alert("Clicked"); 
};

EventUtil.addHandler(btn,"click",handler);
EventUtil.removeHandler(btn,"click",handler);

事件对象

DOM中的事件对象

type属性：用于获取事件类型

target属性：用于获取事件目标

  btn.onclick = function(e){
      console.log(e.type);
      console.log(e.target);
      console.log(e.target.nodeName);
      console.log(e.target.value);
  }

stopPropagation()方法：用于阻止事件冒泡
preventDefault()方法：用于阻止事件的默认行为

IE中的事件对象

type属性：用于获取事件类型

srcElement属性：用于获取事件目标

  btn.onclick = function(e){
      console.log(e.type);
      console.log(e.srcElement);
      console.log(e.srcElement.nodeName);
      console.log(e.srcElement.value);
  }

cancelBubble属性：用于阻止事件冒泡 true/false
returnValue属性：用于阻止事件的默认行为 true/false,设置为false阻止事件默认行为

JS阻止事件默认行为和冒泡的兼容写法

//阻止冒泡的兼容性写法
function stopPropagation(event){
    var e=arguments.callee.caller.arguments[0]||event;
    if(e&&e.stopPropagation){
        // this code is for Mozilla and Opera
        e.stopPropagation();
    }else if(window.event){
        // this code is for IE
        window.event.cancelBubble=true;
    }
}
//阻止浏览器默认行为的兼容性写法
function stopDefault(event){
    var e=arguments.callee.caller.arguments[0]||event;
    //阻止默认浏览器动作(W3C)
    if(e&&e.preventDefault){
        e.preventDefault();
    }else{
        //IE中阻止函数默认动作的方式
        window.event.returnValue=false;      
    }
    return false;
}

JS DOM事件

事件流