JS事件对象中 target 和 currentTarget 的区别

今天我们就来简单谈谈JavaScript的Event事件对象中 target 和 currentTarget 两者之间的区别吧~

我们知道，想要获取某事件所绑定的元素，通常我们可以直接使用 this 对象即可。比如：

稍微给它们加点样式：

页面效果如下：

其中绿色盒子 id 为 box ，而红色盒子 id 为 container ，绿盒子是红盒子的子元素。现在，我给它们分别添加点击事件，目的是获取它们的 id 属性。

可以看到，只要我们给哪个元素绑定点击事件，那么事件执行时通过 this 所获取到的元素就是绑定点击事件的那个元素。

但是，并不是任何时候我们都可以通过 this 来获取当前绑定事件元素，比如当我们使用箭头函数或使用Vuejs框架时， this 就“失效”了。

有关箭头函数为什么会导致 this 指向问题，请戳→ ES6之箭头函数 。

这里的 this 指向的是当前Vue组件实例，所以 thisid 自然获取的是 data 中的 id 而不是 container 了。

那么，对于这个问题我们该如何解决呢？如何才能正确获取到当前绑定事件元素呢？

这时我们就需要用到事件对象中的 target 和 currentTarget 属性了。

我们看到，通过 target 和 currentTarget 都成功获取到了点击事件所绑定的DOM元素，那么 target 和 currentTarget 之间又有什么区别呢？

其实，只要我们将事件处理程序直接绑定到目标元素，那么目标元素事件执行时， target 和 currentTarget 均指向的是该目标元素。然而，如果事件处理程序并未绑定在目标元素，而是在其祖先元素上时，那么 target 则指向的是该目标元素，而 currentTarget 指向的是当前绑定事件的祖先元素。

可能看起来比较难理解，我们还是用最开始那个例子吧。

此时，只要 foo() 执行，那么 ecurrentTargetid 的值必然是 container ，因为 currentTarget 永远指向的是 事件所绑定的元素 （这里点击事件直接绑定在container元素上）。

但是 target 则不同，它指向的是 事件实际执行所在的元素 ，所以本例中 etargetid 的值取决于鼠标直接所点击的元素。

① 鼠标直接点击container元素，也就是红色部分

这时 target 和 currentTarget 均指向的是container元素，因为事件执行的目标和事件绑定的目标是相同的，都是container元素。

② 鼠标直接点击box元素，也就是绿色部分

这时 target 指向的是box元素，而 currentTarget 指向的是container元素，因为事件执行的直接目标是box元素。

1css只在当前组件起作用

答：在style标签中写入 scoped 即可 例如：

2v-if 和 v-show 区别

答：v-if按照条件是否渲染，v-show是display的block或none；

3$route和$router的区别

答：$route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。而$router是“路由实例”对象包括了路由的跳转方法，钩子函数等。

4vuejs的两个核心是什么？

答：数据驱动、组件系统

5vue几种常用的指令

答：v-for 、 v-if 、v-bind、v-on、v-show、v-else

6vue常用的修饰符？

答：prevent: 提交事件不再重载页面；stop: 阻止单击事件冒泡；self: 当事件发生在该元素本身而不是子元素的时候会触发；capture: 事件侦听，事件发生的时候会调用

7v-on 可以绑定多个方法吗？

答：可以

8vue中 key 值的作用？

答：当 Vuejs 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。key的作用主要是为了高效的更新虚拟DOM。

9什么是vue的计算属性？

答：在模板中放入太多的逻辑会让模板过重且难以维护，在需要对数据进行复杂处理，且可能多次使用的情况下，尽量采取计算属性的方式。好处：①使得数据处理结构清晰；②依赖于数据，数据更新，处理结果自动更新；③计算属性内部this指向vm实例；④在template调用时，直接写计算属性名即可；⑤常用的是getter方法，获取数据，也可以使用set方法改变数据；⑥相较于methods，不管依赖的数据变不变，methods都会重新计算，但是依赖数据不变的时候computed从缓存中获取，不会重新计算。

10vue等单页面应用及其优缺点

答：优点：Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，核心是一个响应的数据绑定系统。MVVM、数据驱动、组件化、轻量、简洁、高效、快速、模块友好。

缺点：不支持低版本的浏览器，最低只支持到IE9；不利于SEO的优化（如果要支持SEO，建议通过服务端来进行渲染组件）；第一次加载首页耗时相对长一些；不可以使用浏览器的导航按钮需要自行实现前进、后退。

11怎么定义 vue-router 的动态路由 怎么获取传过来的值

答：在 router 目录下的 indexjs 文件中，对 path 属性加上 /:id，使用 router 对象的 paramsid 获取。

12vue插槽的理解

答：vue插槽有三种，具名插槽，匿名插槽，作用域插槽

通过插槽可以动态指定某一组件模块部分的渲染，我们在调用组件的时候，在组件的标签中传递了什么样的标签结构，就会在插槽中渲染什么样的标签结构

以上就是关于JS事件对象中 target 和 currentTarget 的区别全部的内容，包括:JS事件对象中 target 和 currentTarget 的区别、vue前端简答题、等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！