JavaScript基礎視頻教程總結（111-120章）

時間 2019-12-14
原文原文鏈接
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>111-120章總結</title>
</head>
<body>
    
<pre> 111. 事件對象
- 當事件的響應函數被觸發時，瀏覽器每次都會將一個事件對象做爲實參傳遞進響應函數,
在事件對象中封裝了當前事件相關的一切信息，好比：鼠標的座標  鍵盤哪一個按鍵被按下  鼠標滾輪滾動的方向。。。
</pre>
<style type="text/css">
#areaDiv {
    border: 1px solid black;
    width: 300px;
    height: 50px;
    margin-bottom: 10px;
}
#showMsg {
    border: 1px solid black;
    width: 300px;
    height: 20px;
}
</style>
<div id="areaDiv"></div>
<div id="showMsg"></div>
<script type="text/javascript">
    console.log("第111");
    //當鼠標在areaDiv中移動時，在showMsg中來顯示鼠標的座標 
    var areaDiv = document.getElementById("areaDiv")
    var showMsg = document.getElementById("showMsg")
    areaDiv.onmousemove = function(event){
        event = event || window.event
        var x = event.clientX
        var y = event.clientY
        var result = "X coords: " + x + ", Y coords: " + y
        showMsg.innerHTML = result
    }
</script>

<pre> 112. div跟隨鼠標移動
clientX和clientY
用於獲取鼠標在當前的可見窗口的座標
div的偏移量，是相對於整個頁面的
pageX和pageY能夠獲取鼠標相對於當前頁面的座標
可是這個兩個屬性在IE8中不支持，因此若是須要兼容IE8，則不要使用
</pre>
<style type="text/css">
#box1{
    /*開啓box1的絕對定位*/
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: red;
}
#box2{
    width: 100px;
    height: 100px;
    background-color: green;
}
</style>
<div id="yibox" style="width: 2000px;height: 200px;position: relative;">
    <div id="box1"></div>
    <div id="box2"></div>
</div>
<script type="text/javascript">
    console.log("第112");
    var yibox = document.getElementById("yibox")
    var box1 = document.getElementById("box1")
    var box2 = document.getElementById("box2")
    var boxWidth = box1.clientWidth / 2
    var boxHeight = box1.clientHeight / 2
    var yiboxHeight = yibox.offsetTop
    yibox.onmousemove = function(event){
        event = event || window.event
        var left = event.clientX
        var top = event.clientY
        // 獲取滾動條滾動的距離
        // chrome認爲瀏覽器的滾動條是body的，能夠經過body.scrollTop來獲取
        // 火狐等瀏覽器認爲瀏覽器的滾動條是html的，
        var st = document.body.scrollTop || document.documentElement.scrollTop;
        var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
        // 鼠標光標位置在正中間
        //box1.style.left = left + sl - boxWidth + "px"
        //box1.style.top = top + st - boxHeight - yiboxHeight + "px"
        box1.style.left = left + sl + "px"
        box1.style.top = top + st - yiboxHeight + "px"
        event.cancelBubble = true;
    }
    box2.onmousemove = function(event){
        event = event || window.event;
        event.cancelBubble = true;
    };
</script>

<pre> 113. 事件的冒泡
事件的冒泡（Bubble）
- 所謂的冒泡指的就是事件的向上傳導，當後代元素上的事件被觸發時，其祖先元素的相同事件也會被觸發
- 在開發中大部分狀況冒泡都是有用的,若是不但願發生事件冒泡能夠經過事件對象來取消冒泡
</pre>
<style type="text/css">
#mbox1{
    width: 200px;
    height: 200px;
    background-color: yellowgreen;
}
#ms1{
    background-color: yellow;
}
</style>
<div id="mbox1">我是box1
    <span id="ms1">我是span</span>
</div>
<script type="text/javascript">
    console.log("第113");
    var mbox1 = document.getElementById("mbox1")
    var ms1 = document.getElementById("ms1")
    // 爲ms1綁定一個單擊響應函數
    ms1.onclick = function(event){
        event = event || window.event
        alert("我是span的單擊響應函數")
        //能夠將事件對象的cancelBubble設置爲true，便可取消冒泡 
        event.cancelBubble = true
    }
    // 爲mbox1綁定一個單擊響應函數
    mbox1.onclick = function(event){
        event = event || window.event
        alert("我是div的單擊響應函數")
        event.cancelBubble = true
    }
    //爲body綁定一個單擊響應函數
    /*document.body.onclick = function(){
        alert("我是body的單擊響應函數");
    };*/
</script>

<pre> 114. 事件的委託
- 指將事件統一綁定給元素的共同的祖先元素，這樣當後代元素上的事件觸發時，會一直冒泡到祖先元素從而經過祖先元素的響應函數來處理事件。
- 事件委派是利用了冒泡，經過委派能夠減小事件綁定的次數，提升程序的性能
</pre>
<button id="btn01">添加超連接</button>
<ul id="u1" style="background-color: #bfa;">
    <li><p>我是p元素</p></li>
    <li><a href="javascript:;" class="link">超連接一</a></li>
    <li><a href="javascript:;" class="link">超連接二</a></li>
    <li><a href="javascript:;" class="link">超連接三</a></li>
</ul>
<script type="text/javascript">
    console.log("第114");
    var btn01 = document.getElementById("btn01")
    var u1 = document.getElementById("u1")
    var n=1
    btn01.onclick = function(event){
        event = event || window.event
        var newli = document.createElement("li")
        newli.innerHTML = "<a href='javascript:;' class='link'>新建的超連接" + n + "</a>"
        u1.appendChild(newli)
        n++
        event.cancelBubble = true
    }
    /*
     * 爲每個超連接都綁定一個單擊響應函數
     * 這裏咱們爲每個超連接都綁定了一個單擊響應函數，這種操做比較麻煩，
     * 並且這些操做只能爲已有的超連接設置事件，而新添加的超連接必須從新綁定
     */
    var allA = document.getElementsByTagName("a")
    /*for( var i=0,l=allA.length; i<l; i++){
        allA[i].onclick = function(){
            alert(this.innerHTML)
        }
    }*/
    // 咱們但願，只綁定一次事件，便可應用到多個的元素上，即便元素是後添加的
    // 咱們能夠嘗試將其綁定給元素的共同的祖先元素
    u1.onclick = function(event){
        event = event || window.event
        // event中的target表示的觸發事件的對象
        //alert(event.target)
        //若是觸發事件的對象是咱們指望的元素，則執行不然不執行
        if(event.target.className == 'link'){
            alert(event.target.innerHTML)
        }
    }
    
</script>

<pre> 115. 事件的綁定
使用 對象.事件 = 函數 的形式綁定響應函數，
它只能同時爲一個元素的一個事件綁定一個響應函數，
不能綁定多個，若是綁定了多個，則後邊會覆蓋掉前邊的。
addEventListener()
- 經過這個方法也能夠爲元素綁定響應函數
- 參數：
1.事件的字符串，不要on
2.回調函數，當事件觸發時該函數會被調用
3.是否在捕獲階段觸發事件，須要一個布爾值，通常都傳false
使用addEventListener()能夠同時爲一個元素的相同事件同時綁定多個響應函數，
這樣當事件被觸發時，響應函數將會按照函數的綁定順序執行
這個方法不支持IE8及如下的瀏覽器。
attachEvent()
- 在IE8中可使用attachEvent()來綁定事件
- 參數：
1.事件的字符串，要on
2.回調函數
- 這個方法也能夠同時爲一個事件綁定多個處理函數，
不一樣的是它是後綁定先執行，執行順序和addEventListener()相反
</pre>
<div class="">
    <button id="bdBtn">綁定按鈕</button>
</div>
<script type="text/javascript">
    console.log("第115");
    var bdBtn = document.getElementById("bdBtn")
    /*bdBtn.onclick = function(){
        alert(1)
    }
    bdBtn.onclick = function(){
        alert(2)
    }*/
    bdBtn.addEventListener("click",function(){
        alert(1)
    },false)
    bdBtn.addEventListener("click",function(){
        alert(2)
    },false)
    /*bdBtn.attachEvent("onclick",function(){
        alert(this)
    })
    bdBtn.attachEvent("onclick",function(){
        alert(this)
    })*/
    
</script>

<pre> 116. 完成bind函數 </pre>
<div class="">
    <button id="bdBtn2">bind按鈕</button>
</div>
<script type="text/javascript">
    console.log("第116");
    //定義一個函數，用來爲指定元素綁定響應函數
    /*
     * addEventListener()中的this，是綁定事件的對象
     * attachEvent()中的this，是window
     *  須要統一兩個方法this
     */
    /*
     * 參數：
     *  obj 要綁定事件的對象
     *  eventStr 事件的字符串(不要on)
     *  callback 回調函數
     */
    function bind(obj,eventStr,callback){
        if( obj.addEventListener ){
            // 大部分瀏覽器兼容的方式
            obj.addEventListener( eventStr,callback,false)
        }else{
            /*
             * this是誰由調用方式決定
             * callback.call(obj)
             */
            obj.attachEvent( "on"+eventStr , function(){
                //在匿名函數中調用回調函數
                callback.call(obj)
            })
            
        }
    }
    var bdBtn2 = document.getElementById("bdBtn2")
    bind(bdBtn2,"click",function(){
        alert(1)
    })
    bind(bdBtn2,"click",function(){
        alert(2)
    })
    bind(bdBtn2,"click",function(){
        alert(this)
    })
</script>

<pre> 117. 事件的傳播
- 關於事件的傳播網景公司和微軟公司有不一樣的理解
- 微軟公司認爲事件應該是由內向外傳播，也就是當事件觸發時，應該先觸發當前元素上的事件，
而後再向當前元素的祖先元素上傳播，也就說事件應該在冒泡階段執行。
- 網景公司認爲事件應該是由外向內傳播的，也就是當前事件觸發時，應該先觸發當前元素的最外層的祖先元素的事件，
而後在向內傳播給後代元素
- W3C綜合了兩個公司的方案，將事件傳播分紅了三個階段
1.捕獲階段
- 在捕獲階段時從最外層的祖先元素，向目標元素進行事件的捕獲，可是默認此時不會觸發事件
2.目標階段
- 事件捕獲到目標元素，捕獲結束開始在目標元素上觸發事件
3.冒泡階段
- 事件從目標元素向他的祖先元素傳遞，依次觸發祖先元素上的事件
- 若是但願在捕獲階段就觸發事件，能夠將addEventListener()的第三個參數設置爲true
通常狀況下咱們不會但願在捕獲階段觸發事件，因此這個參數通常都是false
- IE8及如下的瀏覽器中沒有捕獲階段
</pre>
<style type="text/css">
#cbbox1{
    width: 300px;
    height: 300px;
    background-color: yellowgreen;
}
#cbbox2{
    width: 200px;
    height: 200px;
    background-color: yellow;
}
#cbbox3{
    width: 150px;
    height: 150px;
    background-color: skyblue;
}
</style>
<div id="cbbox1">cbbox1
    <div id="cbbox2">cbbox2
        <div id="cbbox3">cbbox3</div>
    </div>
</div>
<script type="text/javascript">
    console.log("第117");
    var cbbox1 = document.getElementById("cbbox1")
    var cbbox2 = document.getElementById("cbbox2")
    var cbbox3 = document.getElementById("cbbox3")
    function bind(obj,eventStr,callback){
        if( obj.addEventListener ){
            // 大部分瀏覽器兼容的方式
            obj.addEventListener( eventStr,callback,true) // 捕獲階段
        }else{
            /*
             * this是誰由調用方式決定
             * callback.call(obj)
             */
            obj.attachEvent( "on"+eventStr , function(){
                //在匿名函數中調用回調函數
                callback.call(obj)
            })
            
        }
    }
    bind(cbbox1,"click",function(){
        alert("我是cbbox1的響應函數")
    })
    bind(cbbox2,"click",function(){
        alert("我是cbbox2的響應函數")
    })
    bind(cbbox3,"click",function(){
        alert("我是cbbox3的響應函數")
    })
</script>

<pre> 118. 拖拽1
- 拖拽的流程
1.當鼠標在被拖拽元素上按下時，開始拖拽  onmousedown
2.當鼠標移動時被拖拽元素跟隨鼠標移動  onmousemove
3.當鼠標鬆開時，被拖拽元素固定在當前位置  onmouseup
</pre>
<style type="text/css">
#tuozhuai_box {
    position: relative;
    width: 1000px;
    height: 500px;
}
#tzbox1{
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
}
#tzbox2{
    width: 100px;
    height: 100px;
    background-color: yellow;
    position: absolute;
    left: 200px;
    top: 200px;
}
</style>
<div id="tuozhuai_box">
    <div id="tzbox1"></div>
    <div id="tzbox2"></div>
</div>
<script type="text/javascript">
    console.log("第118");
    var tzBox = document.getElementById("tuozhuai_box")
    var tzbox1 = document.getElementById("tzbox1")
    tzbox1.onmousedown = function(event){
        event = event || window.event
        var ol = event.clientX - tzbox1.offsetLeft
        var ot = event.clientY - tzbox1.offsetTop
        tzBox.onmousemove = function(event){
            event = event || window.event
            var left = event.clientX - ol
            var top = event.clientY - ot
            tzbox1.style.left = left + "px"
            tzbox1.style.top = top + "px"
        }
        tzBox.onmouseup = function(){
            tzBox.onmousemove = null
            tzBox.onmouseup = null
        }
    }
</script>

<pre> 119. 拖拽2 </pre>
<style type="text/css">
#tuozhuai_box2 {
    position: relative;
    width: 1000px;
    height: 500px;
}
#tzbox21{
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
}
#tzbox22{
    width: 100px;
    height: 100px;
    background-color: yellow;
    position: absolute;
    left: 200px;
    top: 200px;
}
</style>
<div id="tuozhuai_box2">
    <div id="tzbox21"></div>
    <div id="tzbox22"></div>
</div>
<script type="text/javascript">
    console.log("第119");
    var tzBox2 = document.getElementById("tuozhuai_box2")
    var tzbox21 = document.getElementById("tzbox21")
    tzbox21.onmousedown = function(event){
        //設置tzbox21捕獲全部鼠標按下的事件
        /*
         * setCapture()
         *  - 只有IE支持，可是在火狐中調用時不會報錯，
         *      而若是使用chrome調用，會報錯
         */
        /*if(tzbox21.setCapture){
            tzbox21.setCapture();
        }*/
        tzbox21.setCapture && tzbox21.setCapture();
        
        event = event || window.event
        var ol = event.clientX - tzbox21.offsetLeft
        var ot = event.clientY - tzbox21.offsetTop
        tzBox2.onmousemove = function(event){
            event = event || window.event
            var left = event.clientX - ol
            var top = event.clientY - ot
            tzbox21.style.left = left + "px"
            tzbox21.style.top = top + "px"
        }
        tzBox2.onmouseup = function(){
            tzBox2.onmousemove = null
            tzBox2.onmouseup = null
            tzbox21.releaseCapture && tzbox21.releaseCapture();
        }
        /*
         * 當咱們拖拽一個網頁中的內容時，瀏覽器會默認去搜索引擎中搜索內容，
         *  此時會致使拖拽功能的異常，這個是瀏覽器提供的默認行爲，
         *  若是不但願發生這個行爲，則能夠經過return false來取消默認行爲
         * 可是這招對IE8不起做用
         */
        return false
    }
</script>

<pre> 120. 拖拽3
完成drag函數
</pre>
<script type="text/javascript">
    console.log("第120");
    function drag(obj){
        obj.onmousedown = function(event){
            obj.setCapture && obj.setCapture();
            event = event || window.event
            var ol = event.clientX - obj.offsetLeft
            var ot = event.clientY - obj.offsetTop
            document.onmousemove = function(event){
                event = event || window.event
                var left = event.clientX - ol
                var top = event.clientY - ot
                obj.style.left = left + "px"
                obj.style.top = top + "px"
            }
            document.onmouseup = function(){
                document.onmousemove = null
                document.onmouseup = null
                obj.releaseCapture && obj.releaseCapture();
            }
            return false
        }
    }
    var tzbox22 = document.getElementById("tzbox22")
    drag(tzbox22)
</script>

</body>
</html>