今天聊下JavaScript中的事件委託跟深淺拷貝

一、事件委託

首先呢，介紹一下事件繫結

//方法一：通過onclick
<button onclick="clickEvent()">點選</button>

<script>
function clickEvent(){
      alert("點選事件");
}
</script>

//方法二：通過addEventListener
<button id="btn_button">點選</button>

<script>
var btn = document.getElementById("btn_button");
btn.addEventListener("click", function () {
    alert("點選");
}, false);
</script>
 

說下其中的區別
onclick只能繫結一個事件，而addEventListener可以同時繫結多個事件

function method1() {
    console.log("method1");
}
function method2() {
    console.log("method2");
}
function method3() {
    console.log("method3");
}
var btn = document.getElementById("btn_button");
btn.addEventListener("click", method1, false);//第三個引數是預設值，預設是冒泡，如果設定為true則是捕獲
btn.addEventListener("click", method2, false);
btn.addEventListener("click", method3, false);
//最終會按順序執行：method1 -> method2 -> method3
btn.removeEventListener("click", method1, false);//用於移除事件


btn.onclick = method1;
btn.onclick = method2;
btn.onclick = method3;
//最終只會執行method3
btn.onclick = null;//用於移除事件

 

事件冒泡

<ul id="container" style="display: inline-block;">
    <li id="title1">123456</li>
    <li id="title2">qwert</li>
    <li id="title3">
        <ul>
            <li id="title3inner">title3裡面的文字</li>
        </ul>
    </li>
</ul>

<script>
    var container = document.getElementById("container");
    var title1 = document.getElementById("title1");
    var title2 = document.getElementById("title2");
    var title3 = document.getElementById("title3");
    var title3inner = document.getElementById("title3inner");

    container.onclick = function (e) {
        alert("container");
    }
    title1.onclick = function (e) {
        alert("title1");
    }
    title2.onclick = function (e) {
        alert("title2");
    }
    title3.onclick = function (e) {
        alert("title3");
    }
    title3inner.onclick = function (e) {
        alert("title3inner");
    }
</script>
 

點選 “title3裡面的文字” 會觸發 3 次事件，分別 彈出
“title3inner” -> “title3” -> “container”

事件捕獲

至於事件冒泡倒過來即是事件捕獲，即：點選 “title3裡面的文字” 會觸發 3 次事件，分別 彈出
“container” -> “title3” -> “title3inner”

事件冒泡的昇華

事件委託的使用

<ul id="container" style="display: inline-block;">
    <li id="title1">123456</li>
    <li id="title2">qwert</li>
    <li id="title3">QWE123</li>
</ul>

<script>
var container = document.getElementById("container");
container.onclick = function (e) {
    //console.log(e);
    if (e.target.id = "title1") {
        alert(e.target.innerText);
    }
    else if (e.target.id = "title2") {
        alert(e.target.innerText);
    }
    else if (e.target.id = "title3") {
        alert(e.target.innerText);
    }
}
</script>

至於優勢嘛，便是隻需註冊一個點選事件，然後通過target來判斷點選的具體元素。而currentTarget指的是註冊事件的元素。
target是你實際中點選的元素
currentTarget是繫結事件的元素
如果不用事件委託的話，在一個列表上，每條資料後，新增一個按鈕，然後給每個按鈕註冊一個事件，每個元素繫結一個事件，那麼多的按鈕，肯定會對前端效能有所影響。這時候委託肯定是最好的選擇了，畢竟委託只需註冊一個事件。

思考

理論上，使用事件委託確實是一種優化，只需註冊一個事件，然後通過事件冒泡來實現相應的功能。
至於在Vue專案中，到底用不用事件委託呢？這裡好像有個爭議。
有人說在Vue中，已經幫你做過了，也有人說並沒有，我沒看過原始碼，咱也不知道。

總之，我是這麼做的，每個按鈕都繫結一個事件，然後阻止冒泡。實際中，我個人不太會考慮事件委託，感覺不是太必要的，畢竟事件並沒有那麼多。

二、深淺拷貝

至於深淺拷貝這塊的知識，我便長話短說了，一陣見血，見血封喉！

let a = 3;
let b = a;
a = 4;
console.log(a);//4
console.log(b);//3
console.log(a === b);//這便是深拷貝，a和b完全是不同的變數，各自儲存一個值。

let arr = [1, 2, 3, 4, 5];
let brr = arr;
arr[1] = 8;
console.log(arr[1]);//8
console.log(brr[1]);//8   為什麼呢？ 這便是淺拷貝，陣列型別是引用型別，arr跟brr變數只是儲存的引用地址，他們共同指向[1,2,3,4,5]這個陣列
console.log(arr === brr);//true

實際中，如果要實現深拷貝，怎麼做呢？
方法主要是一個通過遞迴來賦值，還有一個通過JSON.stringify與JSON.parse這兩個方法來實現。
在這裡使用第二種方法，畢竟最是簡單，簡單、暴力，也往往是最有效的解決辦法。

let arr = [1, 2, 3, 4, 5];
let brr = JSON.parse(JSON.stringify(arr));
arr[1] = 8;
console.log(brr[1]);//2，這便實現了所謂的深拷貝

三、總結

正如面試官的所說，雖然以上的知識在實際工作中並不一定會用到，但你還是要知道的！還是要知道！！還是要知道的！！！