今天聊下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,这便实现了所谓的深拷贝

总结

正如面试官的所说,虽然以上的知识在实际工作中并不一定会用到,但你还是要知道的!还是要知道!!还是要知道的!!!

JavaScript中的事件委托机制跟深浅拷贝的更多相关文章

  1. 【Unity3D技巧】在Unity中使用事件/委托机制(event/delegate)进行GameObject之间的通信 (二) : 引入中间层NotificationCenter

    作者:王选易,出处:http://www.cnblogs.com/neverdie/ 欢迎转载,也请保留这段声明.如果你喜欢这篇文章,请点[推荐].谢谢! 一对多的观察者模式机制有什么缺点? 想要查看 ...

  2. js实例分析JavaScript中的事件委托和事件绑定

    我们在学习JavaScript中,难免都会去网上查一些资料.也许偶尔就会遇到“事件委托”(也有的称我“事件代理”,这里不评论谁是谁非.以下全部称为“事件委托”),尤其是在查JavaScript的事件处 ...

  3. JavaScript中的事件循环机制跟函数柯里化

    一.事件循环机制的理解 test();//按秒输出5个5 function test() { for (var i = 0; i < 5; i++) { setTimeout(() => ...

  4. javascript中的事件委托

    这几天看到一个面试题,大概就是,让你给1000个li都添加一个click事件,应该怎么添加?大多数人第一开始的感觉可能就是,每个li上边都添加一个呗,那要是这样的话,估计面试的时候就会GG了,这里就是 ...

  5. 简单说 JavaScript中的事件委托(下)

    说明 上次我们说了一些,关于 JavaScript中事件委托的 基础知识,这次我们继续来看. 解释 先来一段代码 <!doctype html> <html lang="e ...

  6. JavaScript中的事件委托(转至大佬)

    转至:https://www.cnblogs.com/liugang-vip/p/5616484.html 起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没 ...

  7. JavaScript中的事件冒泡机制

    事件冒泡机制 事件冒泡发生的条件:当为多个嵌套的元素设置了相同的事件处理程序,它们将触发事件冒泡机制.在事件冒泡中,最内部的元素将首先触发其事件,然后是栈内的下一个元素触发该事件,以此类推,直到到达最 ...

  8. Javascript事件模型系列(二)事件的捕获-冒泡机制及事件委托机制

    一.事件的捕获与冒泡 由W3C规定的DOM2标准中,一次事件的完整过程包括三步:捕获→执行目标元素的监听函数→冒泡,在捕获和冒泡阶段,会依次检查途径的每个节点,如果该节点注册了相应的监听函数,则执行监 ...

  9. javascript 中的事件机制

    1.javascript中的事件. 事件流 javascript中的事件是以一种流的形式存在的. 一个事件会也有多个元素同时响应. 有时候这不是我们想要的效果, 我们只是需要某个特定的元素相应我们的绑 ...

随机推荐

  1. IDM(Internet Download Manager)—下载各类安装包(github代码、python包)、软件、视频、文档的神器,居家必备良药

    自从有了IDM (Internet Download Manager),不知迅雷.github加速器.镜像为何物.鸟枪换炮,过上了,"他娘的意大利炮"的幸福生活[CoderBaby ...

  2. 【JAVA基础&Python】静态/非静态代码块

    /* * * static静态代码块: * 调用静态属性的时候 对应类里面的静态代码块就会被直接执行 * 注意: 只会执行一次,只能调用类内静态结构的(方法/属性) * 作用: 初始化类的属性 * * ...

  3. IIS应用程序池配置详解及优化

    参数说明 1.常规 属性名称 属性详解 NET CLR 版本 配置应用程序池,以加载特定版本的 .NET CLR.选定的 CLR版本应与应用程序所使用的相应版本的 .NET Framework 对应. ...

  4. Gopher协议在SSRF漏洞中的深入研究

    如果需要大佬写好的脚本,可以直接去github上面搜 参考文章:https://zhuanlan.zhihu.com/p/112055947 https://www.cnblogs.com/Konmu ...

  5. 简单的堆排序-python

    AA = raw_input().strip().split(' ') A = [] ###############初始化大堆############### def fixUp(A): k = len ...

  6. Android虚拟机Genymotion的安装与使用

    1.首先官网下载genymotion-2.12.2-vbox包,首选第一个带有box,点击安装 2.安装完毕选择自己要用的安卓系统,建议选择安卓4.0以上全部 3.启动打开虚拟机 4.安装外部APP, ...

  7. 面试官让你讲讲Linux内核的竞争与并发,你该如何回答?

    @ 目录 内核中的并发和竞争简介 原子操作 原子操作简介 整型原子操作函数 位原子操作函数 原子操作例程 自旋锁 自旋锁简介 自旋锁操作函数 自旋锁例程 读写自旋锁 读写锁例程 顺序锁 顺序锁操作函数 ...

  8. MacOS下解决宿主机和docker容器之间网络互通

    docker在Mac下使用非常方便,官网提供了desktop版本的可视化软件,甚至还十分贴心地集成好了k8s套件.然而如果想同时部署和使用多个容器,每个容器不使用127.0.0.1地址,而是各自有ip ...

  9. MongoDb二

    获取集合的时候,可以传入bean的class文件.来实现数据的绑定.在这之前.需要自定义一个Codec类.进行数据的转换. MongoClient client=new MongoClient(new ...

  10. 发起一个开源项目:基于 .NET 的博客引擎 fluss

    今天我们发起一个开源项目,它的名字叫 fluss,fluss 是 river 的德语. 百川归海,每一个博客就如一条河流,输入的是文字,流出的是知识,汇入的是知识的汪洋大海. 川流不息,fluss 是 ...