Problem analysis of HTML5 custom attributes

When transferring values ​​between pages and js, we often use data-id=1, and then get the value of id through e.target.dataset.id

Today I can't get the value when I get it

Later, I found that the e object has currentTarget and target attributes, and the dataset is in currentTarget, so the correct value is obtained through e.currentTarget.dataset.id .

In addition, it is best not to use camel case for naming data-id=1, such as: data-Id=1 , otherwise the value may not be obtained sometimes.

It is common to see attribute definitions starting with data- on websites. Although W3C does not recognize it, the latest HTML5 stipulates that data- is reasonable. In HTML5, anything starting with data- is a custom attribute, which is usually used to implement Some elements that are not clearly defined in HTML apply user-defined attributes to the code.

Events are the communication method from the view layer to the logic layer.

Events can feed back user behavior to the logic layer for processing.

Events can be bound to components. When the trigger event is reached, the corresponding event processing function in the logic layer will be executed.

Event objects can carry additional information, such as id, dataset, touches.

Bind an event handler to the component.

For example, bindtap, when the user clicks on the component, the corresponding event processing function will be found in the corresponding Page of the page.

 <view id=tapTest data-hi=WeChat bindtap=tapName> Click me! </view>

Write the corresponding event processing function in the corresponding Page definition, and the parameter is event.

 Page({ tapName: function(event) { console.log(event) }})

You can see that the information logged out is roughly as follows:

 { type:tap, timeStamp:895, target: { id: tapTest, dataset: { hi:WeChat } }, currentTarget: { id: tapTest, dataset: { hi:WeChat } }, detail: { x:53, y: 14 }, touches:[{ identifier:0, pageX:53, pageY:14, clientX:53, clientY:14 }], changedTouches:[{ identifier:0, pageX:53, pageY:14, clientX:53, clientY:14 }]}

Respond to events using WXS functions

The above is the problem analysis of HTML5 custom attributes introduced by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for your support of the VeVb martial arts website!

If you think this article is helpful to you, you are welcome to reprint it, please indicate the source, thank you!