JavaScript
JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlex脚本加解密web2.0XML/RSS网页编辑器相关技巧安全相关网页播放器DartVue.js

浅析JavaScript中的事件委托机制跟深浅拷贝

发布时间：2022-04-16 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了浅析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>

说下其中的区别
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中的事件委托机制跟深浅拷贝的文章就介绍到这了,更多相关js事件委托深浅拷贝内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典！

您可能感兴趣的文章:

脚本宝典总结

以上是脚本宝典为你收集整理的浅析JavaScript中的事件委托机制跟深浅拷贝全部内容，希望文章能够帮你解决浅析JavaScript中的事件委托机制跟深浅拷贝所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：
猜你在找的JavaScript相关文章
其他相关热搜词更多
phpjavapython程序员loadpost-format-gallerydivString参数开发ListcapMapClass工具安装SQL数据库资源this
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新JavaScript教程
热门JavaScript教程