事件

事件流：包括三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段；

1、捕获阶段：事件从文档的根节点流向目标对象节点。途中经过各个层次的DOM节点，并在各节点上触发捕获事件，直到到达事件的目标节点。

在捕获阶段，目标元素不会接受事件，意味着事件从document到目标元素就停止；

2、处于目标阶段：事件在目标节点上被触发；

3、冒泡阶段：事件又传播回文档；它会随着DOM树一层层向上冒泡，回溯到根节点。

事件处理：addEventListener() removeEventListener() 接收3个参数要处理的事件名、事件处理程序的函数、布尔值

布尔值：true 表示在事件捕获阶段调用事件处理程序；

false 表示在冒泡阶段调用事件处理程序；

例如：

<div class="box">
    <button>请点击按钮</button>
</div>

<script>
    var event=function(){
        alert(this.tagName);
    }
    document.getElementsByClassName('box')[0].addEventListener("click",event,false);          //事件名
    document.getElementsByTagName('body')[0].addEventListener("click",event,false);
    document.getElementsByClassName('box')[0].removeEventListener("click",event,false);    
</script>

IE事件处理程序：attachEvent() detachEvent() 接收2个参数事件处理名称和事件处理函数，因为IE8及更早的浏览器只支持事件冒泡；

    document.getElementsByClassName('box')[0].attachEvent("onclick",event);     //事件名   
    document.getElementsByTagName('body')[0].attachEvent("onclick",event);

区别：1、参数不一样； 2、事件名称不一样，普通的直接click; IE是onclick

兼容的写法：

var addEvent = (function(){
        if(document.addEventListener){
            return function(element, type,callback){
                element.addEventListener(type,callback,false);
            }
        }else{
            return function(element, type,callback){
                element.attachEvent('on' + type,callback);      //注意添加on
            }
        }
})();

事件对象：

//IE是把event事件对象作为全局对象window的一个属性；可以使用event或window.event来访问；
//FireFox和Chrome等主流浏览器是通过把【事件对象】作为【事件响应函数】的【参数】进入传入的；
//兼容性的写法示例：
domElement.onclick = function( e ){
      e = e || window.event;//或（||）书写顺序有讲究，不能随意换
}

事件对象上有属性和方法：

w3c下事件对象有很多属性和方法，cancleable 是否可以取消事件的默认行为，只有设置为true的事件才可以是有preventDefault()来取消默认行为。

事件对象的target是事件的实际目标， w3c:target IE:srcElement

type:被触发的事件名 click w3c和ie一样；

阻止冒泡： W3c：event.stopPropagation();
IE： cancelBubble = true;

阻止默认行为： W3C: event.preventDefault();

IE : window.event.returnValue = false;