微信小程序实现bindtap等事件传输

以前认为微信小程序按钮点击事件的参数传输与网页端相同，即传输的参数可以写入事件中。但是，在这次尝试之后，发现applet的控制台报告了一个错误，并报告bindtap中的参数是错误的。之后百度发现小程序按钮点击此类事件时一般的处理方法是指示元素的id，bindtap只写函数名。例如，Bindtap='setNumber '而不是bindtap='setNumber(1)'。只需在js中编写函数(e)。传递元素的所有信息都可以通过e。

什么是事件

事件是从视图层到逻辑层的通信模式。事件可以将用户的行为反馈到逻辑层进行处理。

事件可以绑定到组件，当到达触发事件时，将执行逻辑层中相应的事件处理功能。

事件对象可以携带附加信息，如id、数据集、触摸。

看图片，因为要传输的数据很多，所以我们通过数据集携带参数信息。如果只有一个参数，可以通过id传递。

详细说明(以常见的点击为例)

页面结构

视图id='tapTest '数据-hi='微信' bindtap='tapName '点击我！/viewJS

页面({点击名称：函数(事件){console.log(事件)}})事件打印结果

{'type':'tap '，' timeStamp':895，//////////////////////' target ' : { ' id ' : ' tapTest '，' dataset': { 'hi': '微信' }，' currentTarget ' : { ' id ' : ' tapTest '

1.数据名不能有大写字母。如果需要，您可以通过-(中间的破折号)连接单词。编译时，小程序会自动将第二个单词的第一个字母大写。图片中的代码是用于自我标记的，所以第二个单词的第一个字母会被覆盖，但没有必要。对象不能存储在data-*属性中。

2.注意打印结果中目标和当前目标之间的差异。

目标触发事件的源组件。由currentTarget事件绑定的当前组件。如果将事件绑定到父容器并传递参数，当您单击父容器时，绑定到事件的组件和触发事件的源组件是同一个元素，因此currenttarget和target都可以获取参数，但是当您单击子元素时，target不是绑定到事件的组件，因此它无法获取参数。由于事件冒泡的机制，绑定在父容器上的事件仍然可以被触发，所以currentTarget仍然可以获取参数。

解释

Id参数与dataset相似，只是最后取值时不同。event.currentTarget.id

PS:小程序视图使用bindtap传递值

如图所示，视图标记是用bindtap事件添加的，值是通过data-name传递的。如果视图中只有单词，则可以通过单击整个视图区域来接收数据名称的值。如果将标签添加到视图中，则不能通过单击标签所包裹的区域来获得数据名称的值。解决方案：将值方法从e.target.dataset.carrierName更改为e . current target . dataset . carrier name。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。