javascript IE事件处理及跨浏览器事件处理程序

一、javascript事件处理中

      addEventListener/removeEventListener 用于绑定事件和解除事件，但大多用于chrome/火狐/IE9这些比较高级的浏览器中，IE8及以下就没有效果。

     主要用法：element.addEventListener(type,event,boolean); type:绑定的一些js事件如鼠标事件等；event：执行的动作我理解为一个函数；布尔值：我理解为事件开始执行的地方，默认值为false。

     值得注意的是：removeEventListener 解绑一个事件，解除的是addEventListener所绑定的事件，也就是说这两个方法里面的参数要一致，就是event要是一样的函数，匿名函数容易出错可以先给函数赋值；

      attachEvent/detachEvent也是用于绑定事件和解除事件，但是这两个只有在IE8及及以下的浏览器中才能使用。

     主要用法：element.attachEvent(type,event,boolean); type:绑定的一些js事件如鼠标事件等要加“on”不知道为什么；event：执行的动作我理解为一个函数；

二、IE8始终还算是主流浏览器，要考虑到兼容，但不能每次都写两个代码，所以整合成一个封装起来以便使用

<button type="button" id="btntest">just a test</button>

<script type="text/javascript">
 var EventUtil={
        addhandler:function(element,type,events){
            if(element.addEventListener){                      //添加事件
                element.addEventListener(type,events,false);  //如果不是IE8及以下的浏览器则执行
            }else if(element.attachEvent){
                element.attachEvent("on"+type,events);  //如果是IE8则执行
            }else{
                element["on"+type]=null;
            }
        },
        removehandler:function(element,type,event){
            if(element.removeEventListener){                 //移除事件
                element.removeEventListener(type,events,false);
            }else if(element.attachEvent){
                element.detachEvent("on"+type,events);
            }else{
                element["on"+type]=null;
            }
        }
    };
    
    var btn=document.getElementById('btntest');    //测试用例
    var handler=function(){                       //命名函数
        alert("just differ browser test!");
    };
    EventUtil.addhandler(btn,"click",handler);  //调用
</script>

 三、javascript中event对象属性和方法

       function(event){}  event我理解为一个事件参数，所以有事件的属性和方法

      event.target/currentTarget     target：点击的目标；

                                                    IE8及以下使用：srcElement        

                                                   currentTarget：事件绑定的目标；

     event.preventDefault：阻止默认行为；IE8及以下使用：event.returnValue=false

     event.stopPropagation ：阻止事件的冒泡或者捕获；IE8及以下使用：event.canaelBubble=true

     event.clientY、pageY、screenY

                                                      clientY:指浏览器顶部底边到鼠标的位置，不计算滚动轴的距离

                                                      pageY:指浏览器顶部底边到鼠标的位置，计算滚动轴的距离

                                                     screenY:计算机屏幕顶部到鼠标的位置

 四、IE浏览器兼容性的写法

     和上面的添加删除事件兼容性的写法是一样的，直接在里面添加一下函数，进行分钟以便调用

var EventUtil={
        getTarget:function(event){                     //获取事件点击的目标
            return event.target || event.srcElement;
        },
        preventDefault:function(event){               //阻止浏览器的默认事件的执行
            if(event.preventDefault){
                event.preventDefault();
            }else{
                event.returnValue=false;
            }
        },
        stopPropagation:function(event){                 //阻止事件的冒泡
            if(event.stopPropagation){
                event.stopPropagation();
            }else{
                event.cancelBubble=true;
            }
        }
    };