微信小程序开发:深入理解e.target与e.currentTarget的区别及应用场景

2024-12-24
来源:网络整理

参考文章1:e与e的区别。通过【小程序】和e获得。

参考文章2:【微信小程序】e..id和e...id的区别

1.绑定整个view读取id

场景如下:

数据库中有这样一个唯一的标识符来标识这个订单。数据库中的字段名称是Oid。用户点击后,订单状态发生变化。需要将id值传输到后端数据库来修改状态。

当用户点击整个视图框时,他会读取这个框的id(即Oid)。它适合于:不需要刻意要求框中包含的元素组件,只需点击整个元素即可。

代码如下:(只贴xml和js部分)

xml部分:注意这里的关键点是=””事件的触发

//中间内容省略

js部分:

changcc:function(e){ var name = e.currentTarget console.log(e.currentTarget) }

我们看一下控制台的输出

自然,如果想以数组的形式获取Oid,就写成e...item.Oid的形式

js修改如下:

changcc:function(e){ var name =e.currentTarget.dataset.item.Oid }

此时输出站输出Oid 98

2.读取视图下text标签中的id

在开发过程中,会出现这样的场景

以更改地址为例:

和上面第一个想法一样,我想获取每个视图的唯一Aid(Aid是数据库中地址的唯一标识字段),但是Aid并不绑定到子元素上,只绑定到整个视图上。所以用e。获取父元素的值,并使用 e.获取子元素的值。

xml和js代码如下:

xml:

修改收货地址

开发微信小程序代码流程_微信小程序开发控件_微信开发者工具开发小程序代码

注意这里的id是放在视图下方的文本中的。使用此样式来构建按钮并绑定事件。

js:

alteraddress: function (e) { e.target === e.currentTarget var name = e.target.dataset.id console.log(name) }

看一下输出站的输出结果

建议先写出父子元素继承的基本形式e. === e.彼此形式输出(.log(变量名))。按照各输出形式来写

例如:我写完了e。首先,然后输出

alteraddress: function (e) { console.log(e.currentTarget) }

可以看到控制台中没有id相关的信息,所以要传递id,使用e。 === e.

js 中:

alteraddress: function (e) { e.target === e.currentTarget console.log(e.target) }

控制台结果如下:

您可以看到 id 已经可以读取,因为输出是类似数组的形式。自然,如果想要获取id,可以写成e...id的形式。

这样一开始就可以得到第二种方法的js代码

alteraddress: function (e) { e.target === e.currentTarget var name = e.target.dataset.id console.log(name) }

3.(优化)获取按钮的id

我在做第二个模块的时候就想过是否可以直接绑定按钮,因为都是按钮的形式,但不同的是事件也是直接绑定的(第二种方法中,中文是样式绑定到文本之外的视图)

xml和js代码如下:

XML:

确认送达

js:

开发微信小程序代码流程_微信小程序开发控件_微信开发者工具开发小程序代码

var name = e.currentTarget.id; console.log(e.currentTarget) console.log(name)

看一下控制台输出:

可以看到,因为事件不是绑定在view上而是绑定在view上,所以不需要e。 === e.通过它,所以你可以只使用 e。直接,然后用方法二中的“傻瓜”方法输出每一个,然后确定最终的值。

4. 绑定多条信息

第三点,绑定id可以返回id值,但是如果除了这个我们还想绑定这个组件中包含的其他值,我们可以使用这个方法。还是之前的例子,直接上代码

xml:

确认送达

js:

var name = e.currentTarget.id; var Op2=e.currentTarget.dataset.id console.log(e.currentTarget)

查看控制台输出

可以看到前端不同的写法对应着不同的输出方式。

使用id="{{.Oid}}",对应js中的e..id;

使用data-id="{{.Oid}}",对应js中的e...id

5. 总结

(免责声明:这只是经验总结,原理其实还不是很清楚)

1.直接view或者事件绑定以及id获取,直接使用e。然后输出,根据输出值得到id。

2.使用e.===e。在子元素中传递值,然后根据输出值获取id

3、使用id="{{.Oid}}",对应js中的e..id;

使用data-id="{{.Oid}}",对应js中的e...id

分享