当前位置:Web前端 > > 正文

html5新增全局属性(HTML5自定义属性的问题分析)

时间:2021-10-08 00:24:03类别:Web前端

html5新增全局属性

HTML5自定义属性的问题分析

问题背景

在页面与js传值中我们经常用到data-id="1"的方式,然后通过e.target.dataset.id取id的值

今天在获取值时怎么也取不到

问题分析

后来发现e对象有currentTarget和target属性,而dataset就在currentTarget中,所以通过e.currentTarget.dataset.id取到了正确的值。

另外data-id="1"最好不要用驼峰命名如:data-Id="1" ,这样有时候也取不到值。

HTML5 自定义属性

网站中经常会看到以data-开头的属性定义,虽然W3C不认定,但最新HTML5规定data-是合理的,在HTML5中,任何以data-开始的都是自定义属性,通常它用来实现一些HTML里没有明确定义的元素,把用户自定义的属性应用到代码中

微信小程序文档

什么是事件

事件是视图层到逻辑层的通讯方式。

事件可以将用户的行为反馈到逻辑层进行处理。

事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。

事件对象可以携带额外信息,如 id, dataset, touches。

事件的使用方式

在组件中绑定一个事件处理函数。

如bindtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。

  • <view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>
    
  • 在相应的Page定义中写上相应的事件处理函数,参数是event。

  • Page({
      tapName: function(event) {
        console.log(event)
      }
    })
    
  • 可以看到log出来的信息大致如下:

  • {
      "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
      }]
    }
    
  • 使用WXS函数响应事件

    总结

    以上所述是小编给大家介绍的HTML5自定义属性的问题分析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对开心学习网网站的支持!
    如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

    上一篇下一篇

    猜您喜欢

    热门推荐