天天看点

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

今天聊下JavaScript中的事件委托跟深浅拷贝

说下其中的区别

onclick只能绑定一个事件,而addEventListener可以同时绑定多个事件

点击 “title3里面的文本” 会触发 3 次事件,分别 弹出

“title3inner” -> “title3” -> “container”

至于事件冒泡倒过来即是事件捕获,即:点击 “title3里面的文本” 会触发 3 次事件,分别 弹出

“container” -> “title3” -> “title3inner”

事件委托的使用

至于优势嘛,便是只需注册一个点击事件,然后通过target来判断点击的具体元素。而currentTarget指的是注册事件的元素。

target是你实际中点击的元素

currentTarget是绑定事件的元素

如果不用事件委托的话,在一个列表上,每条数据后,添加一个按钮,然后给每个按钮注册一个事件,每个元素绑定一个事件,那么多的按钮,肯定会对前端性能有所影响。这时候委托肯定是最好的选择了,毕竟委托只需注册一个事件。

理论上,使用事件委托确实是一种优化,只需注册一个事件,然后通过事件冒泡来实现相应的功能。

至于在Vue项目中,到底用不用事件委托呢?这里好像有个争议。

有人说在Vue中,已经帮你做过了,也有人说并没有,我没看过源码,咱也不知道。

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

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

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

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

实际中,如果要实现深拷贝,怎么做呢?

方法主要是一个通过递归来赋值,还有一个通过JSON.stringify与JSON.parse这两个方法来实现。

在这里使用第二种方法,毕竟最是简单,简单、暴力,也往往是最有效的解决办法。

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