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


Posted in Javascript onJanuary 20, 2021

今天聊下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中,已经帮你做过了,也有人说并没有,我没看过源码,咱也不知道。

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

总之,我是这么做的,每个按钮都绑定一个事件,然后阻止冒泡。实际中,我个人不太会考虑事件委托,感觉不是太必要的,毕竟事件并没有那么多。

二、深浅拷贝

至于深浅拷贝这块的知识,我便长话短说了,一阵见血,见血封喉!

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

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 相关文章推荐
Jquery为单选框checkbox绑定单击click事件
Dec 18 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
Apr 18 Javascript
Javascript中arguments对象详解
Oct 22 Javascript
js获取时间精确到秒(年月日)
Mar 16 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
Apr 03 Javascript
js实现悬浮窗效果(支持拖动)
Mar 09 Javascript
Vue监听数组变化源码解析
Mar 09 Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
Mar 08 Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
Apr 11 Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
May 10 Javascript
js实现计算器功能
Aug 10 Javascript
JavaScript中的函数式编程详解
Aug 22 Javascript
详解vue之自行实现派发与广播(dispatch与broadcast)
Jan 19 #Vue.js
js实现电灯开关效果
Jan 19 #Javascript
jquery实现穿梭框功能
Jan 19 #jQuery
jQuery实现穿梭框效果
Jan 19 #jQuery
element el-table表格的二次封装实现(附表格高度自适应)
Jan 19 #Javascript
JS实现纸牌发牌动画
Jan 19 #Javascript
微信小程序canvas实现签名功能
Jan 19 #Javascript
You might like
谈谈PHP语法(5)
2006/10/09 PHP
php 获取远程网页内容的函数
2009/09/08 PHP
php中使用redis队列操作实例代码
2013/02/07 PHP
详解PHP中instanceof关键字及instanceof关键字有什么作用
2015/11/05 PHP
Thinkphp批量更新数据的方法汇总
2016/06/29 PHP
PHP7 echo和print语句实例用法
2019/02/15 PHP
Input 特殊事件onpopertychange和oninput
2009/06/17 Javascript
Dom 是什么的详细说明
2010/10/25 Javascript
js setTimeout 常见问题小结
2013/08/13 Javascript
利用进制转换压缩数字函数分享
2014/01/02 Javascript
jquery计算鼠标和指定元素之间距离的方法
2015/06/26 Javascript
纯js实现动态时间显示
2020/09/07 Javascript
使用react-router4.0实现重定向和404功能的方法
2017/08/28 Javascript
vue购物车插件编写代码
2017/11/27 Javascript
React中常见的动画实现的几种方式
2018/01/10 Javascript
微信、QQ、微博、Safari中使用js唤起App
2018/01/24 Javascript
React中使用UEditor百度富文本的方法
2018/08/22 Javascript
js实现删除li标签一行内容
2019/04/16 Javascript
atom-design(Vue.js移动端组件库)手势组件使用教程
2019/05/16 Javascript
探寻python多线程ctrl+c退出问题解决方案
2014/10/23 Python
Python列表生成器的循环技巧分享
2015/03/06 Python
Python计算三维矢量幅度的方法
2015/06/15 Python
python下如何查询CS反恐精英的服务器信息
2017/01/17 Python
Python入门Anaconda和Pycharm的安装和配置详解
2019/07/16 Python
python代码打印100-999之间的回文数示例
2019/11/24 Python
Django Xadmin多对多字段过滤实例
2020/04/07 Python
Deichmann英国:德国鞋类零售商
2021/01/30 全球购物
字符串str除首尾字符外的其他字符按升序排列
2013/03/08 面试题
什么样的创业计划书可行性高?
2014/02/01 职场文书
教师现实表现材料
2014/02/14 职场文书
出纳试用期自我鉴定范文
2014/09/16 职场文书
小学优秀学生评语
2014/12/29 职场文书
重阳节慰问信
2015/02/15 职场文书
如何用JavaScript学习算法复杂度
2021/04/30 Javascript
DE1103使用报告
2022/04/05 无线电
Spring Boot 的创建和运行示例代码详解
2022/07/23 Java/Android