JS進階第三天

獲取視口寬度和高度的兼容性寫法

onload:頁面或圖片加載完成時執行的操作
兼容性寫法一般要寫body的寬（高）度根元素的寬（高）度文檔顯示區的寬度和高度

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        //onload:當頁面可加載完成時執行的事件
        window.onload = function() {
            var bth = document.getElementById("bth");
            console.log(bth)
            var box = document.getElementById("box");
            console.log(box)
            bth.onclick = function() {

                //獲取頁面的寬度以及高度的兼容性寫法
                var getWidth = document.body.clientWidth || document.documentElement.clientWidth || window.innerWidth;
                var getHeight = document.body.clientHeight || document.documentElement.clientHeight || window.innerHeight;
                box.innerHTML = "當前的屏幕寬度" + getWidth + "px  當前的屏幕高度" + getHeight + "px"
            }
        }
    </script>
</head>

<body>
    <button id="bth">點擊顯示寬度和高度</button>
    <div id="box"></div>
</body>

</html>

html事件處理程序

簡單而言就是在html結構中寫入事件不建議這樣做不僅會增加HTML結構量且耦合性較高

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            width: 200px;
            height: 200px;
            background-color: red;
        }
        
        marquee {
            margin-top: 20px;
        }
    </style>
</head>
<pre>
    onmousemove:鼠標移入事件
    onmouseout:鼠標移出事件
</pre>

<body>
    <button onclick="alert('堯子陌 真帥'  )">點擊彈出選項</button>
    <div onmousemove="fn()" onmouseout="fn2()"></div>
    <marquee behavior="" direction="left" height="400px" bgcolor="blue" onmousemove="this.stop()" onmouseout="this.start()">堯子陌</marquee>


</body>
<script>
    function fn() {
        console.log("鼠標移入事件.......")
    }

    function fn2() {
        console.log("鼠標移出事件.......")
    }
</script>

</html>

DMO0級事件處理程序

簡單而言就是以前經常使用的事件處理程序它的名字叫做DMO0K級事件處理程序
如何清移除DMO0事件處理程序元素名.tyope(事件) = null 即可

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <button id="bth">click me</button>
    <button id="bth2">點擊移除bth效果</button>
</body>
<script>
    var bth = document.getElementById("bth");
    var bth2 = document.getElementById("bth2");
    bth.onclick = function() {
        console.log(this) //this是指當前處理事件的元素
    }
    bth2.onclick = function() {
        bth.onclick = null //這一步驟是清除bth的點擊事件；
        console.log(this) //這個this是指當前執行事件的元素bth2
    }
</script>

</html>

DMO2級事件處理程序

添加事件監聽的方法 addEventListener(‘type’,handler,boolean)
```
type 事件類型  不帶on
```
handler 事件函數
boolean 布爾值默認是false 事件冒泡流如果設置爲true 事件捕獲流
addEventListener() 方法用於向指定元素添加事件。
removeEventlistener（）方法用於移除指定元素添加的事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <button id="bth">click me </button>
    <button id="bth2">煎餅果子 來一套</button>
</body>
<script>
    //首先 獲取兩個按鈕的id
    var bth = document.getElementById("bth");
    var bth2 = document.getElementById("bth2");

    //addEventListener :向指定元素添加事件柄句
    bth.addEventListener("click", fn);

    function fn() {
        console.log(this) //普通函數中的this是指windows對象
    }

    //removeEventListener：移除指定元素添加的事件柄句
    bth2.addEventListener("click", function() {
        bth.removeEventListener("click", fn);
        console.log("檢驗bth2的點擊事件")
    })
</script>

</html>

DOM0級事件處理和DOM2級事件處理的區別

DMO0級處理事件如果寫多個同類型事件的情況下後面後覆蓋前面
-DMO2級處理事件如果寫多個同類型事件的情況下會從上往下依次顯示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <button id="bth">堯子陌</button>
</body>
<script>
    //獲取元素的id值
    var bth = document.getElementById("bth");
    bth.onclick = function fn() {
        console.log("添加的第一個DOM0事件處理程序")
    }
    bth.onclick = function fn() {
        console.log("添加的第二個DOM0事件處理程序")
    }
    bth.onclick = function fn() {
            console.log("添加的第三個DOM0事件處理程序")
        }
        //聲明多個DOM0處理事件程序    會以最後一個DMO0事件元素



    bth.addEventListener("click", function() {
        console.log("添加的第一個DMO2事件處理程序")
    })
    bth.addEventListener("click", function() {
        console.log("添加的第二個DMO2事件處理程序")
    })
    bth.addEventListener("click", function() {
        console.log("添加的第三個DMO2事件處理程序")
    })
</script>

</html>

IE事件處理程序

注意IE處理事件程序只能在ie低版本瀏覽器運行
同種類型的ie處理事件程序只能從下到上依次運行

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <button id="bth">click me </button>
    <button id="rmbth">移除效果</button>
</body>
<script>
    //獲取元素的id
    var bth = document.getElementById("bth");
    var rmbth = document.getElementById("rmbth");
    console.log(rmbth)
    console.log(bth);
    /*   bth.attachEvent("onclick", function() {
           console.log("堯子陌001")
       });
       bth.attachEvent("onclick", function() {
           console.log("堯子陌002")
       });
       bth.attachEvent("onclick", function() {
           console.log("堯子陌003")
       });*/


    bth.attachEvent("onclick", fn);

    function fn() {
        console.log("堯子陌")
    }


    rmbth.attachEvent("onclick", function() {
        bth.detachEvent('onclick', fn)

        console.log("檢驗rmBtn點擊事件...")
    })
</script>

</html

瀏覽器事件處理程序兼容性寫法

EventUtil: 封裝好的事件對象
addEvent：添加事件對象
removeEvent:移除事件對象

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <button id="bth">事件</button>
    <button id="rmbth">移除事件處理程序</button>
</body>
<script>
    var bth = document.getElementById("bth");
    var rmbth = document.getElementById("rmbth");

    // DMO 0處理事件程序
    /*   bth.onclick = function() {
           console.log("DMO0事件處理程序")
       }
       rmbth.onclick = function() {
           bth.onclick = null;
           console.log("移除bth的點擊事件")
       }*/


    //DOM2級處理事件程序

    /*bth.addEventListener("click", fn)

    function fn() {
        console.log("添加事件處理程序")
    }

    rmbth.addEventListener("click", function() {
        bth.removeEventListener("click", fn);
        console.log("移除事件完畢")
    })*/

    // IE處理事件程序
    /*  bth.attachEvent("onclick", fn);

      function fn() {
          console.log("堯子陌")
      }
      rmbth.attachEvent("onclick", function() {
          bth.detachEvent("onclick", fn)
      })*/

    // EventUtil: 封裝好的事件對象
    var EventUtil = {
        //添加事件的兼容像代碼
        addEvent: function(element, type, handler) {
            if (element.addEventListener) {
                element.addEventListener(type, handler) //DMO2級處理事件程序
            } else if (element.attachEvent) {
                element.attachEvent("on" + type, handler) //IE處理事件事件程序
            } else {
                element["on" + type] = handler //DMO0級處理事件程序
            };


        },
        //添加事件的兼容性結束


        removeEvent: function(element, type, handler) {
            if (element.removeEventListener) {
                element.removeEventListener(type, handler) //DMO2級處理事件程序
            } else if (element.detachEvent) {
                element.detachEvent("on" + type, handler) //IE級處理事件程序
            } else {
                element["on" + type] = null//DMO 0級處理事件程序
            }
        }

    };

    //添加點擊事件
    EventUtil.addEvent(bth, "click", fn); //添加事件程序

    function fn() {
        console.log("添加時間處理程序")
    }
    rmbth.onclick = function() {
        EventUtil.removeEvent(bth, "click", fn); //移除事件程序


    }
</script>

</html>

this指向問題

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <button id="bth">click me</button>
</body>
<script>
    //首先獲取id爲bth的元素；
    var bth = document.getElementById("bth")
        //普通函數
    function fn() {
        console.log(this) //這裏的this代指windows
    }
    fn();


    //DMO 0級處理事件的程序
    bth.onclick = function() {
        console.log(this) //這裏的this是指執行事件元素的本身
    }


    //DOM 2級處理事件的程序
    bth.addEventListener("click", function() {
        console.log(this) //代替執行元素的本身
    })


    var obj = {
        name: "張三",
        age: "18"
    };
    obj.test = fn;
    obj.test() //此時的this指的是對象本身
</script>

</html>

事件流

簡單而言具有嵌套關係的元素設置同樣的事件後會依次向上冒泡（從最內層到最外層）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #inner {
            width: 100%;
            height: 500px;
            background-color: red;
        }
        
        #inner2 {
            width: 80%;
            height: 400px;
            background-color: blue;
        }
        
        #inner3 {
            width: 60%;
            height: 200px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <div id="inner">
        <div id="inner2">
            <div id="inner3">
                <p>堯子陌</p>
            </div>
        </div>
    </div>
</body>
<script>
    // 獲取元素
    var inner = document.getElementById("inner");
    var inner2 = document.getElementById("inner2");
    var inner3 = document.getElementById("inner3");
    var p = document.querySelectorAll("p")[0];

    inner.onclick = function() {
        alert("inner");


    }

    inner2.onclick = function() {
        alert("inner2");



    }
    inner3.onclick = function() {
        alert("inner3");


    }
    p.onclick = function() {
        alert("p")
    }
</script>

</html>

阻止事件冒泡的兼容性寫法

首先步驟很簡單先用一個變量去接受事件對象再進行事件對象的判斷
ev.stopPropagation() :不兼容iE8及以下寫法
ev.cancelBubble():兼容ie8及以下寫法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #inner {
            width: 100%;
            height: 500px;
            background-color: red;
        }
        
        #inner2 {
            width: 80%;
            height: 400px;
            background-color: blue;
        }
        
        #inner3 {
            width: 60%;
            height: 200px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <div id="inner">
        <div id="inner2">
            <div id="inner3">
                <p>堯子陌</p>
            </div>
        </div>
    </div>
</body>
<script>
    // 獲取元素
    var inner = document.getElementById("inner");
    var inner2 = document.getElementById("inner2");
    var inner3 = document.getElementById("inner3");
    var p = document.querySelectorAll("p")[0];

    inner.onclick = function() {
        alert("inner");


    }

    inner2.onclick = function(e) {
        alert("inner2");
        var ev = e || event;
        console.log(ev);
        if (ev.cancelBubble) {
            ev.cancelBubble = true;
        } else {
            ev.stopPropagation()
        }





    }
    inner3.onclick = function() {
        alert("inner3");


    }
    p.onclick = function() {
        alert("p")
    }
</script>

</html>

DMO阻止事件冒泡的兼容性寫法

同上設置事件對象兼容性寫法再進行判斷


 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #inner {
            width: 100%;
            height: 500px;
            background-color: red;
        }
        
        #inner2 {
            width: 80%;
            height: 400px;
            background-color: blue;
        }
        
        #inner3 {
            width: 60%;
            height: 200px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <div id="inner">
        <div id="inner2">
            <div id="inner3">
                <p>堯子陌</p>
            </div>
        </div>
    </div>
</body>
<script>
    // 獲取元素
    var inner = document.getElementById("inner");
    var inner2 = document.getElementById("inner2");
    var inner3 = document.getElementById("inner3");
    var p = document.querySelectorAll("p")[0];

    inner.addEventListener("click", function() {
        alert("inner彈出......")
    })


    inner2.addEventListener("click", function(e) {
        alert("inner2彈出......");
        //聲明一個事件對象
        var ev = e || event;
        console.log(ev);
        if (ev.stopPropagation) {
            ev.stopPropagation()
        } else {
            ev.cancelBubble = true
        }
    })


    inner3.addEventListener("click", function() {
        alert("inner3彈出......")
    })



    p.addEventListener("click", function() {
        alert("p彈出......")
    })
</script>

</html>

事件捕獲流

事件捕獲流需要帶第三個參數true 設置同種類型的事件時從內到外的執行過程

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #inner {
            width: 100%;
            height: 500px;
            background-color: red;
        }
        
        #inner2 {
            width: 80%;
            height: 400px;
            background-color: blue;
        }
        
        #inner3 {
            width: 60%;
            height: 200px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <div id="inner">
        <div id="inner2">
            <div id="inner3">
                <p>堯子陌</p>
            </div>
        </div>
    </div>
</body>
<script>
    // 獲取元素
    var inner = document.getElementById("inner");
    var inner2 = document.getElementById("inner2");
    var inner3 = document.getElementById("inner3");
    var p = document.querySelectorAll("p")[0];

    inner.addEventListener("click", function() {
        alert("inner彈出......")
    }, true)


    inner2.addEventListener("click", function(e) {
        alert("inner2彈出......");
        //聲明一個事件對象
        var ev = e || event;
        console.log(ev);
        if (ev.stopPropagation) {
            ev.stopPropagation()
        } else {
            ev.cancelBubble = true
        }
    }, true)


    inner3.addEventListener("click", function() {
        alert("inner3彈出......")
    }, true)



    p.addEventListener("click", function() {
        alert("p彈出......")
    }, true)
</script>

</html>

堯子陌

發佈了46 篇原創文章 · 獲贊 0 · 訪問量 1322

私信關注

獲取視口寬度和高度的兼容性寫法

html事件處理程序

DMO0級事件處理程序

DMO2級事件處理程序

DOM0級事件處理和DOM2級事件處理的區別

IE事件處理程序

瀏覽器事件處理程序兼容性寫法

this指向問題

事件流

阻止事件冒泡的兼容性寫法

DMO阻止事件冒泡的兼容性寫法

事件捕獲流

工作中用到的腳本合集

通過f-string編寫簡潔高效的Python格式化輸出代碼

24-5-18 X

JS進階第一天

css 3D

JQuery第四天

JS進階第四天

ES5第二天

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結