事件綁定兼容（事件流的機制;事件委託

時間 2019-11-16

標籤事件綁定兼容機制委託简体版

原文原文鏈接

2.js的兼容性問題
ev||event
offsetParent
事件綁定（事件流的機制;事件委託）
鼠標滾輪事件
非火狐：onmousewhell（dom0）
ev.whellDelta（滾輪方向）
上：正
下:負javascript

  testNode.onmousewheel=function(ev){
              
              var ev=ev||event;
              console.log(wheelDelta);
          }

火狐： DOMMouseScroll（dom2）
ev.detail（滾輪方向）
上：負
下:正
怎麼取消事件的默認行爲
dom0：return false
dom2：ev.preventDefault()
視口尺寸的獲取
滾動條滾動的距離css

       var testNode=document.querySelector("#test");
        
        if(testNode.addEventListener){
            
            testNode.addEventListener("DOMMouseScroll",function(ev){
                
                var ev=ev||event;
                
                
                console.log(ev.detail);
            })
        }

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #test{
                width: 200px;
                height: 200px;
                background: pink;
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;
            }
            
        </style>
    </head>
    <body>
        <div id="test"></div>
    </body>
    <script type="text/javascript">
        
        var testNode=document.querySelector("#test");
        
        
        
        alert(testNode.addEventListener);
        if(testNode.addEventListener){
            
           
            testNode.addEventListener("DOMMouseScroll",function(){
                
                console.log("火狐在滾");
            })
        }
        
        

          testNode.onmousewheel=function(){
              
              console.log("非火狐在滾");
          }
        
        
        
        
    </script>
</html>

代碼1

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #test{
                width: 100%;
                height: 200px;
                background: pink;
            }
            
        </style>
    </head>
    <body ">
        <div id="test"></div>
    </body>
    <script type="text/javascript">
        
        window.onload=function(){
            var testNode = document.querySelector("#test");
            if(testNode.addEventListener){
                testNode.addEventListener("DOMMouseScroll",fn);
            }
            testNode.onmousewheel=fn;
            
            
            function fn(ev){
                ev=ev||event;
                var dir="";
                if(ev.wheelDelta){
                    dir = ev.wheelDelta>0?"up":"down";
                }
                if(ev.detail){
                    dir = ev.detail<0?"up":"down";
                }
                
                
                /*
                 對樣式進行設置(特殊性最高)
                    node.style.height 
                對樣式進行讀取
                    node.style.height (讀不到css樣式表中屬性的)
                    讀取通常經過api來進行讀取
                    testNode.getComputedStyle()
                */
                switch (dir){
                    case "up":
                    testNode.style.height = testNode.offsetHeight -10+"px";
                    //...
                        break;
                    case "down":
                    testNode.style.height = testNode.offsetHeight +10+"px";
                    //....
                        break;
                }
                
                //禁止事件的默認行爲  dom2
                if(ev.preventDefault){
                    ev.preventDefault();
                }
                
                
                //禁止事件的默認行爲  dom0
                return false;
            }
            
        }
        
        
    </script>
</html>

View Code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。