今天聊下JavaScript中的事件委托跟深淺拷貝
一、事件委托
首先呢，介紹一下事件綁定
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
//方法一：通過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可以同時綁定多個事件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
[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;//最終只會執行method3btn.onclick = null;//用于移除事件 |
事件冒泡
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<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”
事件冒泡的升華
事件委托的使用
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<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中，已經幫你做過了，也有人說并沒有，我沒看過源碼，咱也不知道。
總之，我是這么做的，每個按鈕都綁定一個事件，然后阻止冒泡。實際中，我個人不太會考慮事件委托，感覺不是太必要的，畢竟事件并沒有那么多。
二、深淺拷貝
至于深淺拷貝這塊的知識，我便長話短說了，一陣見血，見血封喉！
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
let a = 3;let b = a;a = 4;console.log(a);//4console.log(b);//3console.log(a === b);//這便是深拷貝，a和b完全是不同的變量，各自保存一個值。let arr = [1, 2, 3, 4, 5];let brr = arr;arr[1] = 8;console.log(arr[1]);//8console.log(brr[1]);//8 為什么呢？ 這便是淺拷貝，數組類型是引用類型，arr跟brr變量只是保存的引用地址，他們共同指向[1,2,3,4,5]這個數組console.log(arr === brr);//true |
實際中，如果要實現深拷貝，怎么做呢？
方法主要是一個通過遞歸來賦值，還有一個通過JSON.stringify與JSON.parse這兩個方法來實現。
在這里使用第二種方法，畢竟最是簡單，簡單、暴力，也往往是最有效的解決辦法。
|
1
2
3
4
|
let arr = [1, 2, 3, 4, 5];let brr = JSON.parse(JSON.stringify(arr));arr[1] = 8;console.log(brr[1]);//2，這便實現了所謂的深拷貝 |
三、總結
正如面試官的所說，雖然以上的知識在實際工作中并不一定會用到，但你還是要知道的！還是要知道?。∵€是要知道的！！！
到此這篇關于淺析JavaScript中的事件委托機制跟深淺拷貝的文章就介紹到這了,更多相關js事件委托深淺拷貝內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://www.cnblogs.com/ywjbokeyuan/p/14290030.html
