JS中的事件类型和事件属性的基础知识

        
        
            
            
        
        
        
            test        
        
        
        

    
    
            test
            //图像被删除不触发unload事件;        

    
    
            sdfs        

    result:0
 calc 

    
     calc 
    
        chrome 的结果
            focus
            focusin
            body focusin
            DOMFocusIn
            blur
            focusout
            body focusout
            DOMFocusOut
        firefox的结果：
            "focus"
            "blur"

        chorme所有的冒泡事件都支持。
        火狐34还是只支持focus 和blur， 而且界面一开始就自动对body进行了focus;    

    
    
        
        
    
    
     calc 
    

    
    
    
    

    
    
        
        
    
    
     calc 

事件名字只要包含mouse， 都只能通过鼠标的触发比如, 无法通过键盘触发的事件：
　　mousedown,
　　mousemove,
　　mouseout,
　　mouseover,
　　mouseup
　　mouseenter, (要注意这个事件， chrome的高版本才支持的, 这个事件是ie先弄出来的，jQ有做兼容处理所以在chrome下可以使用这个事件)　　
　　mouseleaver (要注意这个事件， chrome的高版本才支持的, 这个事件是ie先弄出来的，jQ有做兼容处理所以在chrome下可以使用这个事件);

因为常用的点击都是鼠标左键， 所以要触发dblclick会触发大部分的mouse事件；
比如你要触发dblclick， 也会依次触发
1: mousedown
2: mouseup
3: click
4: mousedown
5: mouseup
6: click
7: dblclick;

要检测鼠标事件的兼容通过：
　　document.implementation.hasFeature("MouseEvents","2.0") //true （注意注意，DOM2的事件检测的名字是复数，要加一个s，DOM3的不用的）
　　document.implementation.hasFeature("MouseEvent","3.0") //true
　　document.implementation.hasFeature("MouseEvent","4.0") //true
　　document.implementation.hasFeature("MouseEvent","5.0") //true
　　chrome和firefox这两个奇葩了(IE? IE是什么能吃吗？)， 无论怎么传都是true, 我勒个去;新航道雅思

事件对象的属性：
客户坐标的值：
　　clientX
　　clientY
页面坐标的值：
　　pageX
　　pageY;
IE8以及更早版本没有pageX这个值，我们可以通过客户指标的值(clientX,clientY)和界面的滚动条算出来；
　　pageX = clientX + document.documentElement.scrollLeft || document.body.scrollLeft (IE8以及之前的2px没有处理哦)
　　pageY = clientY + document.documentElement.scrollTop || document.body.scrollTop; (同上)
屏幕的坐标：
　　screenX
　　screenY (这两个属性我从来没有用过..)
修改键(热键,也叫快捷键)：
//这几个值都在事件对象下面;
　　ctrlKey,
　　shiftKey,
　　altKey,
　　metaKey( WINDOW中是窗口键， 苹果电脑是CMD键 )
　　

相关元素（relateTarget）:
　　　　IE下没有relateTarget这个东东， 有个toElement和fromElement;这个属性没啥用， 唯一的用处就是在不支持mouseenter以及mouseleave的浏览器中模拟这两个事件(chrome低版本);

鼠标按钮：
　　　　平常用的不多，就是在鼠标按下去的时候是鼠标左键还是中键还是鼠标右键的区别；
　　　　IE8以及之前对鼠标的按键的规定和DOM3区别很大，DOM3是这样规定的：
　　　　　　0：鼠标左键，
　　　　　　1：鼠标中键（滚动键）；
　　　　　　2：鼠标右键；
　　因为IE和DOM2,DOM3按钮事件属性(event)都有button这个属性，必须通过hasFearture进行判断（也没有别的方法了吧，soga）,so,兼容代码要如下：

运行下面代码

            if( document.implementation.hasFearture("MouseEvents","2.0")return event.button,
            else{
                swtich( event.button ) {
                    case 0:
                    case 1:
                    case 3:
                    case 5:
                    case 7:
                        return 0;
                    case 2:
                    case 6:
                        return 2;
                    case 4 :
                        return 1
                };
            }

现在到了滚轮事件了：

IE和chrome以及opera的鼠标滚轮滚动都是通过event.wheelDelta标识的;
　　如果滚轮是向上滚动那么wheelDelta为120，向下值为-120； 哇擦家里么哟鼠标， 笔记本的滚轮怎么滚啊，（￣Ｑ￣）╯，先贴代码吧，

运行下面代码

        
        
            
            
        
        
        
         xx            

                

                

                

                

                

                

                

                

                

                

                

                

                

                

                

                
hehe                

                

                

                

                
hehe                

                

                

                

                
hehe                

                

                

                

                
hehe                

                

                

                

                
hehe