事件监听

事件流

IE是事件冒泡流——事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点

其他是事件捕获流——不太具体的节点更早接收到事件，而最具体的节点最后接收到事件

DOM事件流

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

事件处理程序

HTML事件处理程序

<input type='button' onclick = "function func(){}">

缺点：1存在一个时差问题

           2 这样扩展事件处理程序的作用域链在不同浏览器中会导致不同结果

           3 HTML与js代码紧密耦合

DOM0级事件处理程序

var btn = document.getElementById('mybtn');

btn.onclick = function(){

  alert('hello');

};

btn.onclick =null;

DOM2级事件处理程序

var btn = document.getElementById('mybtn');

btn.addEventListener('click',function(){

    alert(this.id);

},false);

IE事件处理程序(这样处理的有IE和opera)

var btn = document.getElementById('mybtn');

btn.attachEvent('click',function(){

    alert(this.id);

});

兼容性函数

var EventUtil = {
            addHandler:function(ele,type,handler){
                if(ele.addEventListener){
                    ele.addEventListener(type,handler,false);
                }else if(ele.attachEvent){
                    ele.attachEvent("on"+type,handler);
                }else{
                    ele["on"+type]=handler;
                }
            },
            removeHandler:function(){

                 if(ele.removeEventListener){
                    ele.removeEventListener(type,handler,false);
                }else if(ele.detachEvent){
                    ele.detachEvent("on"+type,handler);
                }else{
                    ele["on"+type]=null ;
                }

          },
            preventDefault:function(ev){
                if(ev.preventDefault){
                    ev.preventDefault();
                }else{
                    ev.returnValue=false;
                }
            },

          getEvent:function(event){

                return event ? event:window.evnet;

         }

          getTarget: function(event){

                return event.target ||  event.srcElement;

         }

            stopPropagation:function(ev){
                if(ev.stopPropagation){
                    ev.stopPropagation();
                }else{
                    ev.cancelBubble=true;
                }
            }
        }