JavaScript核心-兼容性問題等（二）-有解無憂

5.8 三種動態創建元素區別
document.write()
element.innerHTML
document.createElement()

document.write 是直接將內容寫入頁面的內容流，但是檔案流執行完畢，則它會導致頁面全部重繪
innerHTML 是將內容寫入某個 DOM 節點，不會導致頁面全部重繪
innerHTML 創建多個元素效率更高（不要拼接字串，采取陣列形式拼接），結構稍微復雜
createElement() 創建多個元素效率稍低一點點，但是結構更清晰
總結：不同瀏覽器下，innerHTML 效率要比 creatElement 高

6. DOM 重點核心

在這里插入圖片描述
關于dom操作，我們主要針對于元素的操作，主要有創建、增、刪、改、查、屬性操作、事件操作，
6.1 創建

6.7 事件操作
給元素注冊事件，采取事件源.事件型別 = 事件處理程式

1.1 注冊事件概述

給元素添加事件，稱為注冊事件或者系結事件，
注冊事件有兩種方式：傳統方式和方法監聽注冊方式

在這里插入圖片描述

方法監聽注冊方式:

w3c 標準推薦方式
addEventListener() 它是一個方法
IE9 之前的 IE 不支持此方法，可使用 attachEvent() 代替
特點：同一個元素同一個事件可以注冊多個監聽器
按注冊順序依次執行

1.2 addEventListener 事件監聽方式

eventTarget.addEventListener(type, listener[, useCapture])
在這里插入圖片描述

1.3 attachEvent 事件監聽方式

在這里插入圖片描述

1.4 注冊事件兼容性解決方案

 function addEventListener(element, eventName, fn) {
      // 判斷當前瀏覽器是否支持 addEventListener 方法
      if (element.addEventListener) {
        element.addEventListener(eventName, fn);  // 第三個引數 默認是false
      } else if (element.attachEvent) {
        element.attachEvent('on' + eventName, fn);
      } else {
        // 相當于 element.onclick = fn;
        element['on' + eventName] = fn;
 }

兼容性處理的原則：首先照顧大多數瀏覽器，再處理特殊瀏覽器

2.1 洗掉事件的方式

在這里插入圖片描述
2.2 洗掉事件兼容性解決方案

 function removeEventListener(element, eventName, fn) {
      // 判斷當前瀏覽器是否支持 removeEventListener 方法
      if (element.removeEventListener) {
        element.removeEventListener(eventName, fn);  // 第三個引數 默認是false
      } else if (element.detachEvent) {
        element.detachEvent('on' + eventName, fn);
      } else {
        element['on' + eventName] = 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>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        var divs = document.querySelectorAll('div');
        divs[0].onclick = function() {
                alert(11);
                // 1. 傳統方式洗掉事件
                divs[0].onclick = null;
            }
            // 2. removeEventListener 洗掉事件
        divs[1].addEventListener('click', fn) // 里面的fn 不需要呼叫加小括號

        function fn() {
            alert(22);
            divs[1].removeEventListener('click', fn);
        }
        // 3. detachEvent
        divs[2].attachEvent('onclick', fn1);

        function fn1() {
            alert(33);
            divs[2].detachEvent('onclick', fn1);
        }
    </script>
</body>

</html>

3. DOM 事件流

事件流描述的是從頁面中接收事件的順序，
事件發生時會在元素節點之間按照特定的順序傳播，這個傳播程序即 DOM 事件流，
比如我們給一個div 注冊了點擊事件：
DOM 事件流分為3個階段：

捕獲階段
當前目標階段
冒泡階段
事件冒泡： IE 最早提出，事件開始時由最具體的元素接收，然后逐級向上傳播到到 DOM 最頂層節點的程序，
事件捕獲：網景最早提出，由 DOM 最頂層節點開始，然后逐級向下傳播到到最具體的元素接收的程序，

我們向水里面扔一塊石頭，首先它會有一個下降的程序，這個程序就可以理解為從最頂層向事件發生的最具體元素（目標點）的捕獲程序；之后會產生泡泡，會在最低點（最具體元素）之后漂浮到水面上，這個程序相當于事件冒泡，

事件發生時會在元素節點之間按照特定的順序傳播，這個傳播程序即 DOM 事件流，
注意
JS 代碼中只能執行捕獲或者冒泡其中的一個階段，
onclick 和 attachEvent 只能得到冒泡階段，
addEventListener(type, listener[, useCapture])第三個引數如果是 true，表示在事件捕獲階段呼叫事件處理程式；如果是 false（不寫默認就是false），表示在事件冒泡階段呼叫事件處理程式，
實際開發中我們很少使用事件捕獲，我們更關注事件冒泡，
有些事件是沒有冒泡的，比如 onblur、onfocus、onmouseenter、onmouseleave
事件冒泡有時候會帶來麻煩，有時候又會幫助很巧妙的做某些事件，我們后面講解，


<!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>
        .father {
            overflow: hidden;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            background-color: pink;
            text-align: center;
        }
        
        .son {
            width: 200px;
            height: 200px;
            margin: 50px;
            background-color: purple;
            line-height: 200px;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
        // dom 事件流 三個階段
        // 1. JS 代碼中只能執行捕獲或者冒泡其中的一個階段，
        // 2. onclick 和 attachEvent（ie） 只能得到冒泡階段，
        // 3. 捕獲階段 如果addEventListener 第三個引數是 true 那么則處于捕獲階段  document -> html -> body -> father -> son
        // var son = document.querySelector('.son');
        // son.addEventListener('click', function() {
        //     alert('son');
        // }, true);
        // var father = document.querySelector('.father');
        // father.addEventListener('click', function() {
        //     alert('father');
        // }, true);
        // 4. 冒泡階段 如果addEventListener 第三個引數是 false 或者 省略 那么則處于冒泡階段  son -> father ->body -> html -> document
        var son = document.querySelector('.son');
        son.addEventListener('click', function() {
            alert('son');
        }, false);
        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, false);
        document.addEventListener('click', function() {
            alert('document');
        })
    </script>
</body>

</html>

4.1 什么是事件物件

eventTarget.onclick = function(event) {}
eventTarget.addEventListener(‘click’, function(event) {}）
// 這個 event 就是事件物件，我們還喜歡的寫成 e 或者 evt
官方解釋：event 物件代表事件的狀態，比如鍵盤按鍵的狀態、滑鼠的位置、滑鼠按鈕的狀態，
簡單理解：事件發生后，跟事件相關的一系列資訊資料的集合都放到這個物件里面，這個物件就是事件物件 event，它有很多屬性和方法，
比如：

誰系結了這個事件，
滑鼠觸發事件的話，會得到滑鼠的相關資訊，如滑鼠位置，
鍵盤觸發事件的話，會得到鍵盤的相關資訊，如按了哪個鍵，


<!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>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div>123</div>
    <script>
        // 事件物件
        var div = document.querySelector('div');
        div.onclick = function(e) {
                // console.log(e);
                // console.log(window.event);
                // e = e || window.event;
                console.log(e);


            }
            // div.addEventListener('click', function(e) {
            //         console.log(e);

        //     })
        // 1. event 就是一個事件物件 寫到我們偵聽函式的 小括號里面 當形參來看
        // 2. 事件物件只有有了事件才會存在，它是系統給我們自動創建的，不需要我們傳遞引數
        // 3. 事件物件 是 我們事件的一系列相關資料的集合 跟事件相關的 比如滑鼠點擊里面就包含了滑鼠的相關資訊，滑鼠坐標啊，如果是鍵盤事件里面就包含的鍵盤事件的資訊 比如 判斷用戶按下了那個鍵
        // 4. 這個事件物件我們可以自己命名 比如 event 、 evt、 e
        // 5. 事件物件也有兼容性問題 ie678 通過 window.event 兼容性的寫法  e = e || window.event;
    </script>
</body>

</html>

4.2 事件物件的使用語法

在這里插入圖片描述

4.3 事件物件的兼容性方案

事件物件本身的獲取存在兼容問題：

標準瀏覽器中是瀏覽器給方法傳遞的引數，只需要定義形參 e 就可以獲取到，
在 IE6~8 中，瀏覽器不會給方法傳遞引數，如果需要的話，需要到 window.event 中獲取查找，
解決:
e = e || window.event;

4.4 事件物件的常見屬性和方法

e.target 和 this 的區別：
this 是事件系結的元素，這個函式的呼叫者（系結這個事件的元素）
e.target 是事件觸發的元素，
在這里插入圖片描述


<!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>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div>123</div>
    <ul>
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
    </ul>
    <script>
        // 常見事件物件的屬性和方法
        // 1. e.target 回傳的是觸發事件的物件（元素）  this 回傳的是系結事件的物件（元素）
        // 區別 ： e.target 點擊了那個元素，就回傳那個元素 this 那個元素系結了這個點擊事件，那么就回傳誰
        var div = document.querySelector('div');
        div.addEventListener('click', function(e) {
            console.log(e.target);
            console.log(this);

        })
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
                // 我們給ul 系結了事件  那么this 就指向ul  
                console.log(this);
                console.log(e.currentTarget);

                // e.target 指向我們點擊的那個物件 誰觸發了這個事件 我們點擊的是li e.target 指向的就是li
                console.log(e.target);

            })
            // 了解兼容性
            // div.onclick = function(e) {
            //     e = e || window.event;
            //     var target = e.target || e.srcElement;
            //     console.log(target);

        // }
        // 2. 了解 跟 this 有個非常相似的屬性 currentTarget  ie678不認識
    </script>
</body>

</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>

    </style>
</head>

<body>
    <div>123</div>
    <a href="http://www.baidu.com">百度</a>
    <form action="http://www.baidu.com">
        <input type="submit" value="提交" name="sub">
    </form>
    <script>
        // 常見事件物件的屬性和方法
        // 1. 回傳事件型別
        var div = document.querySelector('div');
        div.addEventListener('click', fn);
        div.addEventListener('mouseover', fn);
        div.addEventListener('mouseout', fn);

        function fn(e) {
            console.log(e.type);

        }
        // 2. 阻止默認行為（事件） 讓鏈接不跳轉 或者讓提交按鈕不提交
        var a = document.querySelector('a');
        a.addEventListener('click', function(e) {
                e.preventDefault(); //  dom 標準寫法
            })
            // 3. 傳統的注冊方式
        a.onclick = function(e) {
            // 普通瀏覽器 e.preventDefault();  方法
            // e.preventDefault();
            // 低版本瀏覽器 ie678  returnValue  屬性
            // e.returnValue;
            // 我們可以利用return false 也能阻止默認行為 沒有兼容性問題 特點： return 后面的代碼不執行了， 而且只限于傳統的注冊方式
            return false;
            alert(11);
        }
    </script>
</body>

</html>

5.1 阻止事件冒泡的兩種方式（面試經常問）

事件冒泡：開始時由最具體的元素接收，然后逐級向上傳播到到 DOM 最頂層節點，
事件冒泡本身的特性，會帶來的壞處，也會帶來的好處，需要我們靈活掌握，
阻止事件冒泡
在這里插入圖片描述


<!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>
        .father {
            overflow: hidden;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            background-color: pink;
            text-align: center;
        }
        
        .son {
            width: 200px;
            height: 200px;
            margin: 50px;
            background-color: purple;
            line-height: 200px;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son">son兒子</div>
    </div>
    <script>
        // 常見事件物件的屬性和方法
        // 阻止冒泡  dom 推薦的標準 stopPropagation() 
        var son = document.querySelector('.son');
        son.addEventListener('click', function(e) {
            alert('son');
            e.stopPropagation(); // stop 停止  Propagation 傳播
            e.cancelBubble = true; // 非標準 cancel 取消 bubble 泡泡
        }, false);

        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, false);
        document.addEventListener('click', function() {
            alert('document');
        })
    </script>
</body>

</html>

5.2 阻止事件冒泡的兼容性解決方案

if(e && e.stopPropagation){
e.stopPropagation();
}else{
window.event.cancelBubble = true;
}

6. 事件委托（代理、委派）（面試經常問）

在這里插入圖片描述
事件委托
事件委托也稱為事件代理，在 jQuery 里面稱為事件委派，
事件委托的原理
不是每個子節點單獨設定事件監聽器，而是事件監聽器設定在其父節點上，然后利用冒泡原理影響設定每個子節點，
以上案例：給 ul 注冊點擊事件，然后利用事件物件的 target 來找到當前點擊的 li，因為點擊 li，事件會冒泡到 ul 上， ul 有注冊事件，就會觸發事件監聽器，
事件委托的作用
我們只操作了一次 DOM ，提高了程式的性能，

<!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>
    <ul>
        <li>知否知否，點我應有彈框在手！</li>
        <li>知否知否，點我應有彈框在手！</li>
        <li>知否知否，點我應有彈框在手！</li>
        <li>知否知否，點我應有彈框在手！</li>
        <li>知否知否，點我應有彈框在手！</li>
    </ul>
    <script>
        // 事件委托的核心原理：給父節點添加偵聽器， 利用事件冒泡影響每一個子節點
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
            // alert('知否知否，點我應有彈框在手！');
            // e.target 這個可以得到我們點擊的物件
            e.target.style.backgroundColor = 'pink';


        })
    </script>
</body>

</html>

7.1 常用的滑鼠事件

1.禁止滑鼠右鍵選單
contextmenu主要控制應該何時顯示背景關系選單，主要用于程式員取消默認的背景關系選單

document.addEventListener(‘contextmenu’, function(e) {
e.preventDefault();
})

2.禁止滑鼠選中（selectstart 開始選中）
document.addEventListener(‘selectstart’, function(e) {
e.preventDefault();
})

7.2 滑鼠事件物件

event物件代表事件的狀態，跟事件相關的一系列資訊的集合，現階段我們主要是用滑鼠事件物件 MouseEvent 和鍵盤事件物件 KeyboardEvent，
在這里插入圖片描述


<!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>
        body {
            height: 3000px;
        }
    </style>
</head>

<body>
    <script>
        // 滑鼠事件物件 MouseEvent
        document.addEventListener('click', function(e) {
            // 1. client 滑鼠在可視區的x和y坐標
            console.log(e.clientX);
            console.log(e.clientY);
            console.log('---------------------');

            // 2. page 滑鼠在頁面檔案的x和y坐標
            console.log(e.pageX);
            console.log(e.pageY);
            console.log('---------------------');

            // 3. screen 滑鼠在電腦螢屏的x和y坐標
            console.log(e.screenX);
            console.log(e.screenY);

        })
    </script>
</body>

</html>

案例：跟隨滑鼠的天使

這個天使圖片一直跟隨滑鼠移動

滑鼠不斷的移動，使用滑鼠移動事件： mousemove
在頁面中移動，給document注冊事件
圖片要移動距離，而且不占位置，我們使用絕對定位即可
核心原理：每次滑鼠移動，我們都會獲得最新的滑鼠坐標，把這個x和y坐標做為圖片的top和left 值就可以移動圖片

在這里插入圖片描述

<!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>
        img {
            position: absolute;
            top: 2px;
        }
    </style>
</head>

<body>
    <img src="images/angel.gif" alt="">
    <script>
        var pic = document.querySelector('img');
        document.addEventListener('mousemove', function(e) {
            // 1. mousemove只要我們滑鼠移動1px 就會觸發這個事件
            // console.log(1);
            // 2.核心原理： 每次滑鼠移動，我們都會獲得最新的滑鼠坐標， 把這個x和y坐標做為圖片的top和left 值就可以移動圖片
            var x = e.pageX;
            var y = e.pageY;
            console.log('x坐標是' + x, 'y坐標是' + y);
            //3 . 千萬不要忘記給left 和top 添加px 單位
            pic.style.left = x - 50 + 'px';
            pic.style.top = y - 40 + 'px';


        });
    </script>
</body>

</html>

3.3 頁面被卷去的頭部兼容性解決方案(scroll滾動)

需要注意的是，頁面被卷去的頭部，有兼容性問題，因此被卷去的頭部通常有如下幾種寫法：

宣告了 DTD，使用 document.documentElement.scrollTop
未宣告 DTD，使用 document.body.scrollTop
新方法 window.pageYOffset 和 window.pageXOffset，IE9 開始支持

 function getScroll() {
    return {
      left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,
      top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
    };
 } 
使用的時候  getScroll().left

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/293997.html

標籤：其他

上一篇：授人以魚不如授人以漁——快抓緊學起來吧

下一篇：回應式個人簡歷網頁源代碼

JavaScript核心-兼容性問題等（二）

6. DOM 重點核心

1.1 注冊事件概述

方法監聽注冊方式:

1.2 addEventListener 事件監聽方式

1.3 attachEvent 事件監聽方式

1.4 注冊事件兼容性解決方案

2.1 洗掉事件的方式

3. DOM 事件流

4.1 什么是事件物件

4.2 事件物件的使用語法

4.3 事件物件的兼容性方案

4.4 事件物件的常見屬性和方法

5.1 阻止事件冒泡的兩種方式（面試經常問）

5.2 阻止事件冒泡的兼容性解決方案

6. 事件委托（代理、委派）（面試經常問）

7.1 常用的滑鼠事件

7.2 滑鼠事件物件

案例： 跟隨滑鼠的天使

3.3 頁面被卷去的頭部兼容性解決方案(scroll滾動)

案例：跟隨滑鼠的天使