浅谈 Event.Target 的使用及原理

浅谈 函数event中的Target属性和currentTarget属性

举个例子：

 

Target :在事件流的目标阶段

currentTarget:在事件流的捕获，目标及冒泡阶段

 

简单的介绍下：由于在wx小程序中事件无法像w3c标准那样直接在事件触发的时候传入参数，

所以在使用target事件流的时候出现了一些问题，问题如下：

1.如下函数

函数中的 Target 指的是 事件真正的发送者是e.target（而且是可以变的，根据触发的不同displayObject，白话就是：用户的鼠标点击在那个标签上 e.target 就来自哪里）

    ...
    ...
    ...


aa=function(e) {

var index = e.Target.dataset.index // 微信中写法无需纠结对错 主要看 e.Target

console.log(index);

}

 

2.如下函数

函数中的 currentTarget指的是 注册事件的侦听器 e.currentTarget（不会变的,e.currentTarget指向事件所绑定的元素，白话就是：用户的鼠标不管点击在那个标签上 e.currentTarget始终是在所绑定的标签事件发出）

    ...
    ...
    ...


aa=function(e) {

var index = e.currentTarget.dataset.index // 微信中写法无需纠结对错 主要看 e.currentTarget

console.log(index);

}

总结：：：所以看情况使用

如果说是一个单标签绑定的事件 可以使用以上任意两种方法都是可行的；

如果你所绑定事件的标签内还有多个子标签的话建议使用 e.currentTarget ；

 

我的业务需要是：循环渲染一个div盒子，在这个div盒子上绑定一个自定义属性和值，但是这个div盒子中还有子元素。如果使用 e.Target 的话就容易出现：当鼠标点击在子元素的时候就获取不到我在父元素上绑定自定义属性的值，这时候使用 e.currentTarget 不管点击的是父元素（绑定自定义的属性）还是子元素，函数内所拿到的 e 都是在绑定点击事件的标签处传过来的！