JS學習筆記15-JS事件高級應用

一、事件綁定

1.1 爲什麼要使用事件綁定?

在不使用事件綁定的時候,我們無法同時對一個對象處理多個相同的事件
例如:

<body>
    <input type="button" id="btn" value="彈出">
</body>
<script>
    window.onload=function(){
        var btn=document.getElementById('btn');

        btn.onclick=function(){
            alert('a');
        }
        btn.onclick=function(){
            alert('b');
        }
    }
</script>

這個例子只會彈出b,而不會彈出a,因爲頁面會把上一個onclick事件覆蓋了。因此我們可以使用事件綁定解決這個問題。

1.2 addEventListenner() 事件綁定

在這裏插入圖片描述

<script>
    window.onload=function(){
        var btn=document.getElementById('btn');
        
        if(btn.attachEvent){
            //IE6-IE8情況
            btn.attachEvent('onclick',function(){
                alert('a');
            });
            btn.attachEvent('onclick',function(){
                alert('b');
            });
        }else{
            //Chrome、FireFox模式
            //addEventListener(事件名,函數,false)
            btn.addEventListener('click',function(){
                alert('a');
            },false);
            btn.addEventListener('click',function(){
                alert('b');
            },false);
        }
    }
</script>
注意兼容性問題:IE下的事件要加 on
並且IE6-IE8下的彈出順序是反的,會先彈出b,再彈出a

可以發現我們的程序稍微的冗長,我們把它給封裝一下:

<script>
    function myAddEvent(obj,event,fn){
        if(obj.attachEvent){
        	//IE6-IE8
            obj.attachEvent('on'+event,fn);
        }else{
        	//Chrome、火狐
            obj.addEventListener(event,fn,false);
        }
    };
    window.onload=function(){
        var btn=document.getElementById('btn');
        
        myAddEvent(btn,'click',function(){
           alert('a'); 
        });
        myAddEvent(btn,'click',function(){
           alert('b'); 
        });
    }
</script>

看起來還不錯!

1.3 removeaddEventListenner() 解除事件綁定

實例:

<body>
    <input type="button" id="btn" value="彈出">
</body>
<script>
    window.onload=function(){
        var btn = document.getElementById("btn");
 
        var btn = document.getElementById("btn");
        var handler = function () {
            alert(this.value);
        };
        btn.addEventListener("click", handler, false);
        btn.removeEventListener("click", handler, false); //有效! 
    }
</script>

我們點擊過後可以發現,沒有任何東西彈出!說明成功移除!

注意: addEventListener()添加的匿名函數無法移除
實例:

<body>
    <input type="button" id="btn" value="彈出">
</body>
<script>
    window.onload=function(){
        var btn = document.getElementById("btn");
 
        btn.addEventListener("click", function () {
            alert(this.value);
        }, false);
        btn.removeEventListener("click", function () { //無效!
            alert(this.value);
        }, false);
    }
</script>

運行過後,點擊按鈕可以發現,還是會彈出,可以發現是真的不能移出匿名函數!

二、進階拖動DIV

2.1 在父元素的範圍內拖動DIV 附:GIF

<body style="height: 2000px;">
    <div id="div">
        <div id="div1"></div>
    </div>
</body>
<style>
    #div1{
        width: 100px;
        height: 100px;
        background: red;
        position: absolute;
    }
    #div{
        margin: 0 auto;
        width: 1200px;
        height: 600px;
        background: #ccc;
        position: relative;
    }
</style>
<script>
    window.onload=function(){
        var div=document.getElementById('div1');
        var new_div = document.getElementById('div');
        disX=0;
        disY=0;

        div.onmousedown=function(ev){
            var event = ev||event;

            //鼠標到div左邊的距離
            disX=event.clientX-div.offsetLeft;
            //鼠標到div頂部的距離
            disY=event.clientY-div.offsetTop;

            document.onmousemove=function(ev){
                var event = ev||event;
                //判斷是否拖出可視區
                var l = event.clientX-disX;
                var t = event.clientY-disY;
                //不允許超出左邊界
                if(l<0){
                    //解決角落還可以移出的BUG
                    l=0;
                //不允許超出右邊界
                }else if(l>new_div.offsetWidth-div.offsetWidth){
                    l=new_div.offsetWidth-div.offsetWidth;
                //不允許超出上邊界
                }
                if(t<0){
                    t=0;
                //不允許超出下邊界
                }else if(t>new_div.offsetHeight-div.offsetHeight){
                    t=new_div.offsetHeight-div.offsetHeight;
                }

                div.style.left=l+'px'; 
                div.style.top=t+'px'; 

                
            }

            document.onmouseup=function(){
                document.onmousemove=null;
                document.onmouseup=null;
            }
            return false;
        }

        
    }
</script>

效果:
在這裏插入圖片描述

2.2 拖動DIV有虛線框 附:GIF

<body style="height: 2000px;">
    <div id="div">
        <div id="div1"></div>
    </div>
</body>
<style>
    #div1{
        width: 100px;
        height: 100px;
        background: red;
        position: absolute;
    }
    #div{
        margin: 0 auto;
        width: 1200px;
        height: 600px;
        background: #ccc;
        position: relative;
    }
    .box{
        border: 1px dashed black;
        position: absolute;
    }
</style>
<script>
    window.onload=function(){
        var div=document.getElementById('div1');
        var new_div = document.getElementById('div');
        disX=0;
        disY=0;

        div.onmousedown=function(ev){
            var event = ev||event;

            //鼠標到div左邊的距離
            disX=event.clientX-div.offsetLeft;
            //鼠標到div頂部的距離
            disY=event.clientY-div.offsetTop;

            //創建虛線框
            var box=document.createElement('div');
            box.className='box';
            box.style.width=div.offsetWidth-2+'px';
            box.style.height=div.offsetHeight-2+'px';
            box.style.left=div.style.left;
            box.style.top=div.style.top;

            new_div.appendChild(box);

            document.onmousemove=function(ev){
                var event = ev||event;
                //判斷是否拖出可視區
                var l = event.clientX-disX;
                var t = event.clientY-disY;
                //不允許超出左邊界
                if(l<20){
                    //解決角落還可以移出的BUG
                    l=0;
                //不允許超出右邊界
                }else if(l>new_div.offsetWidth-div.offsetWidth-20){
                    l=new_div.offsetWidth-div.offsetWidth;
                //不允許超出上邊界
                }
                if(t<20){
                    t=0;
                //不允許超出下邊界
                }else if(t>new_div.offsetHeight-div.offsetHeight-20){
                    t=new_div.offsetHeight-div.offsetHeight;
                }

                box.style.left=l+'px'; 
                box.style.top=t+'px'; 

                
            }

            document.onmouseup=function(){
                document.onmousemove=null;
                document.onmouseup=null;

                div.style.left=box.style.left;
                div.style.top=box.style.top;
                
                new_div.removeChild(box);
            }
            // return false;
        }

        
    }
</script>

效果:
在這裏插入圖片描述

三、滾動條

3.1 可拖動滾動條 附:GIF

<style>
    #parent{
        margin: 0 auto;
        width: 600px;
        height: 20px;
        background: #Ccc;
        position: relative;
    }
    #div1{
        width: 20px;
        height: 20px;
        background: red;
        position: absolute;
        left: 0px;
        top: 0px;
    }
    #div2{
        width: 0px;
        height: 0px;
        background: green;
    }
</style>
<script>
    window.onload=function(){
        var div=document.getElementById('div1');
        var parent = document.getElementById('parent');
        var div2=document.getElementById('div2');
        disX=0;
        disY=0;

        div.onmousedown=function(ev){
            var event = ev||event;

            //鼠標到div左邊的距離
            disX=event.clientX-div.offsetLeft;

            document.onmousemove=function(ev){
                var event = ev||event;
                //判斷是否拖出可視區
                var l = event.clientX-disX;

                if(l<0){
                    l=0;
                }else if (l>parent.offsetWidth-div.offsetWidth){
                    l=parent.offsetWidth-div.offsetWidth;
                }

                div.style.left=l+'px'; 

            }

            document.onmouseup=function(){
                document.onmousemove=null;
                document.onmouseup=null;
            }
            return false;
        }

        
    }
</script>

效果:
在這裏插入圖片描述

3.2 拖動改變DIV大小 附:GIF

<style>
    #parent{
        margin: 0 auto;
        width: 600px;
        height: 20px;
        background: #Ccc;
        position: relative;
    }
    #div1{
        width: 20px;
        height: 20px;
        background: red;
        position: absolute;
        left: 0px;
        top: 0px;
    }
    #div2{
        width: 0px;
        height: 0px;
        background: green;
    }
</style>
<script>
    window.onload=function(){
        var div=document.getElementById('div1');
        var new_div = document.getElementById('parent');
        var div2=document.getElementById('div2');
        disX=0;
        disY=0;

        div.onmousedown=function(ev){
            var event = ev||event;

            //鼠標到div左邊的距離
            disX=event.clientX-div.offsetLeft;
            //鼠標到div頂部的距離
            disY=event.clientY-div.offsetTop;

            document.onmousemove=function(ev){
                var event = ev||event;
                //判斷是否拖出可視區
                var l = event.clientX-disX;
                var t = event.clientY-disY;
                //不允許超出左邊界
                if(l<0){
                    //解決角落還可以移出的BUG
                    l=0;
                //不允許超出右邊界
                }else if(l>new_div.offsetWidth-div.offsetWidth){
                    l=new_div.offsetWidth-div.offsetWidth;
                //不允許超出上邊界
                }
                if(t<0){
                    t=0;
                //不允許超出下邊界
                }else if(t>new_div.offsetHeight-div.offsetHeight){
                    t=new_div.offsetHeight-div.offsetHeight;
                }

                div.style.left=l+'px'; 
                div.style.top=t+'px'; 
                
                var scale=l/(new_div.offsetWidth-div.offsetWidth);
                document.title=scale;

                div2.style.width=400*scale+'px';
                div2.style.height=400*scale+'px';
            }   

            document.onmouseup=function(){
                document.onmousemove=null;
                document.onmouseup=null;
            }
            return false;
        }

        
    }
</script>

效果:

在這裏插入圖片描述

3.3 拖動改變顯示區域(自定義滾動條) 附:GIF

<body>
    <div id="parent">
        <div id="div1"></div>
    </div>
    <div id="div2">
        <div id="div3">
            Google 編輯 討論99+ 上傳視頻
			谷歌公司(Google Inc.)成立於199894日,由拉里·佩奇和謝爾蓋·布林共同創建,被公認爲全球最大的搜索引擎公司。 [1] 
			谷歌是一家位於美國的跨國科技企業,業務包括互聯網搜索、雲計算、廣告技術等,同時開發並提供大量基於互聯網的產品與服務,其主要利潤來自於AdWords等廣告服務。 [2] 
			1999年下半年,谷歌網站“Google”正式啓用。 [3]  2010323日,宣佈關閉在中國大陸市場搜索服務。2015810日,宣佈對企業架構進行調整,並創辦了一家名爲Alphabet的“傘形公司”(Umbrella Company),成爲Alphabet旗下子公司。2015年,在2015年度“世界品牌500強”排行中重返榜首,蘋果和亞馬遜分別位居第二和第三名。201668日,《2016年BrandZ全球最具價值品牌百強榜》公佈,以2291.98億美元的品牌價值重新超越蘋果成爲百強第一。 [4]  20172月,Brand Finance發佈2017年度全球500強品牌榜單,排名第一。 [5]  20176月,《2017年BrandZ最具價值全球品牌100強》公佈,谷歌公司名列第一位。 [6] 
			20171213日,谷歌正式宣佈谷歌AI中國中心(Google AI China Center)在北京成立。 [7] 
			20181月,騰訊和谷歌宣佈雙方簽署一份覆蓋多項產品和技術的專利交叉授權許可協議。 [8]  2018529日,《2018年BrandZ全球最具價值品牌100強》發佈,谷歌公司名列第一位。1218日,世界品牌實驗室編制的《2018世界品牌500強》揭曉,Google排名第2位。 [9]  2019年度全球最具價值100大品牌榜第二位。 [10]
			1998年,拉里·佩奇和謝爾蓋·布林在美國斯坦福大學的學生宿舍內共同開發了谷歌在線搜索引擎,並迅速傳播給全球的信息搜索者;87日,谷歌公司在美國加利福尼亞州山景城以私有股份公司的型式創立。 [3]  同年,發明Google PageRank專利。 [13] 
			20019月,谷歌的網頁評級機制PageRank被授予了美國專利。專利正式地被頒發給斯坦福大學,拉里·佩奇作爲發明人列於其中。
			20042月,因爲雅虎放棄使用谷歌搜索引擎而決定獨立開發自己的搜索引擎,谷歌的市場份額較前跌落。
			2004819日,谷歌公司在納斯達克上市,成爲公有股份公司。 [3] 
			2005719日,谷歌宣佈在中國設立研發中心。
			谷歌總部
			谷歌總部
			20051220日,谷歌宣佈斥資10億美元收購互聯網服務供應商“美國在線”5%的股權。
			2006215日,谷歌在臺灣地區登記成立分公司“美商科高國際有限公司”,並作爲臺灣服務器的域名運營商。
			2006412日,谷歌公司行政總裁埃裏克·施密特在北京宣佈公司的全球中文名字爲“谷歌”。 [14] 
			200610月,谷歌以16.5億美元收購影音內容分享網站YouTube,這是谷歌公司成立以來最大筆的併購。 [15] 
			20071105日,谷歌宣佈開發基於Linux平臺的開源手機操作系統並命名爲Android。
			200897日,谷歌地圖衛星發射升空,爲谷歌地圖服務提供50釐米分辨率高清照片。 [16] 
			201032333分,谷歌高級副總裁、首席法律官大衛·德拉蒙德公開發表聲明,宣佈谷歌關閉在中國大陸市場搜索服務,並將搜索服務由中國內地轉至香港。 [17] 
			20121212日,谷歌在向中國地區合作伙伴發出的通知中表示,宣佈於今天正式在中國市場關閉購物搜索服務。 [18]  不過此次調整之後,谷歌也表示將停止通過Google Merchant Center幫助中心提供中文電子郵件支持服務。 [18] 
			20125月,谷歌以125億美元收購摩托羅拉移動。
			2012628日,Google I/O開發者大會在美國舊金山開幕,併發布代號爲“果凍豆”的操作系統安卓4.1、谷歌首款自主品牌平板電腦Nexus7、社交流媒體播放器NexusQ以及概念智能眼鏡“谷歌眼鏡”。
			20129月,谷歌中國宣佈停止在中國市場提供音樂搜索服務。此後,在“Google.cn”上提供的服務入口僅包括時惠、翻譯、購物三個。 [18]  8日,谷歌收購網絡安全創業公司VirusTotal,旨在增強針對自身互聯網服務的保護措施。 [19] 
			Google的中文頁面
			Google的中文頁面
			2012102日,谷歌超越微軟,成爲市值全球第二大科技公司,當日,谷歌市值擴大至約2499億美元。
			2012122日,谷歌斥資1700萬美元收購一家名爲BufferBox的電商儲物服務公司,該公司的服務主要解決購物包裹遞送“最後一公里”的問題。 [20] 
			20133月,谷歌進軍電商行業,推動購物快遞服務。同年,谷歌中國臺灣數據中心開始運營,總建造成本約爲3億美元;谷歌中國香港數據中心正在建設中。谷歌表示,從整體能耗來看,該公司的數據中心將比其他競爭對手的數據中心節能50%。Google的數據中心主要爲Facebook、亞馬遜、微軟、雅虎等數十家公司的產品提供服務。 [21] 
			2013611日,谷歌宣佈收購導航軟件公司Waze,成爲谷歌較大的一次收購行爲。 [22]  [23] 
			谷歌洛杉磯辦公室
			谷歌洛杉磯辦公室(7)
			2013615日,谷歌名爲“潛鳥計劃”(Project Loon)項目的30個氣球於15日在新西蘭的南島發射升空。 [24] 
			2013103日,谷歌收購Flutter,該公司的主要業務是手勢識別技術。 [25] 
			20131031日,谷歌正式宣佈推出新版旗艦式手機Nexus 5,此款手機搭載該公司自己的最新操作系統KitKat Android,這款操作系統也是針對全球用戶設計,谷歌旨在通過這一系列措施來制止全球智能手機市場因不同版本軟件引發的碎片化現象。 [26] 
			201416日,谷歌與通用汽車、本田、奧迪、現代和Nvidia聯合成立“開放汽車聯盟”,將谷歌開源系統Android應用於汽車領域。 [27]  25日,谷歌的Gmail服務發生全球大範圍停擺故障,另外Google+和YouTube也出現了訪問困難。谷歌尚未公佈原因。 [28] 
			2014527日,谷歌在華遭遇大規模屏蔽,包括極爲重要的HTTPS搜索服務和谷歌登錄服務,且所有相關的谷歌服務都受到影響。
			201471日,早在2013年白色情人節就已確定的谷歌掃除計劃兌現,GreaderRSS閱讀被關閉。
			2014812日,谷歌宣佈與其他5家公司合作,建設價值3億美元的太平洋海底光纜系統,從而幫助亞洲用戶獲得更快的網速。 [29] 
			20141013日,谷歌進軍日趨熱門的遠程醫療領域。 [30] 
			20141122日,歐洲議會正準備通過一項動議案,要求拆分谷歌,剝離搜索業務。 [31-32]  該議案建議將谷歌的搜索引擎與該公司的其他服務分開,以遏制谷歌在高科技行業統治地位,這項動議案獲得了歐洲議會兩個主要政黨——歐洲人民黨和社會黨的支持。 [32-33] 
			20141212日,谷歌證實將關閉設在俄羅斯的工程部,近百名工程師將被安排到其他國家從事新工作。除工程部外,谷歌在俄羅斯的其他部門將照常運營。 [34]  17日,因西班牙立法機構最近通過的《著作權法》,谷歌退出該國市場 [35]  。
			劇透屏蔽系統示意圖
			劇透屏蔽系統示意圖
			2015127日,谷歌宣佈公司的高速光纖網絡項目將再覆蓋四座城市,包括亞特蘭大、納什維爾、夏洛特和羅利-達勒姆。 [36] 
			201524日,谷歌宣佈剛收購了兒童卡通應用開發商Launchpad Toys,希望藉此拓展兒童移動應用市場 [37]  ,谷歌稱,這是“首款以兒童爲設計初衷的谷歌產品”。 [38]  24日,谷歌正式發佈Android版和iOS版YouTube。
        </div>
    </div>
</body>
<style>
    #parent{
        margin: 0 auto;
        width: 600px;
        height: 20px;
        background: #Ccc;
        position: relative;
    }
    #div1{
        width: 20px;
        height: 20px;
        background: red;
        position: absolute;
        left: 0px;
        top: 0px;
    }
    #div2{
        width: 400px;
        height: 300px;
        border: 1px solid black;
        position: relative;
        overflow: hidden;
    }
    #div3{
        position: absolute;
        left: 0px;
        top: 0px;
    }
</style>
<script>
    window.onload=function(){
        var div=document.getElementById('div1');
        var div2=document.getElementById('div2');
        var div3=document.getElementById('div3');
        var parent = document.getElementById('parent');

        disX=0;

        div.onmousedown=function(ev){
            var event = ev||event;

            //鼠標到div左邊的距離
            disX=event.clientX-div.offsetLeft;
            //鼠標到div頂部的距離
            disY=event.clientY-div.offsetTop;

            document.onmousemove=function(ev){
                var event = ev||event;
                //判斷是否拖出可視區
                var l = event.clientX-disX;
                var t = event.clientY-disY;
                //不允許超出左邊界
                if(l<0){
                    //解決角落還可以移出的BUG
                    l=0;
                //不允許超出右邊界
                }else if(l>parent.offsetWidth-div.offsetWidth){
                    l=parent.offsetWidth-div.offsetWidth;
                //不允許超出上邊界
                }
                if(t<0){
                    t=0;
                //不允許超出下邊界
                }else if(t>parent.offsetHeight-div.offsetHeight){
                    t=parent.offsetHeight-div.offsetHeight;
                }

                div.style.left=l+'px'; 
                div.style.top=t+'px'; 
                
                var scale=l/(parent.offsetWidth-div.offsetWidth);
                document.title=scale;

                div3.style.top=-scale*(div3.offsetHeight-div2.offsetHeight)+'px';
            }   

            document.onmouseup=function(){
                document.onmousemove=null;
                document.onmouseup=null;
            }
            return false;
        }

        
    }
</script>

效果:
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章