淺析JavaScript中的事件委托機制跟深淺拷貝
今天聊下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>
說下其中的區(qū)別
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);//第三個參數(shù)是默認值，默認是冒泡，如果設置為true則是捕獲
btn.addEventListener("click", method2, false);
btn.addEventListener("click", method3, false);
//最終會按順序執(zhí)行：method1 -> method2 -> method3
btn.removeEventListener("click", method1, false);//用于移除事件
btn.onclick = method1;
btn.onclick = method2;
btn.onclick = method3;
//最終只會執(zhí)行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里面的文本” 會觸發(fā) 3 次事件，分別 彈出
“title3inner” -> “title3” -> “container”
事件捕獲
至于事件冒泡倒過來即是事件捕獲，即：點擊 “title3里面的文本” 會觸發(fā) 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>
至于優(yōu)勢嘛，便是只需注冊一個點擊事件，然后通過target來判斷點擊的具體元素。而currentTarget指的是注冊事件的元素。
target是你實際中點擊的元素
currentTarget是綁定事件的元素
如果不用事件委托的話，在一個列表上，每條數(shù)據(jù)后，添加一個按鈕，然后給每個按鈕注冊一個事件，每個元素綁定一個事件，那么多的按鈕，肯定會對前端性能有所影響。這時候委托肯定是最好的選擇了，畢竟委托只需注冊一個事件。
思考
理論上，使用事件委托確實是一種優(yōu)化，只需注冊一個事件，然后通過事件冒泡來實現(xiàn)相應的功能。
至于在Vue項目中，到底用不用事件委托呢？這里好像有個爭議。
有人說在Vue中，已經(jīng)幫你做過了，也有人說并沒有，我沒看過源碼，咱也不知道。
總之，我是這么做的，每個按鈕都綁定一個事件，然后阻止冒泡。實際中，我個人不太會考慮事件委托，感覺不是太必要的，畢竟事件并沒有那么多。
二、深淺拷貝
至于深淺拷貝這塊的知識，我便長話短說了，一陣見血，見血封喉！
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 為什么呢？ 這便是淺拷貝，數(shù)組類型是引用類型，arr跟brr變量只是保存的引用地址，他們共同指向[1,2,3,4,5]這個數(shù)組 console.log(arr === brr);//true
實際中，如果要實現(xiàn)深拷貝，怎么做呢？
方法主要是一個通過遞歸來賦值，還有一個通過JSON.stringify與JSON.parse這兩個方法來實現(xiàn)。
在這里使用第二種方法，畢竟最是簡單，簡單、暴力，也往往是最有效的解決辦法。
let arr = [1, 2, 3, 4, 5]; let brr = JSON.parse(JSON.stringify(arr)); arr[1] = 8; console.log(brr[1]);//2，這便實現(xiàn)了所謂的深拷貝
三、總結
正如面試官的所說，雖然以上的知識在實際工作中并不一定會用到，但你還是要知道的！還是要知道?。∵€是要知道的?。。?/p>
到此這篇關于淺析JavaScript中的事件委托機制跟深淺拷貝的文章就介紹到這了,更多相關js事件委托深淺拷貝內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
js中的eventType事件想必大家都不陌生吧，下面為大家詳細介紹下一般的事情及瀏覽器支持性，感興趣的朋友可以參考下2013-11-11
這篇文章主要介紹了JavaScript下拉菜單實例代碼,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-03-03
本文給大家分享的是一款javascript制作的很漂亮的js滑動導航菜單，鼠標經(jīng)過立即快速滑動切換顯示。有需要的小火把可以參考下。2015-05-05
淺談Javascript中Object與Function對象
JavaScript的面向對象是基于原形的，所有對象都有一條屬于自己的原型鏈。Object與Function可能很多看Object instanceof Function ， Function instanceof Object都為true而迷惑，所以首先看下對象的實例2015-09-09
這篇文章主要介紹了JS ES6異步解決方案，對異步感興趣的同學，可以參考下2021-04-04
這篇文章主要介紹了CommonJS的模塊加載，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
Stop SQL Server...2007-06-06
這篇文章主要介紹了純js+html制作手風琴和純css+html制作手風琴兩種效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-04-04
JavaScript創(chuàng)建命名空間(namespace)的最簡實現(xiàn)
JavaScript創(chuàng)建命名空間(namespace)通過自定義函數(shù)進行類型判斷、數(shù)組遍歷、函數(shù)執(zhí)行等相關操作來實現(xiàn)命名空間的功能,需要的朋友可以參考一下2007-12-12
這篇文章主要介紹了js實現(xiàn)DOM走馬燈特效的方法,以實例形式較為詳細的分析了走馬燈效果的實現(xiàn)原理與具體步驟,具有一定參考借鑒價值,需要的朋友可以參考下2015-01-01