事件

 

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

               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;