事件对象兼容浏览器

1.鼠标事件对象的button属性（了解）

button 控制用户操作的按键

左键 ： 0

滚轮 ： 1

右键 :  2

ie下的数据

左键 ：1

滚轮 ：4

右键 :  2

案例

跨浏览器兼容事件对象button的属性

function getButton(evt){ //放在事件处理程序函数使用

    var e = evt || event;

    if( evt ){

        return evt.button;

    }else if( window.event ){

        swhitch( e.button ){

            case 1 : return 0;

            case 4 : return 1;

            case 2 : return 2;

        }

    }

}

    

2.事件流

当某个事件执行时，从子元素向父元素触发 或 从父元素向子元素触发 称为事件流

事件流的两种模式

事件冒泡：从 子元素向父元素触发

        概念：当某个事件触发时，同样的事件会向父元素触发，这个过程就称为事件冒泡。不是所有事件都会产生冒泡问题，如onblur onfocus onload

        阻止冒泡：

            现代浏览器：e.stopPropagation();

            ie浏览器：e.cancelBubble = true;

            兼容：

                if( e.stopPropagation ){

                    e.stopPropagation();

                }else{

                    e.cancelBubble = true;

                }

                或 ： e.stopPropagation ? e.stopPropagation() :  e.cancelBubble = true;

//跨浏览器阻止事件冒泡行为

function stopPropa(e){

     var e = e || event ;

     if(e.stopPropagation){//高版本浏览器使用

          return e.stopPropagation();

     }else{//低版本ie浏览器使用

          return e.cancelBubble = true;

     }

}

事件捕获： 从父元素向子元素触发

冒泡案例：

    弹出个人资料

3.阻止事件默认行为

现代浏览器:  e.preventDefault();

ie：returnValue = false;

兼容：e.preventDefault ? e.preventDefault() : e.returnValue = false;

事件执行函数中加 return false阻止默认行为，所有浏览器都兼容

//跨浏览器取消浏览器默认行为

function stopDefault(e){

     var e = e || event ;

     if(e.preventDefault){//高版本浏览器使用

          return e.preventDefault();

     }else{//低版本ie浏览器使用

          return e.returnValue = false;

     }

}

4.事件监听addEventListener() 高版本浏览器

事件监听的好处：

    1.可以为一个元素绑定多次同一个事件

    2.程序员可以使用事件监听方式 确定 触发的事件过程是冒泡还是捕获

事件源.addEventListener("没有on的事件",function(){},true/false);默认false冒泡，true为捕获

    如果同一元素既有捕获监听，又有冒泡监听，优先执行捕获。

ie事件监听：document.attachEvent("on+事件",function(){});没有第三个参数 没有捕获或冒泡的区分

兼容事件监听函数

    

function addEvent( obj , type , callBack ){

    if( obj.addEventListener ){

        obj.addEventListener( type , callBack );

    }else{

        obj.attachEvent( "on" + type , callBack );

    }

}